how to make layout center vertical in flutter like in android - flutter

Question

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!

Answer 1

Instead of using a Row(), you should have used a Stack(), with alignment: AlignmentDirectional.center.
Try This....
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

Answer 2

That's pretty simple use column and inside column set the property of cross-axis
to center
something like this in the parent widget
Column(
crossAxisAlignment:CrossAxisAlignment.center,
children:[
//your rest of child widget goes here
]
)

Answer 3

You need to use
mainAxisAlignment: MainAxisAlignment.center, by default it is MainAxisAlignment.start.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Center"),
],
),
Update
Separating MaterialApp, Better solution will be using Stack
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 Scaffold(
resizeToAvoidBottomInset:
false, //to avoid floating container on keyboard, use this
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
child: Align(
alignment: Alignment.topLeft,
child: Container(
color: Colors.deepOrange,
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: Container(
color: Colors.deepPurple,
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(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(left: 16, right: 5),
//first
width: 46.0,
height: 48.0,
child: TextField(
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) {},
child: TextField(
textAlign: TextAlign.center,
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) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
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) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
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) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
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) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
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(
width: 24,
height: 24,
color: Colors.green,
// 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,
),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: 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();
}
},
color: isTextFiledFocus ? Color(0xFF0072D8) : Color(0xFFC2C2C1),
textColor: Colors.white,
),
),
);
}
}
class Landing extends StatefulWidget {
Landing({Key? key}) : super(key: key);
#override
_LandingState createState() => _LandingState();
}
class _LandingState extends State<Landing> with SingleTickerProviderStateMixin {
final List<Widget> pages = [
Home(),
// Signin(),
Center(
child: Text("SignIn"),
)
];
late TabController _tabbarcontroller;
int _currentIndexNavBar = 0;
#override
void initState() {
super.initState();
_tabbarcontroller = new TabController(length: pages.length, vsync: this);
}
#override
void dispose() {
_tabbarcontroller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: TabBarView(
controller: _tabbarcontroller,
children: pages,
),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
label: "A",
icon: Icon(
Icons.ac_unit,
),
),
BottomNavigationBarItem(
label: "B",
icon: Icon(
Icons.face,
),
),
],
currentIndex: _currentIndexNavBar,
onTap: (value) {
setState(() {
_tabbarcontroller.index = value;
_currentIndexNavBar = value;
});
},
));
}
}
class Parent extends StatefulWidget {
Parent({Key? key}) : super(key: key);
#override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
width: 100,
color: Colors.red,
),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Home(),
]),
))
]);
}
}