Flutter: How to underline in textformfield - flutter

Question

I'm trying to make it such that the user can enter his pin, and the pin is supposed to be 4 digits long. Now, the 4 digits that he can enter should be underscored in the text form field (even before he enters the pin), somewhat like ____.
So something like this:
Basically just a normal input field that has the 4 underscores. Is there anyway I can do this in textformfield?
Thanks in advance!

Answer 1

I have tried this on Android Kotlin by using TextWatcher, and I think this could be done by this link below:
Here's a reference!

Answer 2

Try This : https://api.flutter.dev/flutter/material/UnderlineInputBorder-class.html
Full Code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField Input Decoration Demo'),
),
body: new SafeArea(
top: true,
bottom: true,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(20),
child: Row(
children: [
Container(
width: 40,
child: TextFormField(
style: TextStyle(fontSize: 50),
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
),
),
),
)),
SizedBox(width: 5),
Container(
width: 40,
child: TextFormField(
style: TextStyle(fontSize: 50),
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
),
),
),
)),
SizedBox(width: 5),
Container(
width: 40,
child: TextFormField(
style: TextStyle(fontSize: 50),
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
),
),
),
)),
SizedBox(width: 5),
Container(
width: 40,
child: TextFormField(
style: TextStyle(fontSize: 50),
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 10.0,
),
),
),
)),
],
)),
new Divider(
color: Colors.black,
),
],
)));
}
}