how to make layout center vertical in flutter like in android

Like in android for layout we apply center vertical same way i m trying in flutter to make center vertical. so that entire widget view will be moved to center vertical. How to achieve this in flutter.

I have tried same using sizebox. How to make layout center vertical in flutter like in android.

Code as below:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:login_app/sso.dart';

import 'package:flutter_svg/flutter_svg.dart';

class Otp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return OtpPage();
  }
}

class OtpPage extends State<Otp> {
  String assetNameArrow = 'images/ic_back.svg';
  String assertOtp = 'images/otp_sms.svg';
  int backspaceClick = 0;
  String otpError = "";
  bool isHideOTP = true;
  bool isTextFiledFocus = false;

  String otp1 = "";
  String otp2 = "";
  String otp3 = "";
  String otp4 = "";
  String otp5 = "";
  String otp6 = "";

  FocusNode focusNodeOtp1 = FocusNode();
  FocusNode focusNodeOtp2 = FocusNode();
  FocusNode focusNodeOtp3 = FocusNode();
  FocusNode focusNodeOtp4 = FocusNode();
  FocusNode focusNodeOtp5 = FocusNode();
  FocusNode focusNodeOtp6 = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          resizeToAvoidBottomInset:
              false, //to avoid floating container on keyboard, use this
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: SafeArea(
                child: Column(children: [
              Padding(
                padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
                child: Align(
                  alignment: Alignment.topLeft,
                  child: SvgPicture.asset(
                    assetNameArrow,
                    width: 8,
                    height: 19,
                    alignment: Alignment.topLeft,
                  ),
                ),
              ),
              SizedBox(
                width: 70.0,
                height: 70.0,
              ),
              Container(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: SvgPicture.asset(
                          assertOtp,
                          width: 61,
                          height: 61,
                          alignment: Alignment.topLeft,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 16.0, right: 16.0),
                        child: Container(
                          child: Text('We need to make\nsure its you',
                              maxLines: 2,
                              style: TextStyle(
                                fontFamily: 'Circular_Std_Bold',
                                fontSize: 24.0,
                                color: Color(0xFF2E2E2E),
                              )),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.only(left: 90.0, right: 16.0, top: 20.0),
                child: Text(
                    'Please enter the OTP (One-Time Password) sent to your registered mobile number (ending in 6380). Do not share your OTP with anyone else.',
                    style: TextStyle(
                      fontFamily: 'Soleil_Regular',
                      fontSize: 14.0,
                      fontStyle: FontStyle.normal,
                      color: Color(0xFF2E2E2E),
                    )),
              ),
              SizedBox(
                width: 60.0,
                height: 60.0,
              ),
              Container(
                // first
                padding: EdgeInsets.all(16.0),
                child: Row(children: [
                  Container(
                    margin: EdgeInsets.only(left: 16, right: 5),
                    //first
                    width: 46.0,
                    height: 48.0,
                    child: TextField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      textAlign: TextAlign.center,
                      // obscureText: isHideOTP,
                      enableSuggestions: false,
                      autocorrect: false,
                      autofocus: true,
                      focusNode: focusNodeOtp1,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide:
                              BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide:
                              BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp1 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp2.requestFocus();
                        }
                      },
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 5, right: 5),
                    // secound
                    width: 46.0,
                    height: 48.0,
                    child: RawKeyboardListener(
                        autofocus: true,
                        focusNode: FocusNode(),
                        onKey: (event) {
                          if (event.logicalKey ==
                                  LogicalKeyboardKey.backspace &&
                              otp2 == "") {
                            backspaceClick = backspaceClick + 1;
                            if (backspaceClick >= 2) {
                              focusNodeOtp1.requestFocus();
                            }
                          }
                        },
                        child: TextField(
                          textAlign: TextAlign.center,
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(1),
                          ],
                          focusNode: focusNodeOtp2,
                          // obscureText: isHideOTP,
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              otp2 = value;
                              otpError = "";
                            });
                            if (value.isNotEmpty) {
                              print('value is not null');
                              focusNodeOtp3.requestFocus();
                            }
                          },
                        )),
                  ),
                  Container(
                    // Third
                    margin: EdgeInsets.only(left: 5, right: 5),
                    width: 46.0,
                    height: 48.0,
                    child: RawKeyboardListener(
                        autofocus: true,
                        focusNode: FocusNode(),
                        onKey: (event) {
                          if (event.logicalKey ==
                                  LogicalKeyboardKey.backspace &&
                              otp3 == "") {
                            backspaceClick = backspaceClick + 1;
                            if (backspaceClick >= 2) {
                              focusNodeOtp2.requestFocus();
                            }
                          }
                        },
                        child: TextField(
                          textAlign: TextAlign.center,
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(1),
                          ],
                          focusNode: focusNodeOtp3,
                          //obscureText: isHideOTP,
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              otp3 = value;
                              otpError = "";
                            });
                            if (value.isNotEmpty) {
                              print('value is not null');
                              focusNodeOtp4.requestFocus();
                            }
                          },
                        )),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 5, right: 5),
                    // Fourth
                    width: 46.0,
                    height: 48.0,
                    child: RawKeyboardListener(
                        autofocus: true,
                        focusNode: FocusNode(),
                        onKey: (event) {
                          if (event.logicalKey ==
                                  LogicalKeyboardKey.backspace &&
                              otp4 == "") {
                            backspaceClick = backspaceClick + 1;
                            if (backspaceClick >= 2) {
                              focusNodeOtp3.requestFocus();
                            }
                          }
                        },
                        child: TextField(
                          textAlign: TextAlign.center,
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(1),
                          ],
                          focusNode: focusNodeOtp4,
                          //obscureText: isHideOTP,
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              otp4 = value;
                              otpError = "";
                            });
                            if (value.isNotEmpty) {
                              print('value is not null');
                              focusNodeOtp5.requestFocus();
                            }
                          },
                        )),
                  ),
                  Container(
                    // Fifth
                    margin: EdgeInsets.only(left: 5, right: 5),
                    width: 46.0,
                    height: 48.0,
                    child: RawKeyboardListener(
                        autofocus: true,
                        focusNode: FocusNode(),
                        onKey: (event) {
                          if (event.logicalKey ==
                                  LogicalKeyboardKey.backspace &&
                              otp5 == "") {
                            backspaceClick = backspaceClick + 1;
                            if (backspaceClick >= 2) {
                              focusNodeOtp4.requestFocus();
                            }
                          }
                        },
                        child: TextField(
                          textAlign: TextAlign.center,
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(1),
                          ],
                          focusNode: focusNodeOtp5,
                          // obscureText: isHideOTP,
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              otp5 = value;
                              otpError = "";
                            });
                            if (value.isNotEmpty) {
                              print('value is not null');
                              focusNodeOtp6.requestFocus();
                            }
                          },
                        )),
                  ),
                  Container(
                    // Sixth
                    margin: EdgeInsets.only(left: 5, right: 5),
                    width: 46.0,
                    height: 48.0,
                    child: RawKeyboardListener(
                        autofocus: true,
                        focusNode: FocusNode(),
                        onKey: (event) {
                          if (event.logicalKey ==
                                  LogicalKeyboardKey.backspace &&
                              otp6 == "") {
                            backspaceClick = backspaceClick + 1;
                            if (backspaceClick >= 2) {
                              focusNodeOtp5.requestFocus();
                            }
                          }
                        },
                        child: TextField(
                          textAlign: TextAlign.center,
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(1),
                          ],
                          focusNode: focusNodeOtp6,
                          //obscureText: isHideOTP,
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(
                                  color: Color(0xFF0072D8), width: 1.0),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              otp6 = value;
                              otpError = "";
                            });
                            if (value.isNotEmpty) {
                              print('value is not null');
                              focusNodeOtp6.unfocus();
                            }
                            if (!otp1.isEmpty &&
                                !otp2.isEmpty &&
                                !otp3.isEmpty &&
                                !otp4.isEmpty &&
                                !otp5.isEmpty &&
                                !otp6.isEmpty) {
                              isTextFiledFocus = true;
                            } else {
                              isTextFiledFocus = false;
                            }
                          },
                        )),
                  ),
                  /*IconButton(
                    onPressed: () {
                      setState(() {
                        isHideOTP = !isHideOTP;
                      });
                    },
                    icon:
                        Icon(isHideOTP ? Icons.visibility : Icons.visibility_off),
                  ),*/
                ]),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 32.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      child: Image.asset(
                        'images/Warning.png',
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Container(
                        child: Text(
                          'OTP is valid for 5 minutes only.',
                          style: TextStyle(
                            color: Color(0xFF4B4B4B),
                            fontSize: 12,
                            fontFamily: 'Soleil_Regular',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                child: Padding(
                  padding: const EdgeInsets.only(top: 22),
                  child: GestureDetector(
                      onTap: () {},
                      child: Container(
                        child: Text(
                          'Did not get any OTP?',
                          style: TextStyle(
                            color: Color(0xFF0072D8),
                            fontSize: 16,
                            fontFamily: 'Circular_Std_Bold',
                          ),
                        ),
                      )),
                ),
              ),
              SizedBox(
                width: 125,
                height: 125,
              ),
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    decoration: new BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: new BorderRadius.circular(10.0),
                    ),
                    margin:
                        EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
                    width: double.infinity,
                    height: 50.0,
                    child: FlatButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Text('Next ', style: TextStyle(fontSize: 16)),
                      onPressed: () {
                        FocusScopeNode currentFocus = FocusScope.of(context);
                        if (!currentFocus.hasPrimaryFocus) {
                          currentFocus.unfocus();
                        }
                        Navigator.push(
                          context,
                          new MaterialPageRoute(
                              builder: (context) => new sso()),
                        );
                      },
                      color: isTextFiledFocus
                          ? Color(0xFF0072D8)
                          : Color(0xFFC2C2C1),
                      textColor: Colors.white,
                    ),
                  ),
                ],
              ),
            ])),
          )),
    );
  }
}

In above code,

I need to eliminate sizebox 70 because view should be center vertical & button should be bottom aligned so size box 120 also need to eliminated. how to fix this two problem in above code.

I m new to flutter i have tried above code with basic knowledge any help improving above code is appreciated.

Any help is appreciated!


Instead of using a Row(), you should have used a Stack(), with alignment: AlignmentDirectional.center.

Try This....

enter image description here

class Otp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return OtpPage();
  }
}

class OtpPage extends State<Otp> {
  String assetNameArrow = 'images/ic_back.svg';
  String assertOtp = 'images/otp_sms.svg';
  int backspaceClick = 0;
  String otpError = "";
  bool isHideOTP = true;
  bool isTextFiledFocus = false;

  String otp1 = "";
  String otp2 = "";
  String otp3 = "";
  String otp4 = "";
  String otp5 = "";
  String otp6 = "";

  FocusNode focusNodeOtp1 = FocusNode();
  FocusNode focusNodeOtp2 = FocusNode();
  FocusNode focusNodeOtp3 = FocusNode();
  FocusNode focusNodeOtp4 = FocusNode();
  FocusNode focusNodeOtp5 = FocusNode();
  FocusNode focusNodeOtp6 = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
      resizeToAvoidBottomInset: false, //to avoid floating container on keyboard, use this
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: SafeArea(
            child: Column(children: [
          Padding(
            padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
            child: Align(
              alignment: Alignment.topLeft,
              child: SvgPicture.asset(
                assetNameArrow,
                width: 8,
                height: 19,
                alignment: Alignment.topLeft,
              ),
            ),
          ),
          SizedBox(
            width: 70.0,
            height: 70.0,
          ),
          Container(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: SvgPicture.asset(
                      assertOtp,
                      width: 61,
                      height: 61,
                      alignment: Alignment.topLeft,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16.0, right: 16.0),
                    child: Container(
                      child: Text('We need to make\nsure its you',
                          maxLines: 2,
                          style: TextStyle(
                            fontFamily: 'Circular_Std_Bold',
                            fontSize: 24.0,
                            color: Color(0xFF2E2E2E),
                          )),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 90.0, right: 16.0, top: 20.0),
            child: Text('Please enter the OTP (One-Time Password) sent to your registered mobile number (ending in 6380). Do not share your OTP with anyone else.',
                style: TextStyle(
                  fontFamily: 'Soleil_Regular',
                  fontSize: 14.0,
                  fontStyle: FontStyle.normal,
                  color: Color(0xFF2E2E2E),
                )),
          ),
          SizedBox(
            width: 60.0,
            height: 60.0,
          ),
          Container(
            // first
            padding: EdgeInsets.all(16.0),
            child: Row(children: [
              Container(
                margin: EdgeInsets.only(left: 16, right: 5),
                //first
                width: 46.0,
                height: 48.0,
                child: TextField(
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(1),
                  ],
                  textAlign: TextAlign.center,
                  // obscureText: isHideOTP,
                  enableSuggestions: false,
                  autocorrect: false,
                  autofocus: true,
                  focusNode: focusNodeOtp1,
                  keyboardType: TextInputType.number,
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                  decoration: InputDecoration(
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.0),
                      borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.0),
                      borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                    ),
                  ),
                  onChanged: (value) {
                    setState(() {
                      otp1 = value;
                      otpError = "";
                    });
                    if (value.isNotEmpty) {
                      print('value is not null');
                      focusNodeOtp2.requestFocus();
                    }
                  },
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 5, right: 5),
                // secound
                width: 46.0,
                height: 48.0,
                child: RawKeyboardListener(
                    autofocus: true,
                    focusNode: FocusNode(),
                    onKey: (event) {
                      if (event.logicalKey == LogicalKeyboardKey.backspace && otp2 == "") {
                        backspaceClick = backspaceClick + 1;
                        if (backspaceClick >= 2) {
                          focusNodeOtp1.requestFocus();
                        }
                      }
                    },
                    child: TextField(
                      textAlign: TextAlign.center,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: focusNodeOtp2,
                      // obscureText: isHideOTP,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp2 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp3.requestFocus();
                        }
                      },
                    )),
              ),
              Container(
                // Third
                margin: EdgeInsets.only(left: 5, right: 5),
                width: 46.0,
                height: 48.0,
                child: RawKeyboardListener(
                    autofocus: true,
                    focusNode: FocusNode(),
                    onKey: (event) {
                      if (event.logicalKey == LogicalKeyboardKey.backspace && otp3 == "") {
                        backspaceClick = backspaceClick + 1;
                        if (backspaceClick >= 2) {
                          focusNodeOtp2.requestFocus();
                        }
                      }
                    },
                    child: TextField(
                      textAlign: TextAlign.center,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: focusNodeOtp3,
                      //obscureText: isHideOTP,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp3 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp4.requestFocus();
                        }
                      },
                    )),
              ),
              Container(
                margin: EdgeInsets.only(left: 5, right: 5),
                // Fourth
                width: 46.0,
                height: 48.0,
                child: RawKeyboardListener(
                    autofocus: true,
                    focusNode: FocusNode(),
                    onKey: (event) {
                      if (event.logicalKey == LogicalKeyboardKey.backspace && otp4 == "") {
                        backspaceClick = backspaceClick + 1;
                        if (backspaceClick >= 2) {
                          focusNodeOtp3.requestFocus();
                        }
                      }
                    },
                    child: TextField(
                      textAlign: TextAlign.center,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: focusNodeOtp4,
                      //obscureText: isHideOTP,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp4 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp5.requestFocus();
                        }
                      },
                    )),
              ),
              Container(
                // Fifth
                margin: EdgeInsets.only(left: 5, right: 5),
                width: 46.0,
                height: 48.0,
                child: RawKeyboardListener(
                    autofocus: true,
                    focusNode: FocusNode(),
                    onKey: (event) {
                      if (event.logicalKey == LogicalKeyboardKey.backspace && otp5 == "") {
                        backspaceClick = backspaceClick + 1;
                        if (backspaceClick >= 2) {
                          focusNodeOtp4.requestFocus();
                        }
                      }
                    },
                    child: TextField(
                      textAlign: TextAlign.center,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: focusNodeOtp5,
                      // obscureText: isHideOTP,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp5 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp6.requestFocus();
                        }
                      },
                    )),
              ),
              Container(
                // Sixth
                margin: EdgeInsets.only(left: 5, right: 5),
                width: 46.0,
                height: 48.0,
                child: RawKeyboardListener(
                    autofocus: true,
                    focusNode: FocusNode(),
                    onKey: (event) {
                      if (event.logicalKey == LogicalKeyboardKey.backspace && otp6 == "") {
                        backspaceClick = backspaceClick + 1;
                        if (backspaceClick >= 2) {
                          focusNodeOtp5.requestFocus();
                        }
                      }
                    },
                    child: TextField(
                      textAlign: TextAlign.center,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: focusNodeOtp6,
                      //obscureText: isHideOTP,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
                        ),
                      ),
                      onChanged: (value) {
                        setState(() {
                          otp6 = value;
                          otpError = "";
                        });
                        if (value.isNotEmpty) {
                          print('value is not null');
                          focusNodeOtp6.unfocus();
                        }
                        if (!otp1.isEmpty && !otp2.isEmpty && !otp3.isEmpty && !otp4.isEmpty && !otp5.isEmpty && !otp6.isEmpty) {
                          isTextFiledFocus = true;
                        } else {
                          isTextFiledFocus = false;
                        }
                      },
                    )),
              ),
              /*IconButton(
                onPressed: () {
                  setState(() {
                    isHideOTP = !isHideOTP;
                  });
                },
                icon:
                    Icon(isHideOTP ? Icons.visibility : Icons.visibility_off),
              ),*/
            ]),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 32.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  child: Image.asset(
                    'images/Warning.png',
                  ),
                ),
              ],
            ),
          ),
          Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: Container(
                      child: Text(
                        'OTP is valid for 5 minutes only.',
                        style: TextStyle(
                          color: Color(0xFF4B4B4B),
                          fontSize: 12,
                          fontFamily: 'Soleil_Regular',
                        ),
                      ),
                    ),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 22),
                      child: GestureDetector(
                          onTap: () {},
                          child: Container(
                            child: Text(
                              'Did not get any OTP?',
                              style: TextStyle(
                                color: Color(0xFF0072D8),
                                fontSize: 16,
                                fontFamily: 'Circular_Std_Bold',
                              ),
                            ),
                          )),
                    ),
                  ),
                ],
              ),
              Container(
                child: Image.asset(
                  'images/Warning.png',
                ),
              ),
            ],
          ),
          SizedBox(
            width: 125,
            height: 125,
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                decoration: new BoxDecoration(
                  color: Colors.blueAccent,
                  borderRadius: new BorderRadius.circular(10.0),
                ),
                margin: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
                width: double.infinity,
                height: 50.0,
                child: FlatButton(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  child: Text('Next ', style: TextStyle(fontSize: 16)),
                  onPressed: () {
                    FocusScopeNode currentFocus = FocusScope.of(context);
                    if (!currentFocus.hasPrimaryFocus) {
                      currentFocus.unfocus();
                    }
                    // Navigator.push(
                    //   context,
                    //   new MaterialPageRoute(
                    //       builder: (context) => new sso()),
                    // );
                  },
                  color: isTextFiledFocus ? Color(0xFF0072D8) : Color(0xFFC2C2C1),
                  textColor: Colors.white,
                ),
              ),
            ],
          ),
        ])),
      )),
    );
  }
}

You can take help from this Article and build whatever layout you want to build.

Flutter Layout Cheatsheat