Flutter常见效果实现代码段整理

整理开发中常用到的 Flutter 代码段。感觉有帮助的话给个 支持。

Scaffold相关

点击页面空白处收回键盘

Widget build(BuildContext context) {
  return Scaffold(
    body: GestureDetector(
      onTap: () {
        // 收回键盘
        FocusScope.of(context).requestFocus(FocusNode());
      },
    child: Container(
      // 防止点击穿透
      color: Colors.transparent, 
      ),
    ),
  );
}

---

延时执行

// 延时1s执行返回
Future.delayed(Duration(seconds: 1), (){
  Navigator.of(context).pop();
});

---

Container相关

Container设置阴影

通过 BoxShadow 实现：

Container(
  decoration: BoxDecoration(
    // 阴影
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 1),
        blurRadius: 6,
        spreadRadius: 0,
        color: Color(0xFFEEEEEE),
      )
    ],
  ),
),

---

Container实现线性渐变

通过 LinearGradient 实现：

示例一：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment(0, 0.5),
      end: Alignment(0.5, 1),
      colors: [
        Color(0xFFFA9914),
        Color(0x00EEEEEE),
      ],
    ),
  ),
),

示例二：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    // 默认是从左往右的渐变
    gradient: LinearGradient(
      // 设置从上往下的渐变
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      // 渐变的色值数组
      colors: [
        Colors.red,
        Colors.blue,
      ],
      // 通过 stops 属性控制渐变色大小
      stops: [
        0.5,
        1,
      ],
    ),
  ),
),

---

Container设置圆角

通过 borderRadius 实现：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(4),
  ),
),

---

Container设置指定角为圆角

通过 BorderRadius.only 实现：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(5),
      bottomLeft: Radius.circular(5),
    ),
  ),
),

---

其他组件

进入页面后输入框获取焦点，键盘自动弹出

TextField(
    ...
    // 键盘自动弹出
    autofocus: true,
),

---

未完待续~