flutter - How to achieve dashed textfield using flutter widgets

Question

I am stumped on how to achieve dashed text fields such as the images attached using flutter widgets. I have searched the textfield class but are unable to come up with a solution. Any assistance would be greatly appreciated

标签： flutterdarttextfieldflutter-layout

Answer 1

Well I had the same layout requirement. So I used this

its bit length and I guess messy (because you need to playout with padding) but sure does the work.

Output

Code

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