记录Flutter样式实现技巧

1、带数字的小圆点

预览

实现

Widget getWidget() {
  return ClipOval(
    child: Container(
      width: 24.0,
      height: 24.0,
      color: Color(0xFF33C298),
      child: Center (
        child: Text(
          '1',
          style: TextStyle(color: Colors.white, fontSize: 16.0),
        ),
      ),
    ),
  );
}

延伸

// 圆角矩形
ClipRRect(
  borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
  child: new Container(
    width: 90.0,
    height: 90.0,
    color: Colors.red,
  ),
)

// 设置矩形宽高比例，heightFactor 为高/宽比例
ClipRect(
  child: new Align(
    alignment: Alignment.topCenter,
    heightFactor: 1.0,
    child: new Container(color: Colors.yellow,height:90.0,width: 90.0,),
  ),
)

2、中空圆形，数字内容

预览

实现

Widget getWidget() {
  return new Container(
    width: 24.0,
    height: 24.0,
    decoration: BoxDecoration(
      border: Border.all(color: AppColors.GrayCC),
      borderRadius: BorderRadius.circular(12.0),
    ),
    child: Center(
      child: Text(
        '2',
        style: TextStyle(color: AppColors.GrayCC, fontSize: 16.0),
      ),
    ),
  );
}

3、TextField 默认字符、去掉下滑线、去掉底部字符数计数

Widget getWidget() {
  return TextField(
    decoration: InputDecoration(
      hintText: '请输入',  // 默认提示字符
      border: InputBorder.none, // 去掉下滑线
      counterText: '',  // 去掉底部的字符计数
    ),
  );
}

4、虚线边框

可以直接用这个开源库：https://pub.dev/packages/dotted_border

使用：

DottedBorder(
  color: Colors.black,
  gap: 3,
  strokeWidth: 1,
  child: FlutterLogo(size: 148),
)

5、给 Container 添加点击事件

Widget getWidget() {
  return GestureDetector(
    onTap: () {
      // 点击事件
    },
    child: Container(),
  );
}