flutter unexpected errors - flutter

i am no newbie to the whole thing of being in a circle of errors, bugs and problem solving.
what i have been facing for the last few weeks is the fact that the code works in another laptop, maybe at someone else's project but i get the errors like it doesn't work although i checked and have run the process successfully a few times before.
it had posted, and those errors didn't exist.
we do have a null checker:
child: SingleChildScrollView(
child: isLoading
? Column(
knowing that is Loading is false
and i run android studio.
ps some of the code below feels missing because it has valuable data , and or it would have been longer than what it already is
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: MaterialApp(
theme: ThemeData(fontFamily: 'Harmattan',),
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
actions: [
IconButton(onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => MaintenanceDataTypesByDriver()));
}, icon: Icon(Icons.view_headline_sharp,size: 40,),)
],
title: Center(child: Text(
'enter',
style: TextStyle(fontSize: 25, color: Colors.white),
),),
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(
Icons.arrow_back_rounded,
size: 40,
color: Colors.white,
),
onPressed: () {
//Navigator.pushNamed(context, mainScreen.id);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => maintenance_screen()));
},
);
},
),
),
body: TabBarView(
children: [
Center(
child: SingleChildScrollView(
child: isLoading
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Text(" اplease hold.. ")
],
)
: new Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 0),
Center(
child: Text(
" choose an option",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Operations Types Api List New /
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.........
}).toList(),
onChanged: (String? newVal) {
setState(() {
print(faultReportingName1.toString());
});
},
value: faultReportingName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 5),
Center(
child: Text(
"press here",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Fault Locations Api List New
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("اpress here",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.....
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
textAlign : TextAlign.end,
),
...........
},
value: faultLocationsName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 10),
Center(
child: Text(
" date",
style: TextStyle(fontSize: 25),
),
),
//
Container(
width: 300,
height: 75,
child: TextField(
style: TextStyle(color: Colors.black, fontSize: 20),
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
showDatePicker(context: context, initialDate: DateTime.now(), textAlign: TextAlign.center,
decoration: InputDecoration(
errorStyle: TextStyle(height: 0.1),
errorText: _validateStartingDateController ? 'date' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: '$faultDate1' ,
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.yellow,
/* 0xfffdbd2a*/width: 20),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
),
//
Center(
child: Text(
"maintenance ",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
keyboardType: TextInputType.number,
//inputFormatters: [FilteringTextInputFormatter.digitsOnly],
controller: opCostController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorText: _valueValidate ? 'required' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: 'IQD ',
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 0),
Center(
child: Text(
"notes",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
controller: notesController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorStyle: TextStyle(height: 1),
alignLabelWithHint: true, hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 5),
Center(
child: _file == null ? Text('') :
Container(
height: 310,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_file!),
),
borderRadius: BorderRadius.circular(10),
),
//child: Image.asset('images/Logistic.jpg'),
),
),
Container(
height: 50,
width: 200,
child: ElevatedButton(
//style: ElevatedButton.styleFrom(side: BorderSide(width: 1,style: BorderStyle.solid),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side: BorderSide(color: Colors.white)))),
//style: ButtonStyle(shape: OutlinedBorder()),
child: Text(
'save',
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
//if(isLoading)return;
setState(() {
double opCost = double.parse(opCostController.text.trim());
String date = faultDateController.text;
int faultLocID = int.parse(faultLocationsName1!.trim());
int faultRepID = int.parse(faultReportingName1!.trim());
String notes = notesController.text.trim();
if(opCost.isNaN || faultReportingName1=='' || faultLocationsName1=='' ||date =='')
{
print('empty');
return;
}
else{
upload();

I think the problem is coming from your data model class. some of your String values is Null.
Try to check it carefully.

Related

flutter dropdownbutton that loads info from the dropdown to a data grid

as i have on my profile before, multiple posts of question about data grid. i need to get the grid by a dropdown button/menu that has all the driver's names and looks up all the data by that name/ driver number.
below is the snip of the body for that dropdown class.
body: TabBarView(
children: [
Center(
child: SingleChildScrollView(
child: isLoading
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Text(" please wait for data to load... ")
],
)
: new Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 0),
Center(
child: Text(
" drivers name "
, style: TextStyle(fontSize: 25,),
),
),
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.70), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("press here",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
alignment: AlignmentDirectional.topCenter,
menuMaxHeight: 300,
dropdownColor: Colors.grey.shade300,
borderRadius: BorderRadius.all(Radius.circular(15.0)),
items: DriversName.map((item) {
return DropdownMenuItem(
child: Center(
child: Text(
item['DriverName'].toString().trim(), //Names that the api dropdown contains
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
textAlign : TextAlign.end,
),
),
value: item['DriverNo'].toString().trim() //Id that has to be passed that the dropdown has.....
//e.g India (Name) and its ID (55fgf5f6frf56f) somethimg like that....
);
}).toList(),
onChanged: (String? newVal) {
setState(() {
driverName = newVal.toString();
driverName1 = driverName?.trim();
print(driverName1.toString());
});
},
value: driverName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 5,),
// Operations Types Api List New
Container(
height: 75,
width: 250,
margin: EdgeInsets.all(15),
child: TextField(
style: TextStyle(fontSize: 25),
keyboardType: TextInputType.number,
controller: driverNoController,
textAlign: TextAlign.center,
decoration: InputDecoration(
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: 'enter drivers name',
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red, width: 20),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
),
Container(
height: 50,
width: 150,
child: ElevatedButton(
//style: ElevatedButton.styleFrom(side: BorderSide(width: 1,style: BorderStyle.solid),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.lightBlueAccent),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side: BorderSide(color: Colors.white)))),
//style: ButtonStyle(shape: OutlinedBorder()),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.local_shipping_outlined),
SizedBox(
width: 25,
),
Text(
'GO ',
style: TextStyle(color: Colors.white, fontSize: 20),
),
],
)),
onPressed: () {
//fetchOpTypesData();
int driverNo = int.parse(driverNoController.text);
if (driverNo.isNaN || driverName1 == '') {
print('empty data');
return;
}
else {
upload();
searchDetailsByDriverNoFromJson(driverNo).then(
(value) {
Navigator.push(
context,
new MaterialPageRoute(
//builder: (context) => BalanceScreen(),
builder: (context) => transData(),
),
);
// print(value.driverNo);
saveDriverNoPrefs(driverNo);
}
).onError((error, stackTrace) {
CoolAlert.show(
context: context,
type: CoolAlertType.error,
text: "please check data",
);
});
};
} ),
),
],),
)
)

flutter Error: Two TextField in a single Row Getting Error

I want two TextField in row then I am getting error.When I am using Row
I want two TextField in row then I am getting error.I want two TextField in row then I am getting error.I want two TextField in row then I am getting error.
I want two TextField in row then I am getting error.I want two TextField in row then I am getting error.
This is my code.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class EnterDetails extends StatefulWidget {
const EnterDetails({Key? key}) : super(key: key);
#override
_EnterDetailsState createState() => _EnterDetailsState();
}
class _EnterDetailsState extends State<EnterDetails> {
TextEditingController nameController = TextEditingController();
TextEditingController zipCodeController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController stateController = TextEditingController();
TextEditingController countryController = TextEditingController();
var _formKey = GlobalKey<FormState>();
var CountryList = ["India", "USA", "Africa","England"];
final focus = FocusNode();
#override
void initState() {
_formKey = GlobalKey<FormState>();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 80,
),
Center(
child: Image.asset(
'assets/logo.png',
width: 115,
height: 80,
),
),
SizedBox(
height: 37,
),
Center(
child: Text(
"We are keen to know\nabout you",
style: GoogleFonts.poppins(
fontSize: 26,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 43,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Enter Full Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Full Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Zip Code",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: zipCodeController,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Zip Code',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your city',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"State",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your state',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)
),
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 8,top: 2),
child: Stack(
children: [
TextFormField(
cursorColor: Colors.white,
controller: countryController,
enabled: true,
validator: (value) {
if (value!.length != 0) {
return null;
}
return "please select country";
},
decoration: const InputDecoration(
suffixIcon: Icon(Icons.keyboard_arrow_down),
hintText: 'Country',
hintStyle: TextStyle(fontSize: 16),
border: UnderlineInputBorder(borderSide: BorderSide.none)),
style: TextStyle(
fontSize: 16,
color: Colors.grey[900],),
),
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
child: PopupMenuButton<String>(
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.transparent,
),
onSelected: (String value) {
setState(() {
countryController.text = value;
});
},
itemBuilder: (BuildContext context) {
return CountryList
.map<PopupMenuItem<String>>((String value) {
FocusScope.of(context).unfocus();
return new PopupMenuItem(
child: Container(
width: MediaQuery.of(context).size.width,
child: new Text(value)),
value: value);
}).toList();
},
),
)
],
),
),
),
SizedBox(height: 16,),
SizedBox(
height: 48,
width: double.infinity,
child: ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFFF2A6A4)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Color(0xFFF2A6A4)),
),
),
),
onPressed: () {
},
child: Text(
'Sign Up',
style: GoogleFonts.poppins(
fontSize: 14, color: Colors.white),
),
),
),
SizedBox(
height: 42,
),
],
),
),
),
],
),
),
),
),
bottomNavigationBar: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Already have an account? ',
style: GoogleFonts.poppins(fontSize: 14, color: Colors.black),
),
GestureDetector(
onTap: () {
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => LoginPage(),
// ),
// );
},
child: Text(
"Let's Go",
style: GoogleFonts.poppins(
fontSize: 14, color: Color(0xFF158998)),
))
],
)),
),
),
);
}
}
In actuall i want to make like this
but it is becoming
To have multiple items in a row you need to use Row() widget inside your Column and after that to get equal width for your inline widgets you need to use Expanded widget inside Row and then you can add another widget as child of Expanded. I have made changes in your code just copy and paste below code and observe the changes for next time.
class EnterDetails extends StatefulWidget {
const EnterDetails({Key? key}) : super(key: key);
#override
_EnterDetailsState createState() => _EnterDetailsState();
}
class _EnterDetailsState extends State<EnterDetails> {
TextEditingController nameController = TextEditingController();
TextEditingController zipCodeController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController stateController = TextEditingController();
TextEditingController countryController = TextEditingController();
var _formKey = GlobalKey<FormState>();
var CountryList = ["India", "USA", "Africa", "England"];
final focus = FocusNode();
#override
void initState() {
_formKey = GlobalKey<FormState>();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 80,
),
Center(
child: Image.asset(
'assets/logo.png',
width: 115,
height: 80,
),
),
SizedBox(
height: 37,
),
Center(
child: Text(
"We are keen to know\nabout you",
style: GoogleFonts.poppins(
fontSize: 26,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 43,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Enter Full Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Full Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Row(
children: [
Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Zip Code",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: zipCodeController,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Zip Code',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
)),
VerticalDivider(),
Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your city',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
))
],
),
SizedBox(
height: 16,
),
Row(
children: [
Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"State",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your state',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
)),
VerticalDivider(),
Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 8, top: 2),
child: Stack(
children: [
TextFormField(
cursorColor: Colors.white,
controller: countryController,
enabled: true,
validator: (value) {
if (value!.length != 0) {
return null;
}
return "please select country";
},
decoration: const InputDecoration(
suffixIcon: Icon(
Icons.keyboard_arrow_down),
hintText: 'Country',
hintStyle:
TextStyle(fontSize: 16),
border: UnderlineInputBorder(
borderSide: BorderSide.none)),
style: TextStyle(
fontSize: 16,
color: Colors.grey[900],
),
),
Container(
color: Colors.transparent,
width:
MediaQuery.of(context).size.width,
child: PopupMenuButton<String>(
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.transparent,
),
onSelected: (String value) {
setState(() {
countryController.text = value;
});
},
itemBuilder:
(BuildContext context) {
return CountryList.map<
PopupMenuItem<String>>(
(String value) {
FocusScope.of(context)
.unfocus();
return new PopupMenuItem(
child: Container(
width: MediaQuery.of(
context)
.size
.width,
child: new Text(value)),
value: value);
}).toList();
},
),
)
],
),
),
)
],
)),
],
),
SizedBox(
height: 16,
),
SizedBox(
height: 16,
),
SizedBox(
height: 48,
width: double.infinity,
child: ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFFF2A6A4)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Color(0xFFF2A6A4)),
),
),
),
onPressed: () {},
child: Text(
'Sign Up',
style: GoogleFonts.poppins(
fontSize: 14, color: Colors.white),
),
),
),
SizedBox(
height: 42,
),
],
),
),
),
],
),
),
),
),
bottomNavigationBar: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Already have an account? ',
style: GoogleFonts.poppins(fontSize: 14, color: Colors.black),
),
GestureDetector(
onTap: () {
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => LoginPage(),
// ),
// );
},
child: Text(
"Let's Go",
style: GoogleFonts.poppins(
fontSize: 14, color: Color(0xFF158998)),
))
],
)),
),
),
);
}
}
If you want to place widgets next to each other you need to use a Row-Widget. You can place that Row inside your Column.
https://api.flutter.dev/flutter/widgets/Row-class.html
Please Refer Below Code:-
import 'package:flutter/cupertino.dart';
class EnterDetails extends StatefulWidget {
const EnterDetails({Key? key}) : super(key: key);
#override
_EnterDetailsState createState() => _EnterDetailsState();
}
class _EnterDetailsState extends State<EnterDetails> {
TextEditingController nameController = TextEditingController();
TextEditingController zipCodeController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController stateController = TextEditingController();
TextEditingController countryController = TextEditingController();
var _formKey = GlobalKey<FormState>();
var CountryList = ["India", "USA", "Africa", "England"];
final focus = FocusNode();
#override
void initState() {
_formKey = GlobalKey<FormState>();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 80,
),
Center(
child: Image.asset(
'assets/logo.png',
width: 115,
height: 80,
),
),
SizedBox(
height: 37,
),
Center(
child: Text(
"We are keen to know\nabout you",
style: GoogleFonts.poppins(
fontSize: 26,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 43,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Enter Full Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Full Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Row(
children: [
Flexible(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Zip Code",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: zipCodeController,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Zip Code',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
)),
SizedBox(width: 10,),
Flexible(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your city',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
))
],
),
SizedBox(
height: 16,
),
Row(
children: [
Flexible(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"State",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your state',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
],
)),
SizedBox(width: 10,),
Flexible(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 8, top: 2),
child: Stack(
children: [
TextFormField(
cursorColor: Colors.white,
controller: countryController,
enabled: true,
validator: (value) {
if (value!.length != 0) {
return null;
}
return "please select country";
},
decoration: const InputDecoration(
suffixIcon: Icon(
Icons.keyboard_arrow_down),
hintText: 'Country',
hintStyle:
TextStyle(fontSize: 16),
border: UnderlineInputBorder(
borderSide: BorderSide.none)),
style: TextStyle(
fontSize: 16,
color: Colors.grey[900],
),
),
Container(
color: Colors.transparent,
width:
MediaQuery.of(context).size.width,
child: PopupMenuButton<String>(
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.transparent,
),
onSelected: (String value) {
setState(() {
countryController.text = value;
});
},
itemBuilder:
(BuildContext context) {
return CountryList.map<
PopupMenuItem<String>>(
(String value) {
FocusScope.of(context)
.unfocus();
return new PopupMenuItem(
child: Container(
width: MediaQuery.of(
context)
.size
.width,
child: new Text(value)),
value: value);
}).toList();
},
),
)
],
),
),
)
],
)),
],
),
SizedBox(
height: 16,
),
SizedBox(
height: 16,
),
SizedBox(
height: 48,
width: double.infinity,
child: ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFFF2A6A4)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Color(0xFFF2A6A4)),
),
),
),
onPressed: () {},
child: Text(
'Sign Up',
style: GoogleFonts.poppins(
fontSize: 14, color: Colors.white),
),
),
),
SizedBox(
height: 42,
),
],
),
),
),
],
),
),
),
),
bottomNavigationBar: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Already have an account? ',
style: GoogleFonts.poppins(fontSize: 14, color: Colors.black),
),
GestureDetector(
onTap: () {
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => LoginPage(),
// ),
// );
},
child: Text(
"Let's Go",
style: GoogleFonts.poppins(
fontSize: 14, color: Color(0xFF158998)),
))
],
)),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(Myapp11());
class Myapp11 extends StatelessWidget {
const Myapp11({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return EnterDetails();
}
}
class EnterDetails extends StatefulWidget {
const EnterDetails({Key? key}) : super(key: key);
#override
_EnterDetailsState createState() => _EnterDetailsState();
}
class _EnterDetailsState extends State<EnterDetails> {
TextEditingController nameController = TextEditingController();
TextEditingController zipCodeController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController stateController = TextEditingController();
TextEditingController countryController = TextEditingController();
var _formKey = GlobalKey<FormState>();
var CountryList = ["India", "USA", "Africa", "England"];
final focus = FocusNode();
#override
void initState() {
_formKey = GlobalKey<FormState>();
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: Container(
height: 2222,
//MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 80,
),
Center(
child: Image.asset(
'assets/logo.png',
width: 115,
height: 80,
),
),
SizedBox(
height: 37,
),
Center(
child: Text(
"We are keen to know\nabout you",
style: GoogleFonts.poppins(
fontSize: 26,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 43,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Enter Full Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Full Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Zip Code",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: zipCodeController,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your Zip Code',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
),
SizedBox(
width: 22,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your city',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
),
],
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"State",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter your state',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.all(16),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
SizedBox(
height: 3.7,
),
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 8, top: 2),
child: Stack(
children: [
TextFormField(
cursorColor: Colors.white,
controller: countryController,
enabled: true,
validator: (value) {
if (value!.length != 0) {
return null;
}
return "please select country";
},
decoration: const InputDecoration(
suffixIcon:
Icon(Icons.keyboard_arrow_down),
hintText: 'Country',
hintStyle: TextStyle(fontSize: 16),
border: UnderlineInputBorder(
borderSide: BorderSide.none)),
style: TextStyle(
fontSize: 16,
color: Colors.grey[900],
),
),
Container(
color: Colors.transparent,
width: 2222,
//MediaQuery.of(context).size.width,
child: PopupMenuButton<String>(
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.transparent,
),
onSelected: (String value) {
setState(() {
countryController.text = value;
});
},
itemBuilder: (BuildContext context) {
return CountryList.map<
PopupMenuItem<String>>(
(String value) {
FocusScope.of(context).unfocus();
return new PopupMenuItem(
child: Container(
width: 1111,
//MediaQuery.of(context).size.width,
child: new Text(value)),
value: value);
}).toList();
},
),
)
],
),
),
),
SizedBox(
height: 16,
),
SizedBox(
height: 48,
width: double.infinity,
child: ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
foregroundColor:
MaterialStateProperty.all<Color>(
Colors.white),
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xFFF2A6A4)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Color(0xFFF2A6A4)),
),
),
),
onPressed: () {},
child: Text(
'Sign Up',
style: GoogleFonts.poppins(
fontSize: 14, color: Colors.white),
),
),
),
SizedBox(
height: 42,
),
],
),
),
),
],
),
),
),
),
bottomNavigationBar: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Already have an account? ',
style: GoogleFonts.poppins(fontSize: 14, color: Colors.black),
),
GestureDetector(
onTap: () {
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => LoginPage(),
// ),
// );
},
child: Text(
"Let's Go",
style: GoogleFonts.poppins(
fontSize: 14, color: Color(0xFF158998)),
))
],
)),
),
),
),
);
}
}

Understanding flutter design elements material colours in text fields

I am new to flutter so please bare with me and my ulgly code here. I am trying to create a login screen and so far I have the following.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}
Which is producing me this Gui however I have an issue When I first load the app I get this
But I want the both textboxes to be white all the time with the frames but when I take my mouse away it disappears I presume its another colour I need like a not focussed colour, also you will notice the username bit has disapeared from the text field widget?.
Also does flutter have such a thing as place holder text color?
I am evuluating flutter for front end stuff at min as Maui is pushed back another six months and I just want to see how long takes me to do the same app in flutter.
you need just to set the color of the container that contain the textField like this :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}

Flutter bottomNavigationBar under put row section

I'm a beginner in the flutter, Im added my flutter page to bottomNavigationBar: Container to button and i want to to put under bottom button to this section
like this my image
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
),
any idea how can i put it correctly ?
Thanks
import 'dart:ui';
import 'package:cmapp/widgets/components/alert.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SignUpScreen extends StatefulWidget {
#override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State< SignUpScreen > {
//validation controller
TextEditingController fNameController = new TextEditingController();
TextEditingController lNameController = new TextEditingController();
TextEditingController nickNameController = new TextEditingController();
TextEditingController phoneController = new TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm=false;
check (BuildContext context){
if(fNameController.text.isNotEmpty &&
lNameController.text.isNotEmpty &&
nickNameController.text.isNotEmpty &&
phoneController.text.isNotEmpty){
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
/* double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;*/
return Scaffold(
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
_signUp(),
],
),
),
bottomNavigationBar: Container(
padding: EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),
);
}
Widget _signUp() {
return Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Form(
key: formKey,
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 34.0,fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
/* SizedBox(
height: 10.0,
),*/
/* Text(
"Enter to a beautiful world",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w300,
),
)*/
],
),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Text(
'First Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
controller: fNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Last Name',
style:
TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextField(
controller: lNameController,
onChanged: (val){
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
controller: nickNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/*prefixIcon: Icon(
Icons.people_outline_rounded,
color: Color(0xFFE1E8F7),
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Mobile Number',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
controller: phoneController,
onChanged: (val){
check(context);
},
maxLength: 10,
/* validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},*/
keyboardType: TextInputType.phone,
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "077xxxxxxx",
),
),
SizedBox(
height: 20.0,
),
/*
Container( alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 2,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),*/
/* Container(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476)
])),
child: Text(
'Next',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),*/
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), SizedBox(
height:100.0,
),
],
),
),
),
],
),
),
),
),
);
}
}
Use Column inside Container for Button and Text.
Container(
padding: EdgeInsets.all(8.0),
child: Column(
children: [
// first row
Row(children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
])
//second row
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), ],)
),

Flutter: Bottom part of the screen doesnt show up in release apk of android and adhoc build of ios

When i run my app from android studio, my screen renders fine.
However, when i create and install an apk or create an adhoc build for ios, my screen renders like this:
As you see the textfield and the buttons below it dont show up. I dont understand what is going wrong. Can you help please.
This is the code for the screen:
var child = Stack(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
//flex: 90,
child: Image.asset(
"${Constants.imagesPath}login-cover-bg.png",
fit: BoxFit.cover,
),
),
Expanded(
//flex: 100,
child: Container(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 50, left: 25),
child: Text(
'Please sign in',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 22,
),
),
),
SizedBox(
height: 40,
),
Expanded(
flex: 1,
child: Container(
color: Colors.orange,
padding: EdgeInsets.only(left: 25, bottom: 15, right: 25),
child: TextField(
maxLines: 1,
keyboardType: TextInputType.emailAddress,
onSubmitted: (_) {
_checkEmailValid();
FocusScope.of(context).nextFocus();
},
textInputAction: TextInputAction.next,
controller: _emailController,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: disableRedColor),
// when the TextFormField in unfocused
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: themeRedColor),
// when the TextFormField in focused
),
border: UnderlineInputBorder(),
hintText: 'Email',
errorText: isEmailValid == true ? '' : 'Invalid email'
),
),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.yellow,
padding: EdgeInsets.only(left: 25, right: 25),
child: TextField(
maxLines: 1,
onSubmitted: (_) {
_checkPasswordValid();
FocusScope.of(context).unfocus();
},
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
controller: _passwordController,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: disableRedColor),
// when the TextFormField in unfocused
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: themeRedColor),
// when the TextFormField in focused
),
border: UnderlineInputBorder(),
hintText: 'Password',
errorText: isPasswordValid == true ? '' : 'Invalid password',
suffixIcon: IconButton(
icon: Icon(
shouldObscureText == false ? Icons.visibility : Icons.visibility_off,
color: themeRedColor,
),
onPressed: (){
setState(() {
shouldObscureText = !shouldObscureText;
});
},
)
),
obscureText: shouldObscureText,
),
),
),
SizedBox(
height: 65,
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
Util.navigateView(context, SignupScreen());
},
child: Container(
padding: EdgeInsets.only(left: 25, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 15,
color: Colors.black54),
),
Text(
'Sign up',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 15,
color: Colors.black54),
),
],
),
),
)),
],
),
color: Colors.white,
),
),
],
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
width: 200,
child: Text(
'Welcome Back',
maxLines: 2,
style: TextStyle(
color: Colors.white,
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
print('skip press');
if(isEmailValid && isPasswordValid && _emailController.text.isNotEmpty && _passwordController.text.isNotEmpty){
hitTheLoginAPI();
}
else {
isEmailValid = false;
isPasswordValid = false;
Util.showToast('Invalid username or password');
}
},
child: Container(
margin: EdgeInsets.only(right: 20, bottom: 35),
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: themeRedColor,
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.arrow_forward,
color: Colors.white,
),
Text(
'Skip',
style: TextStyle(color: Colors.white, fontSize: 17),
),
],
),
),
),
),
),
],
);
what is going wrong??
You are using Expanded widgets inside a ListView. Expanded is supposed to be used inside a Column or a Row instead.
The incorrect usage throws an exception in debug mode & still prints the UI, since it isn't a breaking issue as such.
In release mode however, Flutter does not show errors or warnings - instead it simply shows a greyed out container, which is what is taking up some space on your app in release mode.
I think the problem is with responsiveness. Maybe, You might have used a really small or really large screen size emulator and it didnt fit according to that. Try using the ListView widget.
you can use 'SingleChildScrollView' to let the user scroll down
just wrap with widget
SingleChildScrollView(
child:...
);
you can also use 'MediaQuery' and adapt the size by the device size
MediaQuery