How to design the below ui as shown screen shot below using flutter-CodePudding

enter image description here enter image description here

I m new to flutter, can any one help me knowing how to achieve screen design as shown in screen shot using flutter.

Below is the code what i have achieved so far: Container( padding: EdgeInsets.all(16.0), child: Row( children: [ Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, fontWeight: FontWeight.bold, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), Container( width: 50.0, height: 48.0, child: Padding( padding: const EdgeInsets.only(left: 5, right: 5), child: TextField( style: TextStyle( fontSize: 10.0, color: Colors.black, ), autocorrect: true, decoration: InputDecoration( hintStyle: TextStyle(color: Colors.grey), fillColor: Colors.white70, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.greenAccent), ), ), )), ), ], ), ),

CodePudding user response：

https://github.com/ChiragKothiya1996/Flutter/blob/main/Otp.dart

Use this file for show same as your otp view