code_field

Codefield

Sorotan Sintaks Bidang Teks Teks yang Dapat Disesuaikan

Demo langsung

Demo langsung yang menampilkan beberapa kombinasi bahasa / tema

Memamerkan

Eksperimental VM DloX menggunakan Codefield di editor online -nya

Fitur

• Sorotan kode untuk 189 bahasa bawaan dengan 90 tema berkat FLUTTER_HIGHLIGHT
• Kustomisasi Sorot Bahasa Mudah Melalui Penggunaan Peta Tema
• Gaya bidang kode yang sepenuhnya dapat disesuaikan melalui bidang teks seperti API
• Menangani gulir horizontal/vertikal dan ekspansi vertikal
• Mendukung pengubah kode
• Bekerja di Android, iOS, Web, MacOS, Windows, dan Linux

Pengubah kode membantu mengelola indentasi secara otomatis

Editor dibungkus dalam wadah yang dapat digulir horizontal untuk menangani antrean panjang

Menginstal

Di pubspec.yaml proyek flutter Anda, tambahkan ketergantungan berikut:

 dependencies :
  ...
  code_text_field : <latest_version>

Versi Terbaru

Di perpustakaan Anda, tambahkan impor berikut:

 import 'package:code_text_field/code_text_field.dart' ;

Contoh sederhana

Widget Codefield berfungsi dengan codecontroller yang secara dinamis mem -parsing input teks sesuai dengan bahasa dan membuatnya dengan peta tema

 import 'package:flutter/material.dart' ;
import 'package:code_text_field/code_text_field.dart' ;
// Import the language & theme
import 'package:highlight/languages/dart.dart' ;
import 'package:flutter_highlight/themes/monokai-sublime.dart' ;

class CodeEditor extends StatefulWidget {
  @override
  _CodeEditorState createState () => _CodeEditorState ();
}

class _CodeEditorState extends State < CodeEditor > {
  CodeController ? _codeController;

  @override
  void initState () {
    super . initState ();
    final source = "void main() { n    print( " Hello, world! " ); n }" ;
    // Instantiate the CodeController
    _codeController = CodeController (
      text : source,
      language : dart,
    );
  }

  @override
  void dispose () {
    _codeController ? . dispose ();
    super . dispose ();
  }

  @override
  Widget build ( BuildContext context) {
    return CodeTheme (
      data : const CodeThemeData (styles : monokaiSublimeTheme),
      child : CodeField (
        controller : _codeController ! ,
        textStyle : const TextStyle (fontFamily : 'SourceCode' ),
      ),
    );
  }
}

Di sini, Monospace Font Source Code Pro telah ditambahkan ke folder aset dan ke file pubspec.yaml.

Opsi parser

Di atas definisi bahasa, gaya bijaksana kata dapat ditentukan dalam bidang StringMap

_codeController = CodeController (
  //...
  stringMap : {
    "Hello" : TextStyle (fontWeight : FontWeight .bold, color : Colors .red),
    "world" : TextStyle (fontStyle : FontStyle .italic, color : Colors .green),
  },
);

Regeks yang lebih kompleks juga dapat digunakan dengan PatternMap . Ketika suatu bahasa digunakan, pola regex -nya diutamakan daripada PatternMap dan StringMap .

_codeController = CodeController (
  //...
  patternMap : {
    r"B#[a-zA-Z0-9]+b" :
        TextStyle (fontWeight : FontWeight .bold, color : Colors .purpleAccent),
  },
);

Baik PatternMap dan StringMap dapat digunakan tanpa menentukan bahasa.

_codeController = CodeController (
  text : source,
  patternMap : {
    r'".*"' : TextStyle (color : Colors .yellow),
    r'[a-zA-Z0-9]+(.*)' : TextStyle (color : Colors .green),
  },
  stringMap : {
    "void" : TextStyle (fontWeight : FontWeight .bold, color : Colors .red),
    "print" : TextStyle (fontWeight : FontWeight .bold, color : Colors .blue),
  },
);

Pengubah kode

Pengubah kode dapat dibuat untuk bereaksi terhadap penekanan tombol khusus. Pengubah default menangani tab ke ruang & indentasi otomatis. Berikut implementasi tabModifier default

 class TabModifier extends CodeModifier {
  const TabModifier () : super ( ' t ' );

  @override
  TextEditingValue ? updateString (
      String text, TextSelection sel, EditorParams params) {
    final tmp = replace (text, sel.start, sel.end, " " * params.tabSpaces);
    return tmp;
  }
}

API

Codefield

 const CodeField ({
    Key ? key,
    required this .controller,
    this .minLines,
    this .maxLines,
    this .expands = false ,
    this .wrap = false ,
    this .background,
    this .decoration,
    this .textStyle,
    this .padding = EdgeInsets .zero,
    this .lineNumberStyle = const LineNumberStyle (),
    this .enabled,
    this .onTap,
    this .readOnly = false ,
    this .cursorColor,
    this .textSelectionTheme,
    this .lineNumberBuilder,
    this .focusNode,
    this .onChanged,
    this .isDense = false ,
    this .smartQuotesType,
    this .keyboardType,
    this .lineNumbers = true ,
    this .horizontalScroll = true ,
    this .selectionControls,
    this .hintText,
    this .hintStyle,
  })

Linenumberstyle

  const LineNumberStyle ({
    this .width = 42.0 ,
    this .textAlign = TextAlign .right,
    this .margin = 10.0 ,
    this .textStyle,
    this .background,
  });

Codecontroller

 CodeController ({
    String ? text,
    Mode ? language,
    this .patternMap,
    this .stringMap,
    this .params = const EditorParams (),
    this .modifiers = const [
      IndentModifier (),
      CloseBlockModifier (),
      TabModifier (),
    ],
  }) 

Batasan

• AutoComplete Donable di Android belum berfungsi

Catatan

Perubahan yang melanggar ke TextEditingController diperkenalkan di Flutter Beta, Dev & Master Channels. Beta cabang harus mematuhi perubahan itu.