dart - 如何在 Flutter 中围绕 FlatButton 复制 OutlineInputBorder

Question

我有几个字段从用户那里获取信息。其中一些是 TextFormFields，另一些是按钮(FlatButton 和 PopupMenuButton)。我想复制 TextFormFields 周围的 OutlineInputBorder 提示样式，以显示在我的按钮字段周围。我已经非常接近了:

empty fields

在字段中包含信息

filled fields

如何让“选择生日”的帮助文本像“名字”一样进入边框？相关代码如下:

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,
                            )
                          ],
                        ))),
              )

Answer 1

如果 birthday != 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(),
                  ),
                ),
              ],
            ),