各种 Flutter Material 组件自定义样式

自定义 Switch 样式

Switch(
      // 未激活时 Switch 中间的那个圆圈的颜色
      inactiveThumbColor: Colors.redAccent,
      // 未激活时 Switch 背景色
      inactiveTrackColor: const Color(0xFFF8F9FC),
      // Switch 边框大小
      trackOutlineWidth: WidgetStateProperty.all(1),
      // Switch 边框颜色
      trackOutlineColor:
          WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
        // 如果处于激活状态，返回 null（默认颜色）
        if (states.contains(WidgetState.selected)) {
          return null;
        }

        // 如果处于未激活状态，返回指定颜色
        return Colors.transparent; // Use the default color.
      }),
      // value: true, // 激活
      value: false, // 未激活
      onChanged: (v) {
        //
      },
    )

自定义 FilledButton、OutlinedButton、ElevatedButton 的 padding

这里以 OutlinedButton 为例

OutlinedButton(
    style: OutlinedButton.styleFrom(
    /// 按钮内文字的颜色
    foregroundColor: const Color(0xFF333333),

    /// 按钮的边框
    side: const BorderSide(
        color: Color(0xFF333333),
        width: 1,
    ),
    
    // 自定义按钮圆角
    shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(12),
    ),

    // 按钮最小尺寸，如果不设置，则按钮会有一个默认的最小尺寸，无法设置较小的padding，所以这里重置为按钮最小尺寸为0
    minimumSize: Size.zero,

    // Padding
    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
    onPressed: () {},
    child: const Text("Click me"),
)

自定义 TextField 样式

TextField(
      // 开启密码输入的模式，内容输入后不会明文显示
      obscureText: true,
      decoration: InputDecoration(
        filled: true,
        fillColor: const Color(0xFFF8F9FC),
        hintText: "请输入当前密码",
        contentPadding: const EdgeInsets.symmetric(
          horizontal: 12,
          vertical: 10,
        ),
        border: OutlineInputBorder(
          // 设置输入框的圆角
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide.none,
        ),
        suffixIcon: GestureDetector(
          onTap: () {
            // TODO
          },

          // 设置右侧固定图标，使用 Padding 包裹后才会一直显示，如果不使用 Padding，则图标只会在输入框获得焦点切有值时才显示
          child: const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 16,
              vertical: 13,
            ),
            child: Icon(Icons.remove_red_eye_outlined),
          ),
        ),
      ),
      onChanged: (value) {
        // TODO
      },
)

参考链接：Flutter - How to view Prefix on TextFormField even not pressed

使用 TextField 实现 textarea 的效果

TextField(
  keyboardType: TextInputType.multiline,
  minLines: 3,
  // maxLines: null,
  maxLines: 10,
)

参考链接：Multi-line TextField in Flutter