首页 > 解决方案 > Flutter中如何实现字体大小调整对话框?

问题描述

我是新来的。我从这个应用程序https://play.google.com/store/apps/details?id=com.nikitadev.usconstitution&hl=en中获得了灵感,我正在用颤振实现字体大小调整对话框。我真的被困住了。

在此处输入图像描述

标签: flutterflutter-layout

解决方案


制作静态变量并使用默认主题中的值。当字体大小增加时,将该变量的值设置为此字体大小。

//Initialize a variable at the top to change
double _textDefaultSize = 16;


void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(
            fontSize: _textDefaultSize, 
            //Use the text Size in the main theme
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text("TextColor checking"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Text(
                "Example Text",
                style: TextStyle(fontSize: _textDefaultSize),
                //Use the font size in all texts
              ),
              FlatButton(
                onPressed: () {
                  setState() {
                    _textDefaultSize++; //Change the value of variable here
                  }
                },
                child: Text("Increase Size"),
              ),
              FlatButton(
                onPressed: () {
                  setState() {
                    _textDefaultSize--; //Change the value of variable here
                  }
                },
                child: Text("Increase Size"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

推荐阅读