flutter开发小技巧

ps：记录flutter开发过程中一些小知识点

1.去掉点击事件的水波纹效果

如果想全局去掉该效果可以在main.dart里设置MaterialApp的 theme属性，如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Colors.white,
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent),
      home: bottomTabbar(),
    );
  }
}

highlightColor是设置点击后的颜色 默认是透明白色,而splashColor是水波纹的颜色 ，所以只要设置两种颜色一致为透明色即可

2.关于button的最小宽度（button大小紧跟子text的文字大小）

想做的效果是两个按钮切换，效果如图：

预期效果图.png

代码如下

Widget HomeCenterButtonWidget() {
    return Container(
      // padding: EdgeInsets.fromLTRB(15, 20, 0, 0),
      child: Row(
        children: [
          MaterialButton(
            // padding: EdgeInsets.only(right: 15),
            color: Colors.blue,
            onPressed: () {
              setState(() {
                widget.selectIndex = 0;
              });
            },
            child: Text(
              '实时单',
              style: TextStyle(
                color: Color.fromARGB(255, 51, 51, 51),
                fontSize: widget.selectIndex == 0 ? 18 : 15,
                fontFamily: 'PingFang-SC-Medium',
              ),
            ),
          ),
          FlatButton(
            color: Colors.blue,
            onPressed: () {
              setState(() {
                widget.selectIndex = 1;
              });
            },
            child: Text(
              '预约单',
              style: TextStyle(
                color: Color.fromARGB(255, 51, 51, 51),
                fontSize: widget.selectIndex == 1 ? 18 : 15,
                fontFamily: 'PingFang-SC-Medium',
              ),
            ),
          ),
 ],
      ),
    );
  }

但是效果并不理想，如下：

实际效果.png
我们需要的是button大小紧跟子text的文字大小

思路：是不是没有设置buttonTheme？

buttonTheme: ButtonThemeData(minWidth: 0, height: 0.0),

设置后发现button高度跟text高度一致,但宽度还是不对。（PS:此时我完全思考错方向了，一直考虑的是button的宽度是默认最低宽度值88）

解决方法：

后来发现button有子视图的时候，是有默认padding的，只需要手动设置下padding即可！😅