#flutter #dart
Вопрос:
У меня есть простая страница, на которой я использую SingleChildScrollView для прокрутки страницы, чтобы она не отображала переполнение и содержимое нижней части.
Но он показывает ошибку, также страница не прокручивается, из-за чего я не вижу нижних 2 кнопок
Мой код
SingleChildScrollView(
child: Container(
height: Height * 1,
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
child: Column(
children: [
SizedBox(
height: Status * 1,
),
SizedBox(
height: Height * 0.065,
),
Padding(
padding: const EdgeInsets.only(left: 13, bottom: 13),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Create Account',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'SegoeUI-SemiBold'),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 13),
child: Text(
"Please create an account in order to start using your StalkMe Profile.",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
SizedBox(
height: Height * 0.04,
),
],
),
),
Expanded(
child: Container(
color: kPrimaryColor,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Form(
key: _formKey,
child: Column(
children: [
GestureDetector(
onTap: () {
print('Login print');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LoginScreen()),
);
},
child: Padding(
padding: const EdgeInsets.only(
top: 17, right: 17, bottom: 17),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'LOGIN',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI-SemiBold',
),
)),
),
),
Container(
height: 1,
width: double.infinity,
color: Color(0xffE6E6E6),
),
SizedBox(
height: Height * 0.03,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Name',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userName,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a name';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Name",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Email Address',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userEmail,
validator: (value) {
if (value!.isEmpty || !value.contains('@')) {
return 'Please enter a valid email address';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Email Address",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Password',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userPassword,
validator: (value) {
if (value!.isEmpty || value.length < 6) {
return 'Please enter a 6 digit password';
}
return null;
},
obscureText: true,
key: ValueKey('name'),
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Password",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Spacer(),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: Color(0xffebf7f7),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'GO BACK',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
GestureDetector(
child: Padding(
padding:
const EdgeInsets.only(top: 8, bottom: 18),
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),
На небольших устройствах это не прокручивается, я пробую все, чтобы попытаться придать полную высоту, но теперь у меня ничего не получается.
Комментарии:
1. удалите контейнер и, если возникнут проблемы со свитком, замените
columnего наListView
Ответ №1:
Попробуйте поместить столбец непосредственно под представлением Singlechildscroll.
Подобный этому:
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
height: Height * 1, // if its still needed
child: Column(
Комментарии:
1. Попробуйте и это, но моя белая область, где отображается текстовое поле, исчезает, когда я делаю вот так
2. используйте расширенное значение для столбца и придайте контейнеру высоту.
Ответ №2:
- Снимите первый контейнер(завернутый по
SingleChildScrollViewвысоте, «высота: Высота * 1») - Удалите развернутый виджет.
- Придайте необходимый размер ограниченному контейнеру( Контейнер с цветом: kPrimaryColor,)