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即可!😅

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容