code_field

Champ de code

Un champ de texte de code personnalisable prenant en charge la syntaxe en surbrillance

Démo en direct

Une démo en direct présentant quelques combinaisons de langue / thème

Vitrine

La machine virtuelle expérimentale Dlox utilise le champ de code dans son éditeur en ligne

Caractéristiques

• Code survient pour 189 langues intégrées avec 90 thèmes grâce à Flutter_Highlight
• Language facile à mettre en évidence la personnalisation grâce à l'utilisation des cartes de thème
• Style de champ de code entièrement personnalisable via une API comme TextField
• Prise en charge le défilement horizontal / vertical et l'expansion verticale
• Prend en charge les modificateurs de code
• Fonctionne sur Android, iOS, Web, macOS, Windows et Linux

Les modificateurs de code aident à gérer automatiquement les retraits

L'éditeur est enveloppé dans un conteneur à défilement horizontal pour gérer les longues lignes

Installation

Dans le pubspec.yaml de votre projet Flutter, ajoutez la dépendance suivante:

 dependencies :
  ...
  code_text_field : <latest_version>

dernière version

Dans votre bibliothèque, ajoutez l'importation suivante:

 import 'package:code_text_field/code_text_field.dart' ;

Exemple simple

Un widget CodeField fonctionne avec un contrôleur de code qui analyse dynamiquement l'entrée de texte selon une langue et la rend avec une carte de thème

 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' ),
      ),
    );
  }
}

Ici, le code source de la police Monospace a été ajouté au dossier Assets et au fichier pubspe.yaml.

Options d'analyseur

En plus d'une définition de la langue, le style par mot peut être spécifié dans le champ StringMap

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

Des regexxes plus complexes peuvent également être utilisés avec le PatternMap . Cependant, lorsqu'une langue est utilisée, ses modèles regexés ont priorité sur PatternMap et StringMap .

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

PatternMap et StringMap peuvent être utilisés sans spécifier une langue.

_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),
  },
);

Modificateurs de code

Les modificateurs de code peuvent être créés pour réagir aux touches spéciales. L'onglet Modificateurs par défaut Gire l'espace et l'indentation automatique. Voici l'implémentation du TabModificateur par défaut

 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

Champ de code

 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,
  })

Lininumberstyle

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

Codémontur

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

Limites

• La désactivation de la saisie semi-automatique sur Android ne fonctionne pas encore

Notes

Un changement de rupture de TextEditingController a été introduit dans Flutter Beta, Dev & Master Channels. La bêta de la branche devrait se conformer à ces changements.