Изменить форматирование текста в TextField при нажатии кнопки

Question

Я хочу, чтобы пользователи имели возможность сделать текст жирным, itali c, добавить подчеркивание и гиперссылку на текст в текстовом поле одним нажатием кнопки.

Я реализовал это, мне нужна опция когда пользователь нажимает кнопку со значком (определенную в коде), текст в текстовом поле должен измениться.

PS - я пробовал пакет zefyr, но мне нужно реализовать эти функции в моем собственном виджете с отслеживанием состояния вместо zefyrScaffold.

Я не пытался создать функцию, хранящую свойства форматирования текста, такие как FontWeight.Bold, а затем использовать ее с условиями и bool, потому что я вполне уверен, что это не лучшее решение.

После этого мне нужен текст для поддержания его состояния, потому что я буду кодировать текст в формате base64. Поэтому, если я изменю форматирование текста, будет ли он таким же на стороне другого пользователя после того, как я закодирую его в base64?

TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Start Typing your Message here',
                    hintStyle: TextStyle(
                      fontSize: 17,
                      color: Theme.of(context).textTheme.subtitle.color
                    )
                ),
                maxLines: null,
                minLines: 1,
                autocorrect: true,
                keyboardType: TextInputType.multiline,
                onChanged: (String str){
                  print(str);
                },
              style: TextStyle(
                color: Theme.of(context).textTheme.title.color,
                fontSize: 19,
              ),
              ),

Row(
      children: <Widget>[
        Expanded(
          child: IconButton(
            icon: Icon(LineIcons.times),
            iconSize: 27,
            onPressed: () {
              bottomChangeFunc();
            },
          ),
        ),
        Expanded(
          child: IconButton(
            icon: Icon(LineIcons.bold),
            iconSize: 27,
            color: Theme
                .of(context)
                .iconTheme
                .color,
            onPressed: () {
            },
          ),
        ),
        Expanded(
          child: IconButton(
            icon: Icon(LineIcons.italic),
            iconSize: 27,
            color: Theme
                .of(context)
                .iconTheme
                .color,
            onPressed: () {
            },
          ),
        ),
        Expanded(
          child: IconButton(
            icon: Icon(LineIcons.underline),
            iconSize: 27,
            color: Theme
                .of(context)
                .iconTheme
                .color,
            onPressed: () {
            },
          ),
        ),
        Expanded(
          child: IconButton(
            icon: Icon(LineIcons.link),
            iconSize: 27,
            color: Theme
                .of(context)
                .iconTheme
                .color,
            onPressed: () {},
          ),
        ),
      ],
    ),

Answer 1

Вы можете установить это с помощью enum и некоторых констант стиля.

enum TextMode {
  normal,
  bold,
  italic,
  underline,
  // link,  <- I'm not sure what you want to have happen with this one
}

const normalStyle = TextStyle();
const boldStyle = TextStyle(fontWeight: FontWeight.bold);
const italicStyle = TextStyle(fontStyle: FontStyle.italic);
const underlineStyle = TextStyle(textDecoration: TextDecoration.underline);

// Helper method
TextStyle getStyle(TextMode mode) {
  switch(mode) {
    case TextMode.bold: return boldStyle();
    case TextMode.italic: return italicStyle();
    case TextMode.underline: return underlineStyle();
    default: return normalStyle();
  }
}

Затем вы можете отобразить соответствующий стиль на вашем TextField на основе текущего выбранного значения перечисления:

TextField(
  ...,
  style: TextStyle(
    color: Theme.of(context).textTheme.title.color,
    fontSize: 19,
  ).merge(getStyle(currentMode)),
),

Чтобы изменить стиль, просто измените текущий FontMode в обработчиках нажатий кнопок:

IconButton(
  ...
  icon: Icon(LineIcons.bold),
  onPressed: () => setState(() => currentMode = FontMode.bold),
),
// and so on for the other modes

Сохранение и получение состояния легко, поскольку перечисления в основном являются прославленными целыми числами.