如何使用Flutter小部件实现虚线文本字段

Question

我很困惑如何实现虚线文本字段，例如使用flutter小部件附加的图像。我搜索了textfield类，但无法提出解决方案。任何帮助将不胜感激

Answer 1

我有相同的布局要求。 所以我用了

它的位长，我猜是乱七八糟的（因为您需要用填充进行播放），但是可以肯定工作。

输出

代码

Container(
        padding: EdgeInsets.only(left: 25.0, right: 25.0),
        width: MediaQuery.of(context).size.width,
        height: 45.0,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
          ],
        ),
      )