I wonder if there is a way in flutter how to do this style to separate code from normal text
2
You can use code_text_field package.
code_text_field
Example:
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, theme: monokaiSublimeTheme, ); } @override void dispose() { _codeController?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return CodeField( controller: _codeController!, textStyle: TextStyle(fontFamily: 'SourceCode'), ); } }
Output:
For More customization use different options of CodeController
CodeController
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), }, );
Using Text.rich() then you can customize the text to any form you want, detail here
Click here to cancel reply.
2
Answers
You can use
code_text_field
package.Example:
Output:
For More customization use different options of
CodeController
Output:
Using Text.rich() then you can customize the text to any form you want, detail here