如何更改素材素材按钮的字体大小？

Question

如何更改材质按钮的字体大小？有更好的方法吗？

new MaterialButton(
  height: 140.0,
  minWidth: double.infinity,
  color: Theme.of(context).primaryColor,
  textColor: Colors.white,
  child: new Text("material button"),
  onPressed: () => {},
  splashColor: Colors.redAccent,
),

Answer 1

Flutter中的小部件体系结构使这一过程变得非常简单：MaterialButton的子级是Text小部件，可以使用其style属性对其进行样式设置：

new MaterialButton(
  height: 140.0,
  minWidth: double.infinity,
  color: Theme.of(context).primaryColor,
  textColor: Colors.white,
  child: new Text(
    "material button",
    style: new TextStyle(
      fontSize: 20.0,
      color: Colors.yellow,
    ),
  ),
  onPressed: () => {},
  splashColor: Colors.redAccent,
);

Answer 2

您可以使用style attribute of your Text widget。

MaterialButton(
  ...
  child: Text(
    'material button',
    style: TextStyle(
      fontSize: 20.0, // insert your font size here
    ),
  ),
)

Answer 3

仅使用官方文档TextStyle和fontSize

https://api.flutter.dev/flutter/painting/TextStyle-class.html

https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html

fontSize默认为14逻辑像素，是两倍

final double fontSize;

演示

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: StateApp(),
      home: Scaffold(
        appBar: AppBar(
          title: Text("appbar"),
          backgroundColor: Colors.blueAccent[700],
        ),
        body: Center(
          child: StateApp(),
        ),
      ),
    );
  }
}

class StateApp extends StatefulWidget {
  StateApp();
  @override
  createState() => _StateAppState();
}

class _StateAppState extends State<StateApp> {
  int _counter = 0;
  _updateCounter() => setState(() {
    _counter++;
  });
  // _updateCounter() {
  //   setState(() {
  //     _counter++;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(23.0),// double
              child: Text(
                'You have pushed the button this many times:',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,// double
                ),
              ),
            ),
            Center(
              child: Text(
                '$_counter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 23.0,// double
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // _counter++;
          print("clicked = $_counter");
          // setState(() {
          //   _counter++;
          // });
          _updateCounter();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 4

使用ThemeData，您可以全局设置按钮的文本属性：

const ColorScheme _scheme = ColorScheme.light();
const Color _primaryColor = TranscarentColors.primary;

final ThemeData theme = ThemeData(
  primaryColor: _primaryColor,
  textTheme: const TextTheme(
    button: TextStyle(
      color: Colors.white,
    ),
  ),
  buttonTheme: const ButtonThemeData(
    height: 140.0,
    minWidth: double.infinity,
    colorScheme: _scheme,
    splashColor: Colors.redAccent,
    buttonColor: _primaryColor,
    textTheme: ButtonTextTheme.primary,
  ),
);

...可以作为参数传递给 MaterialApp()

Answer 5

有两种定义字体大小的方法

1) 像 Flutter 新手一样内联设置随机字体大小

Text('item ${++index}', style: TextStyle(
                        color: Colors.green,
                        fontSize: 32)

2) 使用 Apps Material Theme 中预定义的排版字体大小

这是一个更好的方法。这样您就可以在一个地方定义字体大小，它会自动应用到您的整个应用程序中。

Text('item ${++index}', style: TextStyle(
                        color: Colors.green,
                        fontSize: Theme
                            .of(context)
                            .textTheme
                            .headline1?.fontSize?? 32
                      )

定义全局主题类：

 import 'package:flutter/material.dart';

// Global Theme For App
class AppTheme {
  ThemeData buildThemeData() {
    return ThemeData(
        // Global Color Style
        primarySwatch: Colors.blueGrey,
        primaryColor: Colors.blueGrey[800],
        accentColor: Colors.tealAccent,

        // Global Text Style
        textTheme: TextTheme(
          headline1: TextStyle(
            fontSize: 72.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'Cutive',
          ),
          headline6: TextStyle(fontSize: 36.0),
          bodyText2: TextStyle(fontSize: 14.0),
        ));
  }
}

现在在应用程序的入口点应用它：

import 'package:flutter/material.dart';
import 'theme.dart';
import './widgets/home.dart';
void main() {
  runApp(MainApp());
}
// This widget is the root of your application.
class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme().buildThemeData(),
      home: MyStatelessWidget(), 
    );
  }
}

我使用的第三种方法是定义我无论如何都会用于标题、标签等的组件并重用它们

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class Header extends StatelessWidget {
  Header({
    required this.title,
  });

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(
          fontSize: 32,
          foreground: Paint()
            ..shader = ui.Gradient.linear(
              const Offset(0, 10),
              const Offset(40, 20),
              <Color>[
                Colors.red,
                Colors.blue,
              ],
            )),
    );
  }
}

这样在所有小部件中设置标题减少到 1 行：

        Header(title: "Hello World"),