I have an application like this:
I want to place a Text widget at the bottom of the page. How can I do that?
Codes:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:teen_browser/pages/LoginAndRegister/LoginPage.dart';
import 'package:teen_browser/pages/LoginAndRegister/RegisterPage.dart';
class RegisterPage extends StatelessWidget {
const RegisterPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 25, 25, 25),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
Center(
child: Image.asset("assets/Logo.png", height: MediaQuery.of(context).size.height * 0.1),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.07,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Ad:", style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(color: Colors.white, fontSize: 18, fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[600], fontFamily: "Montserrat"),
hintText: "Ad",
fillColor: Color.fromARGB(179, 55, 55, 55)
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Soyad:", style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(color: Colors.white, fontSize: 18, fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[600], fontFamily: "Montserrat"),
hintText: "Soyad",
fillColor: Color.fromARGB(179, 55, 55, 55)
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("E-Posta:", style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(color: Colors.white, fontSize: 18, fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.mail),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[600], fontFamily: "Montserrat"),
hintText: "E-Posta",
fillColor: const Color.fromARGB(179, 55, 55, 55)
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Parola:", style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(color: Colors.white, fontSize: 18, fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock),
prefixIconColor: const Color.fromARGB(255, 162, 162, 162),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[600], fontFamily: "Montserrat"),
prefixStyle: TextStyle(color: Colors.grey[600]),
hintText: "Parola",
fillColor: const Color.fromARGB(179, 55, 55, 55)
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.03,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.05,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color.fromARGB(255, 47, 47, 47),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), // <-- Radius
),
),
child: const Text("Hesap Oluştur", style: TextStyle(color: Colors.white, fontSize: 20, fontFamily: "Montserrat")),
onPressed: () {},
),
),
),
),
],
),
),
);
}
}
I tried with code like this:
Align(
alignment: Alignment.bottomCenter,
child: Text("Test"),
),
But this code didn't work. He settled into the regular Column row. It's not at the bottom of the page.
Thanks for help.
Using another column with MainAxisAlignment.spaceBetween, works, also you can replace MediaQuery size with `LayoutBuilder.
class RegisterPage extends StatelessWidget {
const RegisterPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 25, 25, 25),
body: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
child: SizedBox(
height: constraints.maxHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
Center(
child: Image.asset("assets/Logo.png",
height: MediaQuery.of(context).size.height * 0.1),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.07,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Ad:",
style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(
color: Colors.grey[600],
fontFamily: "Montserrat"),
hintText: "Ad",
fillColor: Color.fromARGB(179, 55, 55, 55)),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Soyad:",
style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(
color: Colors.grey[600],
fontFamily: "Montserrat"),
hintText: "Soyad",
fillColor: Color.fromARGB(179, 55, 55, 55)),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("E-Posta:",
style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.mail),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(
color: Colors.grey[600],
fontFamily: "Montserrat"),
hintText: "E-Posta",
fillColor: const Color.fromARGB(179, 55, 55, 55)),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Text("Parola:",
style: TextStyle(fontSize: 20, color: Colors.white)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: TextFormField(
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: "Montserrat"),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock),
prefixIconColor:
const Color.fromARGB(255, 162, 162, 162),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
filled: true,
hintStyle: TextStyle(
color: Colors.grey[600],
fontFamily: "Montserrat"),
prefixStyle: TextStyle(color: Colors.grey[600]),
hintText: "Parola",
fillColor: const Color.fromARGB(179, 55, 55, 55)),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.03,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.05,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), // <-- Radius
),
),
child: const Text("Hesap Oluştur",
style: TextStyle(color: Colors.white, fontSize: 20, fontFamily: "Montserrat")),
onPressed: () {},
),
),
),
),
],
),
Text("dsadas"),
],
),
),
),
),
);
}
}
Related
i want to make scrollview in visibility but when i try to add SingleChildScrollView it still doesn't work, the result is like this
This is the result
and what I want the application will run as shown below
its main purpose is when the DropdownMenuItem is scrolled on the screen it will not be carried away
thank you, sorry if my words are a little difficult to understand
and this is my code:
class AddressScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() => _AddressState();
}
class _AddressState extends State<AddressScreen> {
String? _detail;
bool _saveButton = false;
String? valueChoose;
List listProvinsi = ['Lampung', 'DKI Jakarta'];
String? valueChoose2;
List listKabupaten = ['Bandar Lampung', 'Jakarta Timur'];
String? valueChoose3;
List listKecamatan = ['Kemiling', 'Cipayung'];
String? valueChoose4;
List listKelurahan = ['Beringin Raya', 'Bambu Apus'];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
titleSpacing: 0,
elevation: 10,
backgroundColor: Theme.of(context).primaryColor,
title: Text(
'Alamat',
style: TextStyle(fontSize: 18),
),
actions: [
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(),
),
),
},
child: Container(
height: 30,
width: 30,
margin: EdgeInsets.only(
right: 3,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(personImg),
),
),
),
),
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeScreen(),
),
),
},
child: Container(
margin: EdgeInsets.only(
right: 7,
),
child: Image.asset(iconAppbar),
),
),
],
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
height: SizeConfig.screenHeight / 4.5,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x14000000),
offset: Offset(
0,
2,
),
blurRadius: 4,
spreadRadius: 2,
),
],
),
child: Row(
children: [
SizedBox(width: SizeConfig.screenWidth / 17),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Container(
child: Text(
'Alamat Anda',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Container(
height: SizeConfig.screenHeight / 9,
width: SizeConfig.screenWidth / 2.2,
// color: Colors.grey,
child: Row(
children: [
Expanded(
child: Text(
'Perumahan Berkoh Indah Jl. Brawijaya No. 45 Gg. Mangga Rt.03 Rw.05 Kel. Arcawinangun, Kec. Purwokerto Timur, Kab. Banyumas Jawa Tengah - 53114',
style: TextStyle(
color: Colors.black54,
fontSize: 11,
),
),
),
],
),
)
],
),
SizedBox(width: SizeConfig.screenWidth / 9),
//#arjunalst2020
// ChangeButton(),
InkWell(
onTap: () {
setState(() {
_saveButton = !_saveButton;
});
},
child: Container(
margin:
EdgeInsets.only(top: SizeConfig.screenHeight / 8),
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 3,
decoration: _saveButton
? BoxDecoration(
color: Colors.grey.shade700,
borderRadius:
BorderRadius.all(Radius.circular(8)))
: BoxDecoration(
color: Colors.pink.shade800,
borderRadius:
BorderRadius.all(Radius.circular(8))),
child: Center(
child: Text(
_saveButton ? 'Simpan' : 'Ubah',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
],
),
),
SizedBox(height: 20),
Visibility(
visible: _saveButton,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Provinsi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue) {
setState(() {
valueChoose = newValue.toString();
});
},
items: listProvinsi.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kabupaten/Kota',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose2,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue2) {
setState(() {
valueChoose2 = newValue2.toString();
});
},
items: listKabupaten.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kecamatan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose3,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue3) {
setState(() {
valueChoose3 = newValue3.toString();
});
},
items: listKecamatan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kelurahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose4,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold,
),
onChanged: (newValue4) {
setState(() {
valueChoose4 = newValue4.toString();
});
},
items: listKelurahan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Jalan/Gang/Nama Gedung/Nama Perumahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
counterText: "",
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Unit/Blok/RT/RW',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kode Pos',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
keyboardType: TextInputType.number,
maxLines: 1,
maxLength: 8,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
counterText: "",
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Center(
child: Container(
width: SizeConfig.screenWidth / 1.12,
height: SizeConfig.screenHeight / 10,
decoration: BoxDecoration(
color: Colors.transparent,
border:
Border.all(color: Colors.black38, width: 0.6),
),
child: Row(
children: [
Container(
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth / 5,
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Icon(
Icons.location_on,
color: Colors.white,
size: 35,
),
),
SizedBox(width: SizeConfig.screenWidth / 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
'Tandai Lokasi Peta',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 11,
),
),
Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.9,
child: Row(
children: [
Expanded(
child: Text(
'Jl. Brawijaya No,45 Gg. Mangga Kel. Arcawinangun, Kec. Purwokerto Timur, Banyumas',
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade800,
),
),
),
],
),
),
],
),
],
),
),
),
SizedBox(height: 10),
Container(
height: SizeConfig.screenHeight / 20,
width: SizeConfig.screenWidth / 1.6,
margin:
EdgeInsets.only(left: SizeConfig.screenWidth / 3.3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Pastikan lokasi yang Anda tandai di peta sesuai dengan alamat yang Anda isi di atas',
style: TextStyle(
fontSize: 9,
color: Colors.grey.shade800,
),
),
),
],
),
),
SizedBox(height: 30),
],
),
),
),
],
),
),
),
);
}
}
I'm sorry if my code is still messy or a lot of it is not effective, I'm just learning 😅
Wrap the Visibility widget with Expanded.
Expanded(
child: Visibility(
.....
),
),
If this doesn't work, wrap the main body Column with SingleChildScrollView.
NOTE: Wrapping the main Column with a Container is unnecessary.
I had the same issue multiple times.
you need to wrap your SingleChildScrollView in a Flexible.
Here is the sequence I need to do to always fix:
Flexible(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children:[Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10, top: 20, bottom: 20),
child: Text( )
I have a simple page in which I am using SingleChildScrollView to scroll the page so it will not show overflow and show the content of the bottom.
But it's showing an error also the page is not scrollable due to which I can't see the bottom 2 buttons
My code
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'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),
On small devices, it's not scrollable I try everything to try to give full height but now nothing works for me.
Try putting the Column directly below the SingleChildScrollView.
Like this:
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
height: Height * 1, // if its still needed
child: Column(
Remove the first container(Wrapped by SingleChildScrollView with height, "height: Height * 1")
Remove the Expanded widget.
Give required size to enbounded Container(
Container with color: kPrimaryColor,)
I have a simple form screen issue is it just sticks and showing overflow on the bottom and not scrolling. I have added SingleChildScrollView but it's not working. Try to remove and added Expanded also Try to give height also cant divided height so give first contact full height but not working.
My code
body: 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(
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'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),
There are few things wrong with the code.
Using a Container for spacing is heavy. Use SizedBox with height instead.
Don't limit the height of SingleChildScrollView, when you want infinite height.
Since the Expanded widget takes up infinite space available, wrapping a widget in it will make that widget take up an infinite size, which Flutter will not allow. So, avoid using any flex widget inside scroll views.
Spacer is an expanded widget. This implies it follows point 3.
There are few code styling tips:
Use the const keyword with a constant constructor wherever possible.
Variables in Flutter follow the camelCase convention.
Here's the code I edited and it worked. I have changed some variables and properties to reproduce the working code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
final _formKey = GlobalKey();
final textGreyColor = Colors.grey;
final kPrimaryColor = Colors.teal;
final userName = TextEditingController();
final userEmail = TextEditingController();
final userPassword = TextEditingController();
#override
Widget build(BuildContext context) {
// not optimal, but will do
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
var status = height / 10;
return SingleChildScrollView(
// sized box nullifies the usage of scroll view
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
child: Column(
children: [
SizedBox(
height: status * 1,
),
SizedBox(
height: height * 0.065,
),
const Padding(
padding: 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'),
),
),
),
const Padding(
padding: 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,
),
],
),
),
// don's use Expanded in scrollable views
Container(
color: kPrimaryColor,
child: Container(
decoration: const 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: const Color(0xffE6E6E6),
),
SizedBox(
height: height * 0.03,
),
SizedBox(
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: SizedBox(
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: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Name",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
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: SizedBox(
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: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Email Address",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
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: SizedBox(
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: const ValueKey('name'),
style: TextStyle(
color: textGreyColor, fontFamily: 'SegoeUI'),
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Password",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
// const Spacer(), // --> this is an expanded widget
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: width * 0.9,
height: height * 0.06,
decoration: BoxDecoration(
color: const 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: const Center(
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
),
],
),
),
),
),
],
),
);
}
}
body: SingleChildScrollView(
child: Container(
height: Height * 1,
I think height wents wrong
because
double Height = 500.0;
double Width = 300.0;
final kPrimaryColor = Colors.blue;
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Container(
height: Height * 1.3,
It's working
But I know this is not a proper answer but you have to work in height. and keep move your project
I am creating a form with simple labels and input field . Below is the layout code
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16,8,0,0),
child: Text(
"Purchase Order : Other Details",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontFamily: 'Lato',
fontWeight: FontWeight.bold),
),
),
],
),
Container(
height: 20,
),
Row(
children: [
Container(
width: 150,
child: Text(
'Gate In Date'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
),
Container(
width: 150,
child: Text(
'Gate Out Date'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
)
],
mainAxisAlignment: MainAxisAlignment.start,),
Row(
children: [
Container(
width: 150,
child: Text(
'Gate In Time'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
),
Container(
width: 150,
child: Text(
'Gate Out Time'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
)
],mainAxisAlignment: MainAxisAlignment.start,
),
Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Container(
width: 150,
child: Text(
'Tare Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Row(
children: [
Padding(
padding:
const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Row(
children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16)),
),
),flex: 1,
)
],
),
),
),
],
),
Container(
width: 150,
child: Text(
'Gross Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 1,
)
],
),
),
),
],
),
),
Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Container(
width: 150,
child: Text(
''.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Container(
width: 240,
child: Text(''),
),
Padding(
padding:
const EdgeInsets.only(left: 8),
child: Container(
width: 150,
child: Text(
'Net Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: Container(
width: 240,
child: Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,)),
),
),flex: 1,
)
],
),
),
),
],
),
],
)
For every label and input field, I have given same fixed width but still they are not looking equal when I run the app in device
See the attached screenshot
Why don't you structure it the other way around Row(Column(), Column, Column, Column)
1st column labels, 2nd fields, 3rd labels, 4th fields
Instead all of them being Hello i want each of them to be individually typed in and different val
Here's the code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:recipe_saver/Screens/saver_recipes.dart';
class RecipeEditorScreen extends StatefulWidget {
#override
_RecipeEditorScreenState createState() => _RecipeEditorScreenState();
}
class _RecipeEditorScreenState extends State<RecipeEditorScreen> {
// ignore: non_constant_identifier_names
List IngredientContainer = [];
final textFieldEdit = TextEditingController();
TextEditingController IngredientSaver = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
height: MediaQuery
.of(context)
.size
.height,
width: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueGrey, Colors.blueGrey[900]])),
),
Container(
padding: EdgeInsets.symmetric(
vertical: Platform.isIOS ? 60 : 30, horizontal: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) =>
saverecipes()));
},
child: Text(
"Recipe",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
),
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) =>
saverecipes()));
},
child: Text(
"Saver",
style: TextStyle(
color: Colors.blue,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
SizedBox(
height: 30,
),
Stack(
children: [
Container(
margin: EdgeInsets.symmetric(
vertical: Platform.isIOS ? 120 : 90, horizontal: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
colors: [Colors.blue, Colors.blueAccent],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.only(top: 15, left: 5),
child: Text(
"Dish:",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 35,
fontFamily: 'Overpass',
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(top: 15, right: 5, left: 10),
child: TextField(
controller: textFieldEdit,
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: "Enter Dish Title",
hintStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 25,
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blueAccent),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blueAccent),
)),
style: TextStyle(
fontFamily: 'Overpass',
fontSize: 35,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
),
],
),
SizedBox(
height: 50,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 5),
child: Text(
"Ingredients:",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.black,
fontSize: 25,
fontFamily: 'Overpass'),
),
),
IconButton(
icon: Icon(Icons.add_circle_outline,
size: 30, color: Colors.black),
onPressed: () {
setState(() {
IngredientContainer.add('');
});
},
),
],
),
Expanded(
child: Container(
height: double.infinity,
width: MediaQuery
.of(context)
.size
.width,
child: ListView.builder(
itemCount: IngredientContainer.length,
itemBuilder: (context, index) {
return Container(
height: 50,
width: MediaQuery
.of(context)
.size
.width,
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 7),
child: Text(
"Ingredient:",
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'OverPass',
fontSize: 17,
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(left: 8, right: 8),
child: TextField(
controller: IngredientSaver,
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Type Ingredient
Here',
hintStyle: TextStyle(
fontSize: 17,
fontFamily: 'Overpass',
fontWeight: FontWeight.w200,
color: Colors.grey,
),
enabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent),
),
focusedBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent),
),
),
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'Overpass',
fontSize: 17,
color: Colors.black,
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
IngredientContainer.removeAt(index);
});
},
child: Padding(
padding: EdgeInsets.only(right: 7),
child: Container(
child: Icon(Icons.delete),
),
),
)
],
),
);
},
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueGrey,
Colors.blueGrey[900]]
),
borderRadius: BorderRadius.circular(7)
),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Enter",
style: TextStyle(
fontSize: 20,
fontFamily: 'Overpass',
fontWeight: FontWeight.w600,
color: Colors.black
),
),
),
),
)
],
),
),
],
),
],
),
);
}
}