dart - 如何在 Flutter 中围绕 FlatButton 复制 OutlineInputBorder
问题描述
我有几个字段从用户那里获取信息。其中一些是 TextFormFields,另一些是按钮(FlatButton 和 PopupMenuButton)。我想复制出现在 TextFormFields 周围的 OutlineInputBorder 提示样式,以显示在我的按钮字段周围。我已经非常接近了:
并在字段内提供信息
如何使“选择生日”的帮助文本像“名字”一样进入边框内?以下是相关代码:
Padding(
padding: EdgeInsets.all(paddingStandard),
child: TextFormField(
textCapitalization: TextCapitalization.words,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(Icons.person, color: colorMuted),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: colorPrimary)),
border: OutlineInputBorder(
borderSide: BorderSide(color: colorMuted)),
labelText: "First Name",
labelStyle: textMuted,
),
controller: nameController,
autofocus: false,
),
),
Padding(
padding: EdgeInsets.all(paddingStandard),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
)
解决方案
如果生日!= null,您可以用堆栈包装生日按钮并在边框顶部显示一些文本。
这是一个代码演示,(将其替换为生日按钮容器):
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(children: <Widget>[
Padding(
padding:
EdgeInsets.only(right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
Align(
alignment: Alignment.topLeft,
child: Transform.translate(
offset: Offset(50, -12),
child: birthday != null
? Container(
padding: EdgeInsets.symmetric(horizontal: 3),
color: Theme.of(context).canvasColor,
child: Text("birthday"),
)
: Container(),
),
),
],
),
推荐阅读
- javascript - Firebase v9.01 - 未处理的拒绝(TypeError):productDoc.ref.collection 不是函数
- postgresql - Apache Ignite 自动从 3rd 方数据库加载缓存(带有 sql 模式的 postgresql)
- jsplumb - jsPlumb 流程图连接器布局方向更改为 5 倍
- jquery - 为什么我无法获得 select2 下拉列表的先前值
- flutter - 错误:LateInitializationError:本地“命令”尚未初始化。扑
- python - Matplotlib scatterplot animation
- sql - 如何在 Oracle SQL 19 中获得每月的第 5 个工作日?
- python-3.x - 获取 Pandas Dataframe 中具有 Null/Blank 值的行号和列名的索引
- javascript - ReferenceError: require 没有在 ES 模块范围内定义,你可以使用 import 代替 gulp sass
- r - 有没有办法在 R 中过滤 50% 的响应率?