A powerful and feature-rich alternative for flutter_code_editor and code_text_field. Designed to bring a seamless and efficient coding experience.

Note

This package is originally developed as part of an Android IDE app that I'm currently working on, so it's optimized for mobile use. PC specific features like extra keyboard shortcuts aren't included by default. If you'd like to add support for those, feel free to open a pull request. I'm currently tied up with college and academics, contributions are welcome!

Note

Web support has been removed since 0.1.8 because of some conflicts with dart:io. A seperate package flutter_code_crafter_web will be released soon for web.

Features

• Syntax highlighting (available languages)
• Multiple themes (available themes)
• Code folding
• AI code completion
• Built-in universal LSP client (Suggestions, diagnostics, etc.)
• Vertical ruler lines (Indentation guides lines similar to VSCode)
• Code formatting (Auto indentation, line wrapping, etc.)

_{AI Code completion and LSP suggestion}

_{Code folding and breakpoints}

_{LSP hover using pyright LSP server}

_{Bracket matching and auto indentation
error highlight using clangd LSP server}

Note

The above features works on all supported languages, I just used python for the demo.
You can use any language with corresponding LSP server to get hover details and suggestions similar to VScode.

Usage

Basic usage

Plug and play with CodeCrafter widget. Import a langauge from the highlight package and theme from the flutter_highlight package, and you're good to go!

import 'package:flutter/material.dart';
import 'package:flutter_code_crafter/code_crafter.dart';
import 'package:flutter_highlight/themes/an-old-hope.dart'; // Import the theme you want to use
import 'package:highlight/languages/python.dart'; // Import the language you want to use

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  late final CodeCrafterController controller; // Initialize the CodeCrafterController

  @override
  void initState() {
    controller = CodeCrafterController();
    controller.language = python; // Set the language for syntax highlighting
    super.initState();
  }

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Code Crafter Example')),
        body: CodeCrafter(
          controller: controller,
          theme: anOldHopeTheme, // Use the imported theme
        ),
      ),
    );
  }
}

Advanced usage

• To Setup AI code completion, follow this documentation: AI Code Completion
• To Setup LSP client, follow this documentation: LSP Client

Additional information

This package contains dart:io import, so web supported may be limited. Also there is an issue with tab key when wrapLines property is set to false. This is a known issue with the underlying text editing library and will be fixed in future releases.

Contributions are welcome! If you find any bugs or have any feature requests, please open an issue on the GitHub repository.

CodeCrafter Class

CodeCrafter({
  super.key,
    required this.controller,
    this.initialText,
    this.filePath,
    this.focusNode,
    this.textStyle,
    this.gutterStyle,
    this.editorTheme,
    this.aiCompletion,
    this.aiCompletionTextStyle,
    this.lspConfig,
    this.suggestionStyle,
    this.hoverDetailsStyle,
    this.selectionHandleColor,
    this.selectionColor,
    this.cursorColor,
    this.enableBreakPoints = true,
    this.enableFolding = true,
    this.enableRulerLines = true,
    this.enableSuggestions = true,
    this.enableGutterDivider = false,
    this.wrapLines = false,
    this.autoFocus = false,
    this.readOnly = false,
    this.tabSize = 3,
    this.editorField,
})

GutterStyle class

GutterStyle({
    this.lineNumberStyle,
    this.gutterWidth,
    this.breakpointIcon = Icons.circle,
    this.unfilledBreakpointIcon = Icons.circle_outlined,
    this.foldedIcon = Icons.chevron_right_outlined,
    this.unfoldedIcon = Icons.keyboard_arrow_down_outlined,
    this.dividerColor,
    this.dividerThickness,
    this.breakpointSize,
    this.foldingIconSize,
    this.breakpointColor = Colors.red,
    this.unfilledBreakpointColor = Colors.transparent,
    this.foldedIconColor = Colors.grey,
    this.unfoldedIconColor = Colors.grey,
  });

Sample App Image