flutter基础布局之 Input and selections 文本框的示例

本文链接：https://blog.youkuaiyun.com/computerclass/article/details/115272747

这篇博客介绍了如何在Flutter中创建一个带有样式的文本框，包括输入装饰、边框效果和前后缀图标。示例中还展示了日期选择器的使用，详细解释了代码实现过程，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Checkbox，Date & Time Pickers，Radio，Slider，Switch，TextField，在表单例子中有日期的用法

文本框的示例，包含有样式的设计

TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.grey),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.amber),
                ),
                contentPadding: EdgeInsets.all(8),
                hintText: 'Add  comment',
                prefixIcon: Container(
                  margin: EdgeInsets.all(20),
                  width: 48,
                  height: 48,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black45,
                        offset: Offset(0, 2),
                        blurRadius: 6,
                      )
                    ],
                  ),
                  child: CircleAvatar(
                    child: ClipOval(
                      child: Image(
                        image: AssetImage(widget.post.authorImageUrl),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                suffixIcon: Container(
                  margin: EdgeInsets.only(right: 4),
                  width: 70,
                  child: TextButton(
                    style: ButtonStyle(
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30)),
                      ),
                    ),
                    onPressed: () {
                      print('Post comment');
                    },
                    child: Icon(
                      Icons.send,
                      size: 25,
                      color: Colors.blue,
                    ),
                  ),
                ),
              ),
            ),

https://blog.youkuaiyun.com/yuzhiqiang_1993/article/details/88204031