如何更改Flutter Material按钮的字体大小？

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,
),

- IrishGringo

---

不清楚。您是否想避免使用 MaterialButton？ - Rémi Rousselet

我正在尝试使用按钮，并寻找新的创意。 - IrishGringo

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

- boformer

---

你给我的解决方案做了什么修改？ - creativecreatorormaybenot

Answer 2

你可以利用Text小部件的style属性。

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

- creativecreatorormaybenot

Answer 3

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

1) 在行内设置随机字体大小，如Flutter的新手

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

2）使用应用程序材料主题中预定义的字体大小

这是一种更好的方法。通过这种方式，您可以在一个地方定义字体大小，它将自动应用于您的整个应用程序。

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

通过这种方式，在所有小部件中设置标题只需一行代码：

        Header(title: "Hello World"),

- Hitesh Sahu

Answer 4

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

**引用块**

- Rocky Sotto

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Abhishek Dutt

Answer 5

使用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()

- stevenspiel

Answer 6

仅使用官方文档中的 TextStyle 和 fontSize

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

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

字体大小默认为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),
      ),
    );
  }
}

- xgqfrms