Как использовать несколько цветов в текстовом поле в flutter

#flutter

Вопрос:

 List<String> dataTypes = const <String>[
'int',
'double',
'num',
'Byte',
'bool',
'byte',
'short',
'int',
'long',
'float',
'double',
'boolean',
'char'
];
  
 List<String> keywords = const <String>[
'async',
'await',
'break',
'case',
'catch',
'class',
'const',
'continue',
'default',
'deferred',
'do',
'dynamic',
'else',
'enum',
'export',
'external',
  ];



 List program = [];

  Color syntaxColor(){
for(int i = 0; i<program.length; i  ){
  for(int j = 0; i<dataTypes.length; j  ){
    if(program[i] == dataTypes[j]){
      return Colors.orange;
    }
  }
}

for(int i = 0; i<program.length; i  ){
  for(int j = 0; i<keywords.length; j  ){
    if(program[i] == keywords[j]){
      return Colors.blue;
    }
  }
}
return Colors.black;

}



Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title:Text("Code Editor"),
    backgroundColor: Colors.blueGrey,
  ),
  body: Padding(
    padding: const EdgeInsets.all(5.0),
    child: Container(
      height: MediaQuery.of(context).size.height * 0.8,
      width: MediaQuery.of(context).size.width * 0.99 ,
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blueGrey
          )
      ),
      child: TextField(
      maxLines: 36,
      onChanged: (value){
        setState(() {
          program.add(value);
        });
      },
      style: TextStyle(
        color: syntaxColor() 
      ),
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10),
        border: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.red,
          ),
        )
      ),
      
    ),
    ),
  ),
);
 }

Здесь я реализовал использование нескольких цветов для разных строк, если какая-либо строка соответствует списку типов данных string, она будет отображаться оранжевым цветом, а если какая-либо строка соответствует списку ключевых слов string, она будет отображаться синим цветом, а остальная часть строки, которая не соответствуетлюбая строка в обоих списках будет отображаться черным цветом.

Я реализовал этот код, но он не работает.

1. Пожалуйста, сделайте свой вопрос более понятным для понимания. Из того, что я понял, вы хотите проверить, равен ли текст в списке другому тексту в другом списке. Для этого я бы использовал list.where() . Взгляните на: codeburst.io /… . Нет необходимости использовать два вложенных цикла for . Ваш код крайне неэффективен. Для понимания основ программирования взгляните на это: youtube.com/playlist?list=PLlxmoA0rQ-LyHW9voBdNo4gEEIh0SjG-q

Ответ №1:

Как насчет использования этого пакета.
Вот пример, связанный с пакетом.

 import 'package:flutter/material.dart';
import 'package:rich_text_controller/rich_text_controller.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RichText Controller Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: RichTextControllerDemo()),
    );
  }
}

class RichTextControllerDemo extends StatefulWidget {
  @override
  _RichTextControllerDemoState createState() => _RichTextControllerDemoState();
}

class _RichTextControllerDemoState extends State<RichTextControllerDemo> {
  RichTextController _controller;

  @override
  void initState() {
    _controller = RichTextController(
      {
        RegExp(
          "num|Byte|bool|byte|short|int|long|float|double|boolean|char/g",
        ): TextStyle(color: Colors.red),
        RegExp(
          "async|await|break|case|catch|class|const|continue|default|defferred|do|dynamic|else|enum|export|external/g",
        ): TextStyle(color: Colors.blue),
      },
      onMatch: (List<String> matches) {},
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: TextField(
      controller: _controller,
    ));
  }
}

1. Сборка виджета (контекст BuildContext) { возвращает каркас (AppBar: AppBar(), body: Center(дочерний элемент: TextFormField(контроллер: _controller, ),),); }

2. Я добавил этот контроллер в TextFormField, но я получаю сообщение об ошибке

3. Метод ‘call’ был вызван для null. Получатель: null Пытался вызвать: call()

4. Я также сделал то же самое, но получаю сообщение об ошибке

5. NoSuchMethodError: вызов метода был вызван с нулевым значением. Получатель null

Ответ №2:

Вы можете использовать пакет rich_text_controller. В нем есть свойство onMatch.

 
import 'package:flutter/material.dart';
import 'rich_text_controller/rich_text_controller.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RichText Controller Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RichTextControllerDemo(),
    );
  }
}

class RichTextControllerDemo extends StatefulWidget {
  @override
  _RichTextControllerDemoState createState() => _RichTextControllerDemoState();
}

class _RichTextControllerDemoState extends State<RichTextControllerDemo> {

// Add a controller
RichTextController _controller;

  @override
  void initState() {
      // initialize with your custom regex patterns and styles
      _controller = RichTextController({
           //
          //* Returns every Hashtag with red color
          //
          RegExp(r"B#[a-zA-Z0-9] b"):TextStyle(color:Colors.red),
         // add as many expressions as you need!

         //! starting v1.1.0
         // Now you have an onMatch callback that gives you access to a List<String>
         // which contains all matched strings
         onMatch: (List<String> matches){
           // Do something with matches.
           //! P.S
           // as long as you're typing, the controller will keep updating the list.
         }
         //!
      });
    super.initState();
  }
}