如何更改 flutter material 按钮的字体大小？

Question

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

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

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

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

Answer 2

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 3

仅使用官方文档 `TextStyle` & `fontSize`

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

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

fontSize default to 14 logical pixels, double

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
                      )

定义全局主题 class :

 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(), 
    );
  }
}

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

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,
              ],
            )),
    );
  }
}

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

        Header(title: "Hello World"),

Answer 6

Link(
                    uri: Uri.parse(
                        'https://google.com/'),
                    target: LinkTarget.blank,
                    builder: (ctx, openLink) {
                      return TextButton.icon(
                        onPressed: openLink,
                        label: const Text('Google'),
                        icon: const Text(''),
                      );
                    },
                  ),

**Blockquote**

如何更改 flutter material 按钮的字体大小？

how to change font size of flutter material button?

button

flutter

text-size

仅使用官方文档 `TextStyle` & `fontSize`

演示

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

如何更改 flutter material 按钮的字体大小？

how to change font size of flutter material button?

button

flutter

text-size

仅使用官方文档 TextStyle & fontSize

演示

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

仅使用官方文档 `TextStyle` & `fontSize`