Flutter change password - flutter

I want to make a change password in my app using mysql but i dont know how to get the specific logged in id to change my password i have a dash board i am using cards on it so when i click the card with a name change password it will redirect
to this page i am using a mysql for my localdatabase.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('Change Password'),
backgroundColor: Color(0xff083663),
),
body: Form(
key: _key,
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 30.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Change Password',
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.w900),
)
],
),
),
),
SizedBox(
height: 10.0,
),
//This is the field where you will enter the Current Password
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Please Enter Current Password";
}
return null;
},
obscureText: _secureText1,
onSaved: (e) => c1 = e,
decoration: InputDecoration(
labelText: 'Current Password',
suffixIcon: IconButton(
onPressed: showHide,
icon: Icon(_secureText1
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
SizedBox(
height: 10.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Please Enter New Password";
}
return null;
},
obscureText: _secureText2,
onSaved: (e) => c2 = e,
decoration: InputDecoration(
labelText: 'New Password',
suffixIcon: IconButton(
onPressed: showHide2,
icon: Icon(_secureText2
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
// this is the field for the verify password
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: TextFormField(
validator: (e) {
if (e.isEmpty) {
return "Verify Password";
}
return null;
},
onSaved: (e) => c3 = e,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Verify Password',
suffixIcon: IconButton(
onPressed: showHide3,
icon: Icon(_secureText3
? Icons.visibility_off
: Icons.visibility),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff083663),
)),
border: OutlineInputBorder()),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: Divider(),
),
SizedBox(
height: 20.0,
),
Container(
height: 50,
width: 250,
child: RaisedButton(
onPressed: () {
check();
},
color: Color(0xffb5171d),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0))),
textColor: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.vpn_key,
color: Colors.white,
),
Text(
'Save Changes',
style: TextStyle(fontSize: 15),
),
SizedBox(
height: 20,
)
],
),
),
),
],
),
),
),
);
}
}

Related

flutter UI problem: text feild not scrolling behind stepper

Here when I am scrolling then my text fields which is in grey[200], scroll overe stepper little bit, as you can see in image. so How to fix it?
Here when I am scrolling then my text fields which is in grey[200], scroll overe stepper little bit, as you can see in image. so How to fix it?
This is my stepper code
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../constants/constants.dart';
class BecomeHH extends StatefulWidget {
const BecomeHH({Key? key}) : super(key: key);
#override
_BecomeHHState createState() => _BecomeHHState();
}
class _BecomeHHState extends State<BecomeHH> {
int _activeStepIndex = 0;
TextEditingController nameController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController countryController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController phoneController = TextEditingController();
List<Step> stepList() => [
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 0 ? StepState.complete : StepState.disabled,
title: const Text('Step One'),
content: ClipRRect(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
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.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: countryController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Country',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Email",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: emailController,
textAlign: TextAlign.left,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Email',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Phone",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: phoneController,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Phone Number',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
],
),
),
),
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 1 ? StepState.complete : StepState.disabled,
title: const Text('Step Two'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Video",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
],
),
)),
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 2 ? StepState.complete : StepState.disabled,
title: const Text('Step Three'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Focus Area",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
],
)))
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(elevation: 0,
backgroundColor: Colors.white38,
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
onPressed: () {
Navigator.pop(context);
},
),
),
body: SafeArea(
child: Theme(
data: ThemeData(
colorScheme: Theme.of(context).colorScheme.copyWith(primary: selectBlueColor),
),
child: Stepper(
type: StepperType.horizontal,
currentStep: _activeStepIndex,
steps: stepList(),
onStepContinue: () {
if (_activeStepIndex < (stepList().length - 1)) {
setState(() {
_activeStepIndex += 1;
});
} else {
print('Submited');
}
},
onStepCancel: () {
if (_activeStepIndex == 0) {
return;
}
setState(() {
_activeStepIndex -= 1;
});
},
onStepTapped: (int index) {
setState(() {
_activeStepIndex = index;
});
},
controlsBuilder: (BuildContext context, ControlsDetails details) {
final isLastStep = _activeStepIndex == stepList().length - 1;
return Container(
child: Row(
children: [
Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xFF158998)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.teal, width: 0.0),
),
),
),
onPressed: details.onStepContinue,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: (isLastStep)
? const Text('Submit')
: const Text('Next'),
),
),
),
const SizedBox(
width: 10,
),
if (_activeStepIndex > 0)
Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xFF158998)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.teal, width: 0.0),
),
),
),
onPressed: details.onStepCancel,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: const Text('Back'),
),
),
),
],
),
);
},
),
),
),
);
}
}
Simply add this line in your Stepper widget.
physics: ScrollPhysics(),

Bottom overflowed by 217 pixels

I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
Scaffold(
appBar: AppBar(
leading: SizedBox(
width: 16,
child: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Splash()),
);
}),
),
title: const Text(
"Upload KYC",
style: TextStyles.header4,
),
backgroundColor: ColorPalette.grey2,
elevation: 0,
),
backgroundColor: ColorPalette.grey2,
body: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 45.h(), left: 20.w(), right: 20.w(), bottom: 20.h()),
child: Row(
children: <Widget>[
Expanded(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Personal Details",
style: TextStyles.subtitle04,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.azure,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"ID Proof",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Bank Details",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30.h(),
),
const Text(
"Enter Your Details",
style: TextStyles.header002,
),
SizedBox(height: 50.h()),
// KYC form
Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Align(
alignment: Alignment.topLeft,
child: Text(
'First Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your First Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please fill in your name';
}
firstName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Last Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Last Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please complete your name';
}
lastName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Email Address',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
onChanged: (_) {
emailExists = false;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter an email address';
}
if (!Constants().emailFilter.hasMatch(val)) {
return 'Please enter a valid email';
}
if (emailExists) {
return 'A user with this email already exists';
}
email = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Phone Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: 'Enter Your Phone Number',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
validator: (val) {
if (val!.length < 11 || val.length > 11) {
return 'Phone Number should be 11';
}
phoneNumber = val;
},
),
],
)),
const Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: ConstrainedBox(
constraints: const BoxConstraints.expand(height: 54),
child: Align(
alignment: Alignment.bottomCenter,
child: RoundedLoadingButton(
color: ColorPalette.blue1,
width: (MediaQuery.of(context).size.width - 40),
controller: _btnController,
borderRadius: 12,
elevation: 0,
animateOnTap: false,
onPressed: () => Navigator.of(context)
.pushReplacementNamed(KYCIDProofScreen.routeName),
child: const Text('Next'),
),
),
),
),
],
),
),
),
],
),
);
Column wrap with SingleChildScrollView it will solve the overflow issue

How to Implement TextField with dropdown selection?

I am looking for a way to display a TextField with dropdown list showing previous inputs by the user. The contents of the dropdown list are stored in shared preferences. I know how to implement them separately but I am struggling to find a solution that combines the two.
I have searched everywhere but all the solutions I've found are for autocomplete or something similar. I'm not looking for an autocomplete solution, just a dropdown that appears under the TextField widget when it is focused, and fills in the text that's selected. The image below is taken from a website, I want to do the same thing for my mobile app.
What I have so far:
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.white,
side: const BorderSide(color: Colors.red, width: 1.0),
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(32.0))),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Icon(LineIcons.googlePlusG, size: 20.0), SizedBox(width: 8.0), Text('Google 登入')],
),
onPressed: () {
focusNode.unfocus();
},
),
OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.indigo,
backgroundColor: Colors.white,
side: const BorderSide(color: Colors.indigo, width: 1.0),
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(32.0))),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Icon(LineIcons.facebookF, size: 16.0), SizedBox(width: 8.0), Text('Facebook 登入')],
),
onPressed: () {
focusNode.unfocus();
},
),
Container(margin: const EdgeInsets.symmetric(vertical: 16.0), color: Colors.grey.shade300, height: 1.0),
Row(
children: const [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text('帳號', style: MyFonts.inputText),
),
),
],
),
TextFormField(
validator: RequiredValidator(errorText: 'Username is required'),
controller: usernameEdit,
style: MyFonts.inputText,
keyboardType: TextInputType.text,
cursorColor: Colors.black,
cursorHeight: 20.0,
decoration: InputDecoration(
isDense: true,
hintText: '請輸入帳號',
hintStyle: MyFonts.hintText,
contentPadding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
borderSide: const BorderSide(color: MyColors.theme),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
textInputAction: TextInputAction.next,
onEditingComplete: () => focusNode.nextFocus(),
),
const SizedBox(height: 16.0),
Row(
children: const [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text('密碼', style: MyFonts.inputText),
),
),
],
),
TextFormField(
validator: RequiredValidator(errorText: 'Password is required'),
controller: pwdEdit,
style: MyFonts.inputText,
keyboardType: TextInputType.visiblePassword,
cursorColor: Colors.black,
cursorHeight: 20.0,
obscureText: hidePwd,
decoration: InputDecoration(
suffixIcon: IconButton(
color: Colors.grey,
onPressed: () => setState(() {
hidePwd = !hidePwd;
}),
icon: Icon((hidePwd) ? Icons.visibility_off : Icons.visibility),
),
isDense: true,
hintText: '請輸入密碼',
hintStyle: MyFonts.hintText,
contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
borderSide: const BorderSide(color: MyColors.theme),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
textInputAction: TextInputAction.next,
onEditingComplete: () => focusNode.nextFocus(),
),
const SizedBox(height: 16.0),
Row(
children: [
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: MyColors.theme,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(32.0))),
),
onPressed: () async {
var sharedPrefs = await SharedPreferences.getInstance();
sharedPrefs.setString('username', usernameEdit.text);
sharedPrefs.setString('pwd', pwdEdit.text);
focusNode.unfocus();
},
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'登入',
style: MyFonts.buttonText,
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {
focusNode.unfocus();
Navigator.pushNamed(context, '/signup');
},
child: const Text('加入會員', style: MyFonts.textButtonText)),
TextButton(onPressed: () {}, child: const Text('忘記密碼?', style: MyFonts.textButtonText)),
],
)
],
)
use flutter package flutter_typeahead
Demo:
sample code:
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: TypeAheadField<Story>(
noItemsFoundBuilder: (value) {
return ListTile(
title: Text('no Story Found'));
},
hideOnEmpty: false,
getImmediateSuggestions: true,
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
controller: storyTextController,
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 25,
fontWeight: FontWeight.bold,
color: ThaqalaynColors.colorPurple),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'search',
hintStyle: TextStyle(
fontFamily: 'Roboto',
fontSize: 25,
fontWeight: FontWeight.bold,
color: ThaqalaynColors.colorPurple),
),
),
suggestionsCallback: (String pattern) async {
return pattern.isNotEmpty
? storyController.storyList
.where((item) => item.title
.toLowerCase()
.contains(pattern.toLowerCase()))
.toList()
: storyController.storyList.getRange(0, 3).toList();
},
itemBuilder: (context, Story suggestion) {
return ListTile(
title: Text(suggestion.title),
);
},
onSuggestionSelected: (Story suggestion) {
storyTextController.text = suggestion.title;
print("Suggestion selected ${suggestion.title}");
},
),
),

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)),
))
],
)),
),
),
),
);
}
}

How to add following decoration to TextFormField in flutter?

Following is my code where I am trying to add form TextFormField with decoration as seen in mock:
Rounded border
Background colour to grey
First email and then password with text not visible
Where password field will have show button to make password visible
finally a rounded submit button
MOCK:
CODE:
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your email';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your password';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
EDIT:
How to change color of this label ?
You can use borderRadius in OutlineInputBorder to make it roundable.
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Email',
))))),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding:
EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Your password',
)))),
Positioned(
right: 15,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text('SHOW')))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
Output
Edit
You can change the border color when it is clicked
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: TextField(
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Username',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
TextField(
obscureText: true,
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'password',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
Positioned(
right: 15,
child: Container(
width: 65,
height: 30,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text(
'SHOW',
style: TextStyle(fontSize: 8),
))))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
Output
Container(
padding:EdgeInsets.only(top:20,right:10,left:10),
child:Card(
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(20),
),
color:Colors.grey,
child: Container(
padding:EdgeInsets.only(left:12),
child: TextFormField(
decoration:InputDecoration(
hintText:"You phone number here...",
border:InputBorder.none,
fillColor:Colors.white,
),
),
),
),
),