简体   繁体   中英

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: 在此处输入图像描述

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

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()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM