如何创建一个根据用户输入更改字体和颜色的 TextField？

Question

我对 Flutter 和 Dart 语言写作还很陌生。我正在尝试创建一个根据用户输入更改颜色和字体系列的 TextField。到目前为止，我有一个可以创建新 TextField 的按钮。我有一个为字体创建的对话框。我只是不知道如何从字体对话框中保存用户输入并能够 link 它到 TextField。

Here is a photo with the TextField

Here is where i can choose a font

问题是我不知道如何 link 用户选择的字体来实际更改文本字体。

谁能帮帮我！

这是我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

TextField _textField1;
AlertDialog _fontPickerDialog;

class TestApp extends StatefulWidget {
  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Test App',
        home: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: Center(
                //for the centered title in the appbar
                child: Text(
                  'TextField Test',
                ),
              ),
            ),
            body: Stack(children: <Widget>[
              ///textfield
              Container(
                  alignment: Alignment.center,
                  child: RaisedButton(
                      child: Text('Click for TextField!'),
                      onPressed: () {
                        setState(() {
                          textField();
                        });
                      })),
              Container(
                child: _textField1,
              ),

              ///fontpicker
              Container(
                  alignment: Alignment.bottomLeft,
                  child: RaisedButton(
                      child: Text('Choose Font'),
                      onPressed: () {
                        setState(() {
                          fontPicker();
                        });
                      })),

              Container(
                alignment: Alignment.center,
                child: _fontPickerDialog,
              ),
            ])));
  }

  void textField() {
    _textField1 = TextField(
      style: TextStyle(
        fontSize: 25,
      ),
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: "Type Here...",
        hintStyle: TextStyle(
          fontSize: 25,
          color: Colors.black,
        ),
      ),
    );
  }

  void fontPicker() {
    _fontPickerDialog = AlertDialog(
        title: const Text(
          'Choose Font...',
        ),
        content: Container(
            width: double.maxFinite,
            child: ListView(children: [
              ListTile(
                  title: Text('Anton', style: GoogleFonts.getFont('Anton')),
                  onTap: () {
                    setState(() {
                      _fontPickerDialog = null;
                    });
                  })
            ])));
  }
}

Answer 1

创建一个状态变量fontName（可能默认为'Roboto'），在您的TextField 样式中使用它：

GoogleFonts.getFont(fontName, fontSize: 25)

并在字体选择器的 setState 中更新它。

如何创建一个根据用户输入更改字体和颜色的 TextField？

How can I create a TextField that changes font and color on user input?

fonts

color-picker

textfield

dart

flutter