Flutter ElevatedButton 不继承 ButtonThemeData 形状

Question

我已经为我的顶级 ThemeData 提供了一个具有特定形状的 ButtonThemeData。不管怎样，ElevatedButton 具有默认形状。

我的顶级主题是这样定义的...

return ScopedModel<MyModel>(
      model: _model,
      child: MaterialApp(
        title: "MyApp",
        theme: ThemeData(
          fontFamily: 'Din',
          colorScheme: MyLightTheme.colorScheme,
          inputDecorationTheme: MyLightTheme.inputDecorationTheme,
          accentColor: MyColors.secondary,
          errorColor: MyLightTheme.colorScheme.error,
          primarySwatch: MyColors.primarySwatch,
          buttonTheme: ButtonThemeData(
            shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(18.0),
             side: BorderSide(color: Colors.red)
           )
         )
        ),
        debugShowCheckedModeBanner: false,
        home: EntryScreen(),
        routes: <String, WidgetBuilder>{
          
        }
      )
    );

我定义了一个简单的 FlatButton 如下...

ElevatedButton(
            onPressed: () {
              /*...*/
            },
            child: Text(
              "Flat Button",
            ),
          )

当 buttonColor 不是白色时，FlatButton 只是绘制白色。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用 elevatedButtonTheme 并设置 ButtonStyle 的 shape
代码片段

ThemeData(
          fontFamily: 'Din',
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ButtonStyle(
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.red))))))

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      theme: ThemeData(
          fontFamily: 'Din',
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ButtonStyle(
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.red)))))),
      debugShowCheckedModeBanner: false,
      home: EntryScreen(),
    );
  }
}

class EntryScreen extends StatefulWidget {
  EntryScreen({Key key}) : super(key: key);

  @override
  _EntryScreenState createState() => _EntryScreenState();
}

class _EntryScreenState extends State<EntryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                /*...*/
              },
              child: Text(
                "Flat Button",
              ),
            )
          ],
        ),
      ),
    );
  }
}