flutter 如何在MaterialButton或RaisedButton上应用主题?

wnavrhmk  于 2023-06-24  发布在  Flutter
关注(0)|答案(5)|浏览(155)

有人能帮助指出我们如何定义按钮的基本主题,并在每个按钮上使用它吗?我到处看都只找到textTheme而不是buttonTheme的例子?
即使在buttonTheme上,我们如何定义文本颜色?因为在按钮本身上我们可以像color: Colors.blue一样直接执行

exdqitrt

exdqitrt1#

一种方法是在theme中定义buttonTheme
例如:

void main() {
  runApp(MaterialApp(
    home: Home(),
    theme: ThemeData(
        accentColor: Colors.redAccent,
        buttonTheme: ButtonThemeData(
           buttonColor: Colors.blueAccent,
           shape: RoundedRectangleBorder(),
           textTheme: ButtonTextTheme.accent,
           ....
    )),
  ));
}

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Button Theme"),
          backgroundColor: Colors.green),
      body: Center(
          child: RaisedButton( //Button Color is as define in theme
        onPressed: () {},
        child: Text("Send"), //Text Color as define in theme
      )),
    );
  }
}

有了这个MaterialApp下定义的所有按钮将携带这个主题样式。
文本颜色将是ThemeData中定义的accentColor,因为我定义了textTheme: ButtonTextTheme.accent,所以它将选择accentColor
按钮拾取主题样式如theme中定义

ugmeyewa

ugmeyewa2#

[2020年8月- Flutter 1.20]

从1.20开始,您可以根据按钮类型创建不同的按钮主题配置。
颜色设置示例代码:

void main() {
  runApp(
    MaterialApp(
      home: Home(),
      theme: ThemeData.from(
        colorScheme: ColorScheme.light(),
      ).copyWith(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            onPrimary: Colors.yellow,
            primary: Colors.blue,
          ),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(
            primary: Colors.purple,
            backgroundColor: Colors.green,
          ),
        ),
      ),
    ),
  );
}

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {},
              child: Text('TextButton'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('ElevatedButton'),
            ),
            OutlinedButton(
              onPressed: () {},
              child: Text('OutlinedButton'),
            ),
          ],
        ),
      ),
    );
  }
}

重要flutter发行说明(您可以在迁移指南中找到有关选项的更多信息):

FlatButton、RaisedButton和OutlineButton分别被TextButton、ElevatedButton和OutlineButton替换。ButtonTheme已被TextButtonTheme、ElevatedButtonTheme和OutlinedButtonTheme取代。原始类很快将被弃用,请迁移使用它们的代码。flutter.dev/go/material-button-migration-guide中的新按钮和按钮主题类有一个详细的迁移指南。

j2datikz

j2datikz3#

看起来您还需要为按钮提供textColor。如何创建您的自定义按钮?

class MyButton extends StatelessWidget {
  final String text;
  final Color textColor;
  final Color buttonColor;
  final Function() onPressed;
  MyButton({
    @required this.text,
    this.buttonColor = const Color(0xFF000000) /** Default buttonColor */,
    @required this.onPressed,
    this.textColor = const Color(0xFFDDDDDD) /** Default textColor */,
  });
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: buttonColor,
      onPressed: onPressed,
      child: Text(text,
          style: TextStyle(
            color: textColor,
            fontSize: 20.0,
          )),
    );
  }
}

你也可以像answer given above/below一样定义按钮的颜色。

**[UPDATE]***根据评论的要求,这是如何传递onPressed的函数 *

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Button Theme"),
          backgroundColor: Colors.green),
      body: Center(
        child: MyButton( //My custom button 
        text: "Hit me",
        onPressed: () { print("Ouch! Easy pal!! :p ") },
        textColor = const Color(SOME CUSTOM COLOUR)
      )),
    );
  }
}
laawzig2

laawzig24#

您可以定义主题的材料部件一样
内部MaterialApp小部件

theme: ThemeData(     
      elevatedButtonTheme: ElevatedButtonThemeData(
          style: TextButton.styleFrom(
              backgroundColor: Colors.black,
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              side: BorderSide(color: Colors.red, width: 2),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              textStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  wordSpacing: 2,
                  letterSpacing: 2))),

使用

ElevatedButton(
          onPressed: () => print('okay'),
          child: Text('Elevated Button'),
        ),
cwdobuhd

cwdobuhd5#

要将通用颜色应用到按钮和其他类似的小部件上,请将ThemeDataprimarySwatch传递到根目录的MaterialApp的theme参数。因此材质应用程序将使用不同色调的原色。

static const Color colorPrimary = Color(0xffFFFFFF);

ThemeData(
    primaryColor: colorPrimary,
    primarySwatch: MaterialColor(
      colorPrimary.value, 
      const <int, Color>{
        50: colorPrimary,
        100: colorPrimary,
        200: colorPrimary,
        300: colorPrimary,
        400: colorPrimary,
        500: colorPrimary,
        600: colorPrimary,
        700: colorPrimary,
        800: colorPrimary,
        900: colorPrimary,
      },
    ),
  );

相关问题