Creating an flutter app in vs code with firebase its showing the specific errors .Errors that showing is mentioned below and the signup widget code - flutter

'The name UserRecord isn't a type so it can't be used as a type argument Try correcting the name to an existing type or defining a type named UserRecord
The method 'queryUserRecordOnce' isn't defined for the type '_SignupWidgetState'.
Try correcting the name to the name of an existing method, or defining a method named 'queryUserRecordOnce'
The method 'createUserRecordData' isn't defined for the type '_SignupWidgetState'.
Try correcting the name to the name of an existing method, or defining a method named 'createUserRecordData''
*import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'login.dart';
import 'package:easy_debounce/easy_debounce.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:easy_debounce/easy_debounce.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
class SignupWidget extends StatefulWidget {
const SignupWidget({Key key}) : super(key: key);
#override
_SignupWidgetState createState() => _SignupWidgetState();
}
class _SignupWidgetState extends State<SignupWidget> {
TextEditingController emailTextController;
TextEditingController textController1;
TextEditingController textController2;
TextEditingController passwordTextController;
bool passwordVisibility;
var collection = FirebaseFirestore.instance.collection('UserRecord');
final auth = FirebaseAuth.instance;
final scaffoldKey = GlobalKey<ScaffoldState>();
#override
void initState() {
super.initState();
emailTextController = TextEditingController();
textController1 = TextEditingController();
textController2 = TextEditingController();
passwordTextController = TextEditingController();
passwordVisibility = false;
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Align(
alignment: AlignmentDirectional(0.3, -0.8),
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 100, 0, 0),
child: ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Align(
alignment: AlignmentDirectional(0.2, -0.35),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: AlignmentDirectional(-0.55, -0.35),
child: InkWell(
onTap: () async {
Navigator.pop(context);
},
child: const FaIcon(
FontAwesomeIcons.arrowLeft,
color: Color.fromRGBO(5, 4, 0, 5),
size: 24,
),
),
),
),
const Expanded(
child: Align(
alignment: AlignmentDirectional(-2.5, -0.1),
child: Text(
'Signup',
style: TextStyle(
fontFamily: 'Oswald',
color: Color(0xFF0F5AA5),
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
Align(
alignment: AlignmentDirectional(0, 0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Align(
alignment: AlignmentDirectional(0, 0.05),
child: Container(
width: 250,
height: 400,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF0F5AA5),
Color(0xFF0F5AA5),
],
stops: [0, 0, 1],
begin: AlignmentDirectional(0, -1),
end: AlignmentDirectional(0, 1),
),
),
alignment: AlignmentDirectional(
-0.09999999999999998, 0.5),
child: Align(
alignment: AlignmentDirectional(-0.1, 1),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10, 15, 10, 0),
child: TextFormField(
controller: emailTextController,
onChanged: (_) => EasyDebounce.debounce(
'emailTextController',
Duration(milliseconds: 2000),
() => setState(() {}),
),
autofocus: true,
obscureText: false,
decoration: InputDecoration(
hintText: 'Mobile or Email',
hintStyle: const TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF000509),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
suffixIcon: emailTextController
.text.isNotEmpty
? InkWell(
onTap: () => setState(
() => emailTextController
?.clear(),
),
child: Icon(
Icons.clear,
color: Color(0xFF757575),
size: 22,
),
)
: null,
),
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF1A1F24),
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10, 10, 10, 0),
child: TextFormField(
controller: textController1,
onChanged: (_) => EasyDebounce.debounce(
'textController1',
Duration(milliseconds: 1000),
() => setState(() {}),
),
autofocus: true,
obscureText: false,
decoration: InputDecoration(
hintText: 'Full name',
hintStyle: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF000509),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
suffixIcon: textController1
.text.isNotEmpty
? InkWell(
onTap: () => setState(
() => textController1
?.clear(),
),
child: Icon(
Icons.clear,
color: Color(0xFF757575),
size: 22,
),
)
: null,
),
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF1A1F24),
),
textAlign: TextAlign.start,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10, 10, 10, 0),
child: TextFormField(
controller: textController2,
onChanged: (_) => EasyDebounce.debounce(
'textController2',
Duration(milliseconds: 1000),
() => setState(() {}),
),
autofocus: true,
obscureText: false,
decoration: InputDecoration(
hintText: 'User name',
hintStyle: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF000509),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
suffixIcon: textController2
.text.isNotEmpty
? InkWell(
onTap: () => setState(
() => textController2
?.clear(),
),
child: Icon(
Icons.clear,
color: Color(0xFF757575),
size: 22,
),
)
: null,
),
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF1A1F24),
),
textAlign: TextAlign.start,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10, 10, 10, 25),
child: FutureBuilder<List<UserRecord>>(
future: queryUserRecordOnce(
singleRecord: true,
),
builder: (context, snapshot) {
// Customize what your widget looks like when it's loading.
if (!snapshot.hasData) {
return const Center(
child: SizedBox(
width: 50,
height: 50,
child:
CircularProgressIndicator(
color: Colors.black,
),
),
);
}
List<UserRecord>
textFieldUserRecordList =
snapshot.data;
final textFieldUserRecord =
textFieldUserRecordList.isNotEmpty
? textFieldUserRecordList
.first
: null;
return TextFormField(
controller: passwordTextController,
onChanged: (_) =>
EasyDebounce.debounce(
'passwordTextController',
Duration(milliseconds: 1000),
() => setState(() {}),
),
autofocus: true,
obscureText: !passwordVisibility,
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF000509),
),
enabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF080F18),
width: 1,
),
borderRadius:
BorderRadius.circular(5),
),
suffixIcon: InkWell(
onTap: () => setState(
() => passwordVisibility =
!passwordVisibility,
),
focusNode: FocusNode(
skipTraversal: true),
child: Icon(
passwordVisibility
? Icons
.visibility_outlined
: Icons
.visibility_off_outlined,
color: Color(0xFF757575),
size: 22,
),
),
),
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF1A1F24),
),
textAlign: TextAlign.start,
);
},
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
0, 0, 0, 30),
child: ElevatedButton(
onPressed: () async {
final user = await FirebaseAuth
.instance
.createUserWithEmailAndPassword(
email:
emailTextController.text,
password:
passwordTextController
.text);
if (user == null) {
return;
}
final userCreateData =
createUserRecordData(
username: textController2.text,
pass: passwordTextController.text,
email: emailTextController.text,
uid: textController1.text,
);
await UserRecord.collection
.doc(user.uid)
.update(userCreateData);
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
LoginWidget(),
),
);
},
child: Text("signup"),
),
),
],
),
),
),
),
],
),
),
],
),
),
),
),
),
),
);
}
}*

Related

how i can achieve this type of dialog with textfield without using any library

I want to achieve this type of alert dialogue. so, far I able to achieve this.
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Enter Time'),
content:
Builder(builder: (context) {
var height = 100;
var width = 60;
return Container(
height: height - 10,
width: width - 10,
child: Row(
children: [
Expanded(
flex: 2,
child: TextField(
onChanged: (value) {
setState(() {
// valueText = value;
});
},
decoration:
const InputDecoration(
hintText: "Hour",
//helperText: 'Hour',
),
),
),
const Expanded(
child: Center(
child: Text(
":",
style: TextStyle(
fontSize: 50),
),
)),
Expanded(
flex: 2,
child: TextField(
onChanged: (value) {
setState(() {
// valueText = value;
});
},
decoration:
const InputDecoration(
hintText:
"Min",
// helperText: 'Min',
),
),
),
],
),
);
}),
actions: <Widget>[
ElevatedButton(
child: Text('OK'),
onPressed: () {
setState(() {
// codeDialog = valueText;
Navigator.pop(context);
});
},
),
],
);
});
this my code and still need lots of improvements and guide me with suitable suggestions
can anybody give me overhead on how to make it achieve the same UI as above
note: I am asking for learning purposes only and am amazed if this UI is achievable through custom.
Here is the full code solution. You just have to do little tweaking of fonts and padding stuff And of course add the functionality. I have created the UI for you.
import 'package:flutter/material.dart';
class Hello extends StatefulWidget {
const Hello({Key? key}) : super(key: key);
#override
State<Hello> createState() => _HelloState();
}
class _HelloState extends State<Hello> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
child: Text('Show Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (_) => SimpleDialog(
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'ENTER TIME',
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Row(
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.grey,
height: 80,
width: 120,
child: TextFormField(
keyboardType: TextInputType.datetime,
showCursor: false,
initialValue: '15',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 70,
color: Colors.black,
),
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
Text('Hour'),
],
),
Text(
':',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 70,
),
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.grey,
height: 80,
width: 120,
child: TextFormField(
keyboardType: TextInputType.datetime,
showCursor: false,
initialValue: '15',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 70,
color: Colors.black,
),
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
Text('Minute'),
],
),
],
),
),
SizedBox(
height: 40,
),
Row(
children: [
Icon(Icons.access_time_outlined),
Spacer(),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'Cancel',
style: TextStyle(
color: Colors.black,
),
),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'OK',
style: TextStyle(
color: Colors.black,
),
),
),
],
),
],
),
),
],
),
);
},
),
),
);
}
}
Just do TimeObject = await showTimePicker(etc) instead of showDialog
Try this and edit for your wish
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Enter Time'),
content: Builder(builder: (context) {
var height = 100;
var width = 60;
return Container(
height: height - 50,
width: width - 30,
child: Row(
children: [
Expanded(
flex: 2,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(5),
),
child: TextField(
onChanged: (value) {
setState(() {
// valueText = value;
});
},
decoration: const InputDecoration(
hintText: "Hour",
border: UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
errorBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
enabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
focusedBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
disabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
focusedErrorBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
),
),
),
),
const Expanded(
flex: 1, child: Text(":")),
Expanded(
flex: 2,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(5),
),
child: TextField(
onChanged: (value) {
setState(() {
// valueText = value;
});
},
decoration: const InputDecoration(
hintText: "Min",
border: UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
errorBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
enabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
focusedBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
disabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
focusedErrorBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: AppColors
.transparent),
),
),
),
),
),
],
),
);
}),
actions: <Widget>[
ElevatedButton(
child: Text('OK'),
onPressed: () {
setState(() {
// codeDialog = valueText;
Navigator.pop(context);
});
},
),
],
);
});
Try this and keep posted.

How to make value stay despite leaving the page?

I am trying to make an edit page for users to update their details. I am able to edit the details. But when I leave the page the values go back to the original value it was before editing. How do I make the value stay?
Here is how the screen looks like -
Screen Picture
I did wrap the values in set state thinking that they would remain after leaving the page but they dont.
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:my_plate/screens/home_screen.dart';
import 'package:my_plate/screens/user_guide_screen.dart';
import 'package:my_plate/widgets/app_drawer.dart';
class EditProfilePage extends StatefulWidget {
static String routeName = '/profile';
#override
_EditProfilePageState createState() => _EditProfilePageState();
}
class _EditProfilePageState extends State<EditProfilePage> {
final myController = TextEditingController();
final myController1 = TextEditingController();
String name = 'carolyn1234';
String email = 'carolyn#gmail.com';
final formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text('Profile'),
backgroundColor: Color(0xff588157),
elevation: 1,
// leading: IconButton(
// icon: Icon(
// Icons.arrow_back,
// color: Colors.white,
// ),
// onPressed: () {
// Navigator.of(context).pushNamed(MainScreen.routeName);
// },
// ),
actions: [
IconButton(
icon: Icon(Icons.library_books_outlined),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserGuideListScreen(),
));
},
),
],
),
body: Container(
padding: EdgeInsets.only(left: 16, top: 25, right: 16),
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: ListView(
children: [
Text(
"Profile",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w800),
),
SizedBox(
height: 15,
),
Center(
child: Stack(
children: [
Container(
width: 130,
height: 130,
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Theme.of(context)
.scaffoldBackgroundColor),
boxShadow: [
BoxShadow(
spreadRadius: 2,
blurRadius: 10,
color: Colors.black.withOpacity(0.1),
offset: Offset(0, 10))
],
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://i.postimg.cc/gj4CDtjX/image.png",
))),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 4,
color:
Theme.of(context).scaffoldBackgroundColor,
),
color: Color(0xff588157),
),
child: Icon(
Icons.edit,
color: Colors.white,
),
)),
],
),
),
SizedBox(
height: 35,
),
Text(
'User Details',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
),
SizedBox(height: 10),
Text('Username',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54)),
SizedBox(height: 5),
Container(
child: Text(name),
// margin: const EdgeInsets.all(2.0),
padding: const EdgeInsets.all(10.0),
width: 2000,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey)),
alignment: Alignment.topLeft,
),
SizedBox(height: 10),
Text('Email',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54)),
SizedBox(height: 5),
Container(
child: Text(email),
// margin: const EdgeInsets.all(2.0),
padding: const EdgeInsets.all(10.0),
width: 2000,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey)),
alignment: Alignment.topLeft,
),
SizedBox(
height: 35,
),
Text(
'Edit Details',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
),
SizedBox(
height: 15,
),
TextFormField(
controller: myController,
// initialValue: 'bla123',
// enabled: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
width: 0.0,
),
),
label: Text('Username',
style: TextStyle(color: Colors.black)),
),
validator: (username) {
if (username == null || username.isEmpty)
return 'Field is required.';
else if (username.length < 8)
return 'Please enter a description that is at least 8 characters.';
else
return null;
},
),
SizedBox(
height: 15,
),
TextFormField(
controller: myController1,
// initialValue: 'bla#gmail.com',
// enabled: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
width: 0.0,
),
),
label:
Text('Email', style: TextStyle(color: Colors.black)),
),
validator: (email) {
if (email == null || email.isEmpty)
return 'Field is required.';
String pattern = r'\w+#\w+\.\w+';
if (!RegExp(pattern).hasMatch(email))
return 'Invalid E-mail Address format.';
return null;
},
),
// DropdownButtonFormField(
// // onChanged: null,
// hint: Text('Female'),
// decoration: InputDecoration(
// label: Text('Gender'),
// ),
// items: [
// DropdownMenuItem(child: Text('Female'), value: 'female'),
// DropdownMenuItem(child: Text('Male'), value: 'male'),
// ],
// onChanged: (String? value) {},
// ),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
final isValidForm = formKey.currentState!.validate();
if (isValidForm) {
setState(() {
name = myController.text;
email = myController1.text;
});
}
setState(() {
// name = myController.text;
// email = myController1.text;
});
},
color: Color(0xff588157),
padding: EdgeInsets.symmetric(horizontal: 30),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text(
"Update Details",
style: TextStyle(
fontSize: 15,
letterSpacing: 2.2,
color: Colors.white),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
showAlertDialog();
// setState(() {
//
//
// // name = myController.text;
// // email = myController1.text;
// });
},
color: Color(0xff588157),
padding: EdgeInsets.symmetric(horizontal: 30),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text(
"Delete Account",
style: TextStyle(
fontSize: 15,
letterSpacing: 2.2,
color: Colors.white),
),
)
],
)
],
),
),
),
),
drawer: AppDrawer());
}
void showAlertDialog() {
// set up the buttons
Widget cancelButton = TextButton(
child: Text("No", style: TextStyle(color: Color(0xff588157))),
onPressed: () {
Navigator.pop(context);
},
);
Widget continueButton = TextButton(
child: Text("Yes", style: TextStyle(color: Color(0xff588157))),
onPressed: () {
setState(() {
name = '';
email = '';
});
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Account deleted successfully!'),
));
Navigator.pop(context);
},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("AlertDialog"),
content: Text("Are you sure you want to submit this form?"),
actions: [
cancelButton,
continueButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
}

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

Flutter TextField hide by Keyboard

I'm a beginner in the flutter, I have a conflict, when I'm focusing on a TexFiled, the keyboard hidden over the TextField, and bottom button not showing i attached my conflict here
any solution for this
Thanks
code here
import 'dart:ui';
import 'package:crapp/pages/create_password/password_screen.dart';
import 'package:crapp/widgets/components/alert.dart';
import 'package:crapp/widgets/components/page_animation.dart';
import 'package:crapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:crapp/provider/theme_provider.dart';
class PasswordScreen extends StatefulWidget {
#override
_PasswordScreenState createState() => _PasswordScreenState();
}
class _PasswordScreenState extends State< PasswordScreen > {
final _controller = TextEditingController();
//validation controller
TextEditingController sQuastionController = new TextEditingController();
TextEditingController answerQController = new TextEditingController();
TextEditingController passController = new TextEditingController();
TextEditingController conPassController = new TextEditingController();
final TextEditingController _pass = TextEditingController();
final TextEditingController _confirmPass = TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm=false;
check (BuildContext context){
if(sQuastionController.text.isNotEmpty &&
answerQController.text.isNotEmpty &&
conPassController.text.isNotEmpty &&
passController.text.isNotEmpty){
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
checks (BuildContext context){
if(passController.text.isEmpty){
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Password must be 10 characters !",);
}
);
}else if(passController.text.length > 0 && passController.text.length < 10){
isConfirm = true;
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Password doesn't match !",);
}
);
}
}
checkChanged(){
if( secretVal != null
)
{
setState(() {
isSave = true;
});
}else{
isSave =false;
}
} bool isSave=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;*/
Provider.of<ThemeProvider>(context).themeMode == ThemeMode.dark
? 'DarkTheme'
: 'LightTheme';
return Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: _signUp(),
),
],
),
), bottomNavigationBar: BottomAppBar(
elevation: 4,
child: Container(
height: 70,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
//check();
},
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(4)),
color: Color(0xFF2A3476),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Save",
style: TextStyle(
color: Color(0xFF2A3476),
fontSize: 15,
fontFamily: 'medium'),
),
),
),
),
],
),
),
),
),
/* bottomNavigationBar: Container(
padding: EdgeInsets.all(25.0),
decoration: BoxDecoration(color: Colors.white,
),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
*//* Navigator.push(context, SlidePageRoute(page:PasswordScreen()));*//*
},
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 Password",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
],
),
),
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(
"Steps to set your",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"password",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
), Text(
'Secret Question',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
), SizedBox(
height: 8.0,
),
Row(
children: [
Expanded(child: InkWell(
onTap: (){
FocusScope.of(context).requestFocus(FocusNode());
secretDialogue();
},
child: Stack(
children: <Widget>[
TextField(
/* textInputAction: TextInputAction.next,*/
controller: sQuastionController,
enabled: false,
onChanged: (val) {
check(context);
},
decoration: InputDecoration(
labelText: secretVal==null?"Select One":secretVal,
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],
)*/
),
),
Positioned.directional(
textDirection: Directionality.of(context),
end: 0,
top: 0,
bottom: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child:Image.asset(
"assets/icons/ic_drop_arrow.png",
scale: 9,
)),
)
],
),
),
),
],
),
SizedBox(
height: 20.0,
),
Text(
'Answer',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 8.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
/* textInputAction: TextInputAction.next,*/
controller: answerQController,
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(
'Password',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 8.0,
),
TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
/* textInputAction: TextInputAction.next,*/
controller: passController,
onChanged: (val){
check(context);
},
//password validation
/* validator: (val){
if(val!.isEmpty)
return 'Empty';
return null;
},*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "************",
),
),
SizedBox(
height: 20.0,
),
Text(
'Confirm Password',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 8.0,
),
TextFormField(
textInputAction: TextInputAction.done,
controller: conPassController,
onChanged: (val){
check(context);
},
//password validation
/* validator: (val){
if(val!.isEmpty)
return 'Empty';
if(val != _pass.text)
return 'Not Match';
return null;
},*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "************",
),
),
SizedBox(
height: 20.0,
),
SizedBox(
height: 8.0,
),
SizedBox(
height:200.0,
),
],
),
),
),
],
),
),
),
),
);
}
//
//Secret Qu Alert
List secretList =[
"-What’s your favorite team?",
"-What’s your astrological sign?",
"-What’s your favorite movie?",
"-What city were you born in?",
"-What was your first car?",
];
var secretVal;
void secretDialogue(){
showDialog<void>(
context: context,
// false = user must tap button, true = tap outside dialog
builder: (BuildContext dialogContext) {
return StatefulBuilder(
builder: (context,setState){
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
insetPadding: EdgeInsets.all(20),
child: Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(secretList.length, (index){
return InkWell(
onTap: (){
setState(() {
secretVal = secretList[index];
Navigator.pop(context);
});
},
child: Container(
height: 50,
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerLeft,
child: Text(secretList[index],
style: TextStyle(
fontSize: 18,
fontFamily: "medium",
),),
),
);
})
),
),
);
}
);
},
);
}
}
Wrap your Column by SingleChildScrollView. It will solve your problem.
like this..
body: SafeArea(
child: SingleChildScrollView(
child: Column(
Also I think after this there is no need of
resizeToAvoidBottomInset: false,
in Scaffold.
Please check out and I have found some inconsistency in code, refactored some of them
import 'dart:ui';
import 'package:crapp/pages/create_password/password_screen.dart';
import 'package:crapp/widgets/components/alert.dart';
import 'package:crapp/widgets/components/page_animation.dart';
import 'package:crapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:crapp/provider/theme_provider.dart';
class PasswordScreen extends StatefulWidget {
#override
_PasswordScreenState createState() => _PasswordScreenState();
}
class _PasswordScreenState extends State< PasswordScreen > {
final _controller = TextEditingController();
//validation controller
TextEditingController sQuastionController = new TextEditingController();
TextEditingController answerQController = new TextEditingController();
TextEditingController passController = new TextEditingController();
TextEditingController conPassController = new TextEditingController();
final TextEditingController _pass = TextEditingController();
final TextEditingController _confirmPass = TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm = false;
check(BuildContext context) {
if (sQuastionController.text.isNotEmpty &&
answerQController.text.isNotEmpty &&
conPassController.text.isNotEmpty &&
passController.text.isNotEmpty) {
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
void initState() {
SystemChannels.textInput.invokeMethod('TextInput.hide');
super.initState();
}
checks (BuildContext context){
if(passController.text.isEmpty){
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Password must be 10 characters !",);
}
);
}else if(passController.text.length > 0 && passController.text.length < 10){
isConfirm = true;
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Password doesn't match !",);
}
);
}
}
checkChanged() {
if (secretVal != null) {
setState(() {
isSave = true;
});
} else {
isSave = false;
}
}
bool isSave = 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;*/
Provider.of<ThemeProvider>(context).themeMode == ThemeMode.dark
? 'DarkTheme'
: 'LightTheme';
return Scaffold(
// resizeToAvoidBottomInset: false,
body: _signUp(),
bottomNavigationBar: BottomAppBar(
elevation: 4,
child: Container(
height: 70,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
//check();
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
color: Color(0xFF2A3476),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Save",
style: TextStyle(
color: Color(0xFF2A3476),
fontSize: 15,
fontFamily: 'medium'),
),
),
),
),
],
),
),
),
),
/* bottomNavigationBar: Container(
padding: EdgeInsets.all(25.0),
decoration: BoxDecoration(color: Colors.white,
),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
*/ /* Navigator.push(context, SlidePageRoute(page:PasswordScreen()));*/ /*
},
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(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: SingleChildScrollView(
child: Form(
key: formKey,
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 Password",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
],
),
),
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(
"Steps to set your",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"password",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Text(
'Secret Question',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 8.0,
),
Row(
children: [
Expanded(
child: InkWell(
onTap: () {
FocusScope.of(context)
.requestFocus(FocusNode());
secretDialogue();
},
child: Stack(
children: <Widget>[
TextField(
/* textInputAction: TextInputAction.next,*/
controller: sQuastionController,
enabled: false,
onChanged: (val) {
check(context);
},
decoration: InputDecoration(
labelText: secretVal == null
? "Select One"
: secretVal,
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],
)*/
),
),
Positioned.directional(
textDirection: Directionality.of(context),
end: 0,
top: 0,
bottom: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/icons/ic_drop_arrow.png",
scale: 9,
)),
)
],
),
),
),
],
),
SizedBox(
height: 20.0,
),
Text(
'Answer',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 8.0,
),
GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: TextField(
/* keyboardType: TextInputType.emailAddress,*/
/* textInputAction: TextInputAction.next,*/
controller: answerQController,
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(
'Password',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 8.0,
),
GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
/* textInputAction: TextInputAction.next,*/
controller: passController,
onChanged: (val) {
check(context);
},
//password validation
/* validator: (val){
if(val!.isEmpty)
return 'Empty';
return null;
},*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "************",
),
),
),
SizedBox(
height: 20.0,
),
Text(
'Confirm Password',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 8.0,
),
GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: TextFormField(
textInputAction: TextInputAction.done,
controller: conPassController,
onChanged: (val) {
check(context);
},
//password validation
/* validator: (val){
if(val!.isEmpty)
return 'Empty';
if(val != _pass.text)
return 'Not Match';
return null;
},*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "************",
),
),
),
SizedBox(
height: 20.0,
),
SizedBox(
height: 8.0,
),
SizedBox(
height: 200.0,
),
],
),
),
),
],
),
),
),
);
}
//
//Secret Qu Alert
List secretList = [
"-What’s your favorite team?",
"-What’s your astrological sign?",
"-What’s your favorite movie?",
"-What city were you born in?",
"-What was your first car?",
];
var secretVal;
void secretDialogue() {
showDialog<void>(
context: context,
// false = user must tap button, true = tap outside dialog
builder: (BuildContext dialogContext) {
return StatefulBuilder(builder: (context, setState) {
return Dialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
insetPadding: EdgeInsets.all(20),
child: Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(secretList.length, (index) {
return InkWell(
onTap: () {
setState(() {
secretVal = secretList[index];
Navigator.pop(context);
});
},
child: Container(
height: 50,
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerLeft,
child: Text(
secretList[index],
style: TextStyle(
fontSize: 18,
fontFamily: "medium",
),
),
),
);
})),
),
);
});
},
);
}
}

How to edit a selected item from a list in flutter

I have been trying to add an edit function to my to do list in which a user can select the item the user wants to edit, then that should pop a dialog where there is a textfield to enter the new value of the selected item and a Button that saves the changes. Currently I have a function that calls the array where the tasks are stored then it is supposed to triger the selected item using index so that at the end that selected value could be given a new value when onPressed, see this edit functionality as instagrams one except it edits text.
The problem comes when calling that function into the dialog's edit button because I am doing it like this onPressed: () => _editToDoItem(_controller.text, index) and since I have to pass 2 parameters there, the error I am getting is Undefined name 'index'. How can this problem be solved to make this edit function work?. By the way, I haven't get to try the edit function because of this error so please correct me if the function or any part of the code is incorrect.
everything to do with the edit function below.
List<ToDoElement> _toDoItems = [];
TextEditingController _controller = TextEditingController();
// this function adds a task to the list
void _addToDoItem(String task) {
if(task.isNotEmpty) {
setState(() {
_toDoItems.add(ToDoElement(task, DateTime.now()));
});
}
}
// this is the function that is supposed to edit the selected index from the _toDoItems array
void _editToDoItem(String newText, int index) {
setState(() {
_toDoItems[index].task = newText;
});
}
_editDialog(BuildContext context) {
return showDialog(context: context, builder: (context) {
return Dialog(
child: Container(
height: 180,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 60,
child: TextField(
controller: _controller,
autofocus: true,
style: TextStyle(fontSize: 18,),
)
),
Container(
height: 65,
width: double.infinity,
margin: EdgeInsets.only(top: 5,),
child: RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text('EDIT'),
onPressed: () {
_editToDoItem(_controller.text, index); // error on index, Undefined name 'index'
FocusScope.of(context).requestFocus(FocusNode());
},
),
),
],
),
),
);
});
}
full main.dart file
class ToDoElement {
String task;
final DateTime timeOfCreation;
ToDoElement(this.task, this.timeOfCreation);
}
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
#override
createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List<ToDoElement> _toDoItems = [];
TextEditingController _controller = TextEditingController();
void _addToDoItem(String task) {
if(task.isNotEmpty) {
setState(() {
_toDoItems.add(ToDoElement(task, DateTime.now()));
});
}
}
void _editToDoItem(String newText, int index) {
setState(() {
_toDoItems[index].task = newText;
});
}
void _removeTodoItem(int index) {
setState(() => _toDoItems.removeAt(index));
}
_editDialog(BuildContext context) {
return showDialog(context: context, builder: (context) {
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
padding: EdgeInsets.all(20),
height: 180,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 60,
child: TextField(
controller: _controller,
autofocus: true,
/*onSubmitted: (val) {
_addToDoItem(val);
_controller.clear();
},*/
style: TextStyle(fontSize: 18,),
decoration: InputDecoration(
hintText: 'Add a task here...',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
),
)
),
Container(
height: 65,
width: double.infinity,
margin: EdgeInsets.only(top: 5,),
child: RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text('EDIT', style: TextStyle(fontSize: 18)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
onPressed: () {
_editToDoItem(_controller.text, index);
FocusScope.of(context).requestFocus(FocusNode());
},
),
),
],
),
),
);
});
}
Widget _buildToDoItem(String toDoText, int index) {
return SizedBox(
child: Container(
height: 58,
margin: EdgeInsets.only(left: 22.0, right: 22.0, bottom: 12,),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(18)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children:[
Expanded(
child: ListTile(
title: Text(
toDoText,
style: TextStyle(fontSize: 18),
),
onTap: () => null,
),
),
FlatButton(
child: Text('Edit', style: TextStyle(color: Colors.red, fontSize: 16.5),),
onPressed: () => _editDialog(context),
),
FlatButton(
child: Text('Delete', style: TextStyle(color: Colors.red, fontSize: 16.5),),
onPressed: () => _removeTodoItem(index),
),
],
),
),
);
}
int compareElement(ToDoElement a, ToDoElement b) =>
a.timeOfCreation.isAfter(b.timeOfCreation) ? -1 : 1;
Widget _buildToDoList() {
_toDoItems.sort(compareElement);
return Expanded(
child: ListView.builder(
itemCount: _toDoItems.length,
itemBuilder: (context, index) {
if (index < _toDoItems.length) {
return _buildToDoItem(_toDoItems[index].task, index);
}
},
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
centerTitle: true,
backgroundColor: Colors.red,
title: Text('To Do List', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold,),),
)
),
backgroundColor: Colors.white,
body: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 60,
margin: EdgeInsets.all(22),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 10,
child: Container(
height: double.infinity,
child: TextField(
controller: _controller,
autofocus: true,
onSubmitted: (val) {
_addToDoItem(val);
_controller.clear();
},
style: TextStyle(fontSize: 18,),
decoration: InputDecoration(
hintText: 'Add a task here...',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
),
),
),
),
Expanded(
flex: 4,
child: Container(
height: double.infinity,
margin: EdgeInsets.only(left: 12),
child: RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text('ADD', style: TextStyle(fontSize: 18)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
onPressed: () {
_addToDoItem(_controller.text);
_controller.clear();
FocusScope.of(context).requestFocus(FocusNode());
},
),
),
),
],
),
),
_buildToDoList()
]
),
),
);
}
}
If you have any questions please let me know in the comments;)
You can copy paste run full code below
You can provide index to _editDialog then _editToDoItem can get index
code snippet
_editDialog(BuildContext context, int index)
...
FlatButton(
child: Text(
'Edit',
style: TextStyle(color: Colors.red, fontSize: 16.5),
),
onPressed: () => _editDialog(context, index),
),
working demo
full code
import 'package:flutter/material.dart';
class ToDoElement {
String task;
final DateTime timeOfCreation;
ToDoElement(this.task, this.timeOfCreation);
}
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
#override
createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List<ToDoElement> _toDoItems = [];
TextEditingController _controller = TextEditingController();
TextEditingController _controller1 = TextEditingController();
void _addToDoItem(String task) {
if (task.isNotEmpty) {
setState(() {
_toDoItems.add(ToDoElement(task, DateTime.now()));
});
}
}
void _editToDoItem(String newText, int index) {
setState(() {
_toDoItems[index].task = newText;
});
}
void _removeTodoItem(int index) {
setState(() => _toDoItems.removeAt(index));
}
_editDialog(BuildContext context, int index) {
return showDialog(
context: context,
builder: (context) {
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
padding: EdgeInsets.all(20),
height: 180,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 60,
child: TextField(
controller: _controller,
autofocus: true,
/*onSubmitted: (val) {
_addToDoItem(val);
_controller.clear();
},*/
style: TextStyle(
fontSize: 18,
),
decoration: InputDecoration(
hintText: 'Add a task here...',
enabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
),
)),
Container(
height: 65,
width: double.infinity,
margin: EdgeInsets.only(
top: 5,
),
child: RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text('EDIT', style: TextStyle(fontSize: 18)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
onPressed: () {
_editToDoItem(_controller.text, index);
FocusScope.of(context).requestFocus(FocusNode());
},
),
),
],
),
),
);
});
}
Widget _buildToDoItem(String toDoText, int index) {
return SizedBox(
child: Container(
height: 58,
margin: EdgeInsets.only(
left: 22.0,
right: 22.0,
bottom: 12,
),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(18)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: ListTile(
title: Text(
toDoText,
style: TextStyle(fontSize: 18),
),
onTap: () => null,
),
),
FlatButton(
child: Text(
'Edit',
style: TextStyle(color: Colors.red, fontSize: 16.5),
),
onPressed: () => _editDialog(context, index),
),
FlatButton(
child: Text(
'Delete',
style: TextStyle(color: Colors.red, fontSize: 16.5),
),
onPressed: () => _removeTodoItem(index),
),
],
),
),
);
}
int compareElement(ToDoElement a, ToDoElement b) =>
a.timeOfCreation.isAfter(b.timeOfCreation) ? -1 : 1;
Widget _buildToDoList() {
_toDoItems.sort(compareElement);
return Expanded(
child: ListView.builder(
itemCount: _toDoItems.length,
itemBuilder: (context, index) {
if (index < _toDoItems.length) {
return _buildToDoItem(_toDoItems[index].task, index);
}
},
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
centerTitle: true,
backgroundColor: Colors.red,
title: Text(
'To Do List',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
)),
backgroundColor: Colors.white,
body: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
Container(
height: 60,
margin: EdgeInsets.all(22),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 10,
child: Container(
height: double.infinity,
child: TextField(
controller: _controller1,
autofocus: true,
onSubmitted: (val) {
_addToDoItem(val);
_controller1.clear();
},
style: TextStyle(
fontSize: 18,
),
decoration: InputDecoration(
hintText: 'Add a task here...',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.red, width: 2),
),
),
),
),
),
Expanded(
flex: 4,
child: Container(
height: double.infinity,
margin: EdgeInsets.only(left: 12),
child: RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text('ADD', style: TextStyle(fontSize: 18)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
onPressed: () {
_addToDoItem(_controller1.text);
_controller1.clear();
FocusScope.of(context).requestFocus(FocusNode());
},
),
),
),
],
),
),
_buildToDoList()
]),
),
);
}
}