CODEWITHSUNDEEP
flutterflutter-layout
Lakshmi n
Lakshmi n

Reputation: 29

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

I'm new to flutter, can anyone help me to know how to achieve screen design as shown in screenshot 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),
                          ),
                        ),
                      )),
                ),
              ],
            ),
          ),

Upvotes: 0

Views: 270

Answers (1)

Chirag Kothiya
Chirag Kothiya

Reputation: 1099

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

Use this file for show same as your otp view

Upvotes: 1

Related Questions