Flutter ElevatedButton 自定义样式答案

【问题标题】：Flutter ElevatedButton Custom styleFlutter ElevatedButton 自定义样式
【发布时间】：2021-10-26 06:33:07
【问题描述】：

我想制作一个像下面这样的高架按钮。我尝试了一些像边界这样的东西，但没有成功。任何人都可以帮助我振作起来。

我已经尝试按照代码进行操作。

ElevatedButton(onPressed: () {},
   child: Text(AppLocalizations.of(context).visualization_title)
)

在主题数据中

elevatedButtonTheme: ElevatedButtonThemeData(
    style: TextButton.styleFrom(elevation: 6,
              minimumSize: Size(double.infinity, 46),
              backgroundColor: Color(0xFF7F240F),
              padding: EdgeInsets.symmetric(horizontal: 18, vertical: 18),
              side: BorderSide(color: Color(0xffC09E63), width: 3),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6)),
              textStyle: TextStyle(
                  fontFamily: 'JMHTypewriter',
                  color: Colors.white,
                  fontSize: 20,
                  wordSpacing: 2,
                  letterSpacing: 2)))

【问题讨论】：

标签： flutter

【解决方案1】：

试试下面的代码希望对你有帮助，ElevatedButton小部件参考官方文档here

Container(
      color: Color(0xFF7F240F),
      height: 50,
      width: 200,
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: ElevatedButton(
          onPressed: () {
            // Your Onpressed function here
          },
          child: Text("Submit"),
          style: ElevatedButton.styleFrom(
            primary:Color(0xFF7F240F),
            side: BorderSide(
              width: 4,
              color: Color(0xffC09E63),
            ),
          ),
        ),
      ),
    ),

您的结果屏幕->

【讨论】：

【解决方案2】：

试试这个。希望对您有所帮助。

                 Container(
                    color: Colors.deepOrange,
                    height: 100,
                    width: 200,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ElevatedButton(
                        onPressed: () {  },
                        child: Text(""),
                        style: ElevatedButton.styleFrom(
                            primary: Colors.deepOrange,
                            side: BorderSide(width:8, color: Colors.yellow)
                        ),
                      ),
                    ),
                  ),

【讨论】：

【解决方案3】：

用Container包裹你的Elevated按钮

Container(
          color: Color(0xFF7F240F),
          width: double.infinity,
          height: 46,
          padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3),
          child: ElevatedButton(
            child: Text("test"),
            onPressed: null,
            style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                        side: BorderSide( width: 3, color: Color(0xffC09E63))))),
          ),
        )

输出：

【讨论】：