CODEWITHSUNDEEP
flutterflutter-layout
aeviou
aeviou

Reputation: 219

Flutter - How to underline each character in a text field?

How does one underline for each character in Flutter? I want to do phone verification and want each line to hold a single character but don't know how to do it (or if it's even possible) with a single TextForm.

Example: enter image description here

Upvotes: 0

Views: 968

Answers (2)

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

Use this :

 TextField(
                          obscureText: true,
                          keyboardType: TextInputType.text,
                          textAlign: TextAlign.center,
                          maxLength: 1,
                        ),

Must Add this In your ThemeData:

ThemeData(
         primarySwatch: Colors.red,
         accentColor: Colors.amber,

For Your Case You Can Dow that

Row(
children<>[

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),
]
)

For Layout Fixing use Exapand()

Upvotes: 1

aeviou
aeviou

Reputation: 219

This is a rephrased version of this question: Connecting multiple text fields to act like a single field in Flutter

Flutter package that handles this: https://pub.dev/packages/pin_code_fields

Upvotes: 1

Related Questions