#flutter
#flutter
Вопрос:
Как и в Android, для макета мы применяем центр по вертикали так же, как я пытаюсь в flutter сделать центр вертикальным. таким образом, весь вид виджета будет перемещен в центр по вертикали. Как добиться этого в 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 makensure 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 amp;amp;
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 amp;amp;
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 amp;amp;
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 amp;amp;
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 amp;amp;
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 amp;amp;
!otp2.isEmpty amp;amp;
!otp3.isEmpty amp;amp;
!otp4.isEmpty amp;amp;
!otp5.isEmpty amp;amp;
!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,
),
),
],
),
])),
)),
);
}
}
В приведенном выше коде,
Мне нужно исключить размер 70, потому что вид должен быть вертикальным по центру, а кнопка должна быть выровнена по низу, поэтому размер 120 также необходимо исключить. как исправить эти две проблемы в приведенном выше коде.
Я новичок в flutter, я пробовал приведенный выше код с базовыми знаниями, любая помощь в улучшении приведенного выше кода приветствуется.
Любая помощь приветствуется!
Комментарии:
1. Можете ли вы добавить изображение, показывающее, чего вы хотите достичь.?
2. Изображение конфиденциально, не может быть добавлено
3. Если ни один из ответов не работает для вас. затем вы можете загрузить аналогичное изображение из Интернета и сделать свой вопрос более понятным.
4. Я опубликовал полный код. Только что внес некоторые изменения в svg. И прокомментировал несколько строк. Таким образом, вы можете изменить их обратно.
Ответ №1:
Вместо того, чтобы использовать a Row() , вы должны были использовать a Stack() , with alignment: AlignmentDirectional.center .
Попробуйте это….
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 makensure 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; !otp2.isEmpty amp;amp; !otp3.isEmpty amp;amp; !otp4.isEmpty amp;amp; !otp5.isEmpty amp;amp; !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,
),
),
],
),
])),
)),
);
}
}
Вы можете воспользоваться помощью из этой статьи и создать любой макет, который вы хотите создать.
Ответ №2:
Это довольно просто: используйте столбец, а внутри столбца установите свойство поперечной оси в центр
что-то вроде этого в родительском виджете
Column(
crossAxisAlignment:CrossAxisAlignment.center,
children:[
//your rest of child widget goes here
]
)
Комментарии:
1. @переопределить сборку виджета (контекст BuildContext) { вернуть MaterialApp( home: Scaffold( resizeToAvoidBottomInset: false, // чтобы избежать плавающего контейнера на клавиатуре, используйте этот backgroundColor: Colors.white, body: SingleChildScrollView(дочерний элемент: SafeArea( дочерний элемент: столбец( crossAxisAlignment: CrossAxisAlignment.center, дочерние элементы: [ Заполнение (
2. добавлено выравнивание перекрестной оси: CrossAxisAlignment.center, не работает
Ответ №3:
Вам нужно использовать mainAxisAlignment: MainAxisAlignment.center, по умолчанию MainAxisAlignment.start .
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Center"),
],
),
Обновить
Отделяя MaterialApp, лучшим решением будет использование 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 makensure 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 amp;amp;
!otp2.isEmpty amp;amp;
!otp3.isEmpty amp;amp;
!otp4.isEmpty amp;amp;
!otp5.isEmpty amp;amp;
!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(),
]),
))
]);
}
}
Комментарии:
1. mainAxisAlignment: MainAxisAlignment.center, не работает
2. что является родительским элементом виджета? и есть ли какие-либо виджеты выравнивания, которые вы используете?
3. @переопределить сборку виджета(контекст BuildContext) { вернуть MaterialApp( home: Scaffold( resizeToAvoidBottomInset: false, // чтобы избежать плавающего контейнера на клавиатуре, используйте этот backgroundColor: Colors.white, body: SingleChildScrollView(дочерний элемент: SafeArea(дочерний элемент: столбец (дочерние элементы: [
4. Проблема возникает из-за
SingleChildScrollView5. размещенный весь код, обращенный к кнопке с двумя проблемами, должен быть выровнен по низу, необходимо исключить поле размера для кнопки, которое равно 120, а поле размера 70 также необходимо исключить, поскольку вид должен быть выровнен по центру