i am building a log in ui screen everything is going fine but as i was supposed to use more than one TextField i created a new class of TextField and the code goes as follows
import 'package:gradient_widgets/gradient_widgets.dart';
import 'package:notepad/authentication/textfield.dart';
class LogIn extends StatefulWidget {
LogIn({Key key}) : super(key: key);
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment:
CrossAxisAlignment.start, //TODO: ESSE DACK NA EK BAR
children: [
Container(
padding: EdgeInsets.fromLTRB(20.0, 150.0, 20.0, 0.0),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Welcome,',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
),
),
Text(
'Log In to continue!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.grey,
),
),
SizedBox(height: 70),
buildTextField(
labelText: 'Email',
),
SizedBox(height: 30),
buildTextField(
labelText: 'Password',
obscureText: true, //TODO: password ko thich krna hy!!!
),
SizedBox(height: 10),
Container(
alignment: Alignment(1.0, 0.0),
child: InkWell(
onTap: () {
//TODO: navigate to forgot password page
},
child: Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
fontSize: 10.0,
),
),
),
),
SizedBox(height: 70),
Container(
child: GradientButton(
increaseHeightBy: 10.0,
increaseWidthBy: 200.0,
child: Text(
'Log In',
style: TextStyle(fontWeight: FontWeight.bold),
),
callback: () {},
//TODO: LOGIN KA CALLBACK JAYEGA YAHA PR
gradient: LinearGradient(
colors: [
Color(0xFFFD7F2C),
Color(0xFFFF6200),
Color(0xFFFD9346),
],
),
shadowColor: Gradients.backToFuture.colors.last
.withOpacity(0.25),
),
),
SizedBox(
height: 10.0,
),
Container(
child: GradientButton(
increaseHeightBy: 10.0,
increaseWidthBy: 200.0,
child: Text(
'Log In With Google',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
callback: () {},
//TODO: LOGIN KA CALLBACK JAYEGA YAHA PR
gradient: LinearGradient(
colors: [Colors.white, Colors.white]),
),
),
],
),
],
),
),
],
),
);
}
}
and the code of text field class
TextField buildTextField({
#required String labelText,
bool obscureText,
}) {
return TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(color: Colors.deepOrange),
),
labelText: labelText,
labelStyle:
TextStyle(fontWeight: FontWeight.bold, color: Colors.deepOrange),
),
keyboardType: TextInputType.emailAddress,
obscureText: obscureText,
);
}
As i am passing obscureText as true in the login page my app is crashing saying obsureText !=null enter image description here
i dont know to can i solve this as i am new to flutter i will be greatful enough to somebody helped me to solve this issue
You are getting that error because you are not passing the value for
bool obscureText,
Make sure to pass the value for obscureText from everywhere the buildTextField is called or set a default value for obscureText like this -
bool obscureText = false,
Please see the working code below :
import 'package:flutter/material.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
child: LogIn(),
),
),
);
}
}
class LogIn extends StatefulWidget {
const LogIn({Key key}) : super(key: key);
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
TextField buildTextField({
#required String labelText,
bool obscureText = false,
}) {
return TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(color: Colors.deepOrange),
),
labelText: labelText,
labelStyle: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.deepOrange),
),
keyboardType: TextInputType.emailAddress,
obscureText: obscureText,
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.fromLTRB(20.0, 150.0, 20.0, 0.0),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Welcome,',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
),
),
const Text(
'Log In to continue!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.grey,
),
),
const SizedBox(height: 70),
buildTextField(
labelText: 'Email',
),
const SizedBox(height: 30),
buildTextField(
labelText: 'Password',
obscureText: true,
),
const SizedBox(height: 10),
Container(
alignment: const Alignment(1.0, 0.0),
child: InkWell(
onTap: () {},
child: const Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
fontSize: 10.0,
),
),
),
),
const SizedBox(height: 70),
Container(
child: RaisedButton(
child: const Text(
'Log In',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
const SizedBox(
height: 10.0,
),
Container(
child: RaisedButton(
child: const Text(
'Log In With Google',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black),
),
onPressed: () {},
),
),
],
),
],
),
),
],
),
),
);
}
}
you should provide default value for obscureText (bool obscureText=false) in your buildTextField widget.
Related
I am making a bus app to learn more about flutter and dart language. So, i came across this problem with the navigation drawer where it doesn't go to the screen it's supposed to go to when I clicked on it. It just stays the same.
This is my code for the main screen.
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return MainScreen();
}
}
class MainScreen extends State<MyApp> {
final currentTime = DateTime.now();
final busStopController = TextEditingController();
//To customise the greeting according to the time
String greeting() {
var hour = DateTime.now().hour;
if (hour < 12) {
return 'Morning';
}
if (hour < 17) {
return 'Afternoon';
}
return 'Evening';
}
//Strings for user input and busStop
String name = '';
String busStop = '';
//Strings for different bus timings
String sb1timing = '';
String sb2timing = '';
String sb3timing = '';
String sb4timing = '';
//Different icon colors for bus capacity
final Color _iconColorEmpty = Colors.green;
final Color _iconColorHalf = Colors.orange;
final Color _iconColorFull = Colors.red;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.transparent,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'WaitLah! bus services',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20),
),
),
ListTile(
leading: const Icon(
Icons.directions_walk_outlined,
color: Colors.black,
),
title: const Text(
'Plan Your Journey',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlanJourneyScreen()));
},
),
And this is my code for the second screen (PlanJourneyScreen)
class PlanJourneyScreen extends StatelessWidget {
const PlanJourneyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
const Backgroundimage(),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text(
'Plan Your Journey s10194266d',
style: GoogleFonts.kalam(
textStyle: const TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 30,
),
Text(
'Please state your source and destination.',
textAlign: TextAlign.center,
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 17,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Source',
textAlign: TextAlign.left,
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Destination',
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
onTap: () {},
),
Container(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(90, 40)),
onPressed: () {},
child: Text(
'Calculate!',
style: GoogleFonts.montserrat(
textStyle: const TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
),
),
),
Container()
],
),
),
],
);
}
}
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => PlanJourneyScreen(),
),
),
In your PlanJourneyScreen() you return Stack please Wrap it with Scaffold, try below code its working well, refer navigation
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'WaitLah! bus services',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20),
),
),
ListTile(
leading: const Icon(
Icons.directions_walk_outlined,
color: Colors.black,
),
title: const Text(
'Plan Your Journey',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const PlanJourneyScreen()),
);
},
),
],
),
),
);
}
}
//PlanJourneyScreen Code
class PlanJourneyScreen extends StatelessWidget {
const PlanJourneyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text(
'Plan Your Journey s10194266d',
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 30,
),
Text(
'Please state your source and destination.',
textAlign: TextAlign.center,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Source',
textAlign: TextAlign.left,
),
),
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
child: Text(
'Destination',
),
),
TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(10.0)),
),
onTap: () {},
),
Container(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(90, 40)),
onPressed: () {},
child: Text(
'Calculate!',
),
),
),
Container()
],
),
),
],
),
);
}
}
I am building a Flutter application where I am trying to build simple login UI but having problem as shown in image below. One problem is the size of the email field and the password field is different and another is login button is being overflowed by 13-pixels? Also want to set the height underscore of Forget your password. How can It be solved? Thank you in advance.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Navigation Bar',
theme: ThemeData(
primaryColor: Color(0xFFC41A3B),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _isVisible = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: const [
Colors.blue,
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 36.0,
horizontal: 24.0,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 46.0,
fontWeight: FontWeight.w800,
),
),
SizedBox(
height: 10.0,
),
Text(
'Enter to the butiful world',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
],
),
),
),
Expanded(
flex: 2,
child: 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.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xffe73ded),
hintText: "E-mail",
prefixIcon: Icon(
Icons.email,
color: Colors.grey,
),
)),
SizedBox(
height: 20.0,
),
TextField(
obscureText: _isVisible ? false :true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
suffix: IconButton(
onPressed: () {
setState(() {
_isVisible = !_isVisible;
});
},
icon: Icon(
_isVisible ? Icons.visibility : Icons.visibility_off,
color: Colors.grey,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xffe73ded),
hintText: "Password",
prefixIcon: Icon(
Icons.lock_rounded,
color: Colors.grey,
),
)),
SizedBox(
height: 5.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: Text(
'Forgot your password',
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
),
],
),
SizedBox(
height: 20.0,
),
Container(
color: Colors.blue,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28),
),
),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0),
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
),
),
SizedBox( height: 2,),
RichText(
text: TextSpan(
text: 'Do you have an account?',
style: TextStyle(
color: Colors.black,
fontSize: 18,
),
children: [
TextSpan(
text: 'Register',
style: TextStyle(
color: Colors.blue,
fontSize: 18,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
),
),
),
],
),
),
),
);
}
}
The issue is you created a container with max height as the device.then used expanded widgets which are equally spaced. You can try increasing the flex value of the second expanded widget
Expanded(
flex: 3
)
Now the first and second expanded will be of ratio 2:3 which will give more space to the second widget
I am trying to create a scrollable sign up screen for when the keyboard pops up but my SingleChildScrollView widget doesn't seem to be working. I don't know whether this has to do with its placement in the stack or the inner column but help would be much appreciated. I've tried a ListView instead of a column, using the Expanded widget around the SingleChildScrollView but to no success.
Sign Up Screen
Sign Up Screen with Keyboard
An example to copy and run here.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SignUpScreen(),
);
}
}
class SignUpScreen extends StatefulWidget {
const SignUpScreen({Key? key}) : super(key: key);
#override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen> {
final _formKey = GlobalKey<FormState>();
bool _obscurePassword = true;
Color _obscureColor = Colors.grey;
InputDecoration textFormFieldDecoration = InputDecoration(
filled: true,
fillColor: const Color(0xFFF5F5F5),
prefixIcon: const Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Icon(
Icons.email,
color: Colors.blueAccent,
size: 26,
),
),
suffixIcon: null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: const BorderSide(color: Colors.white),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: const BorderSide(color: Colors.white),
),
hintText: 'E-mail',
hintStyle: const TextStyle(
fontFamily: 'OpenSans',
fontSize: 18,
),
);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
// Shows circular progress indicator while loading
body:
// A stack lays items over one another.
Stack(
children: [
//The SizedBox provides the colored rounded aesthetic card behind the login.
SizedBox(
height: MediaQuery.of(context).size.height * 0.7,
child: Container(
color: Colors.redAccent,
),
),
Form(
key: _formKey,
child: Column(
// Keeps things in the center vertically
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Builds App Logo
Row(
// Keeps things in the center horizontally.
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Heart',
style: TextStyle(
fontSize: 34,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'by AHG',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
const SizedBox(height: 30),
// Build sign up container card.
ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * 0.65,
width: MediaQuery.of(context).size.width * 0.85,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//Sign Up / Login Text
const Text(
'Sign Up',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
const SizedBox(height: 25),
// Email form field
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: textFormFieldDecoration.copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: Icon(
Icons.email,
color: Theme.of(context)
.colorScheme
.secondary,
size: 26,
),
),
hintText: 'E-mail'),
autocorrect: false,
),
const SizedBox(height: 13),
// Build password form field
TextFormField(
obscureText: _obscurePassword,
keyboardType: TextInputType.text,
decoration: textFormFieldDecoration.copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: Icon(
Icons.lock,
color: Theme.of(context)
.colorScheme
.secondary,
size: 26,
),
),
suffixIcon: Padding(
padding: const EdgeInsets.only(right: 25),
child: IconButton(
icon: const Icon(
Icons.remove_red_eye_rounded),
color: _obscureColor,
iconSize: 23,
onPressed: () {
setState(() {
_obscurePassword =
!_obscurePassword;
_obscureColor == Colors.grey
? _obscureColor =
Theme.of(context)
.colorScheme
.secondary
: _obscureColor = Colors.grey;
});
},
),
),
hintText: 'Password'),
autocorrect: false,
),
const SizedBox(height: 13),
// Build confirm password form field
TextFormField(
obscureText: _obscurePassword,
keyboardType: TextInputType.text,
decoration: textFormFieldDecoration.copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: Icon(
Icons.lock,
color: Theme.of(context)
.colorScheme
.secondary,
size: 26,
),
),
suffixIcon: Padding(
padding: const EdgeInsets.only(right: 25),
child: IconButton(
icon: const Icon(
Icons.remove_red_eye_rounded),
color: _obscureColor,
iconSize: 23,
onPressed: () {
setState(() {
_obscurePassword =
!_obscurePassword;
_obscureColor == Colors.grey
? _obscureColor =
Theme.of(context)
.colorScheme
.secondary
: _obscureColor = Colors.grey;
});
},
),
),
hintText: 'Confirm'),
autocorrect: false,
),
// Login Button
const SizedBox(
height: 30,
),
SizedBox(
height: 1.4 *
(MediaQuery.of(context).size.height / 20),
width: 5 *
(MediaQuery.of(context).size.width / 10),
child: ElevatedButton(
child: const Text('Sign Up'),
onPressed: _validateInputs,
),
),
],
),
),
),
),
),
//Sign Up Text
const SizedBox(
height: 20,
),
TextButton(
onPressed: () {},
child: RichText(
text: TextSpan(children: [
TextSpan(
text: 'Don\'t have an account?',
style: TextStyle(
color: Colors.black,
fontSize: MediaQuery.of(context).size.height / 40,
fontWeight: FontWeight.w400,
),
),
TextSpan(
text: ' Login',
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: MediaQuery.of(context).size.height / 40,
fontWeight: FontWeight.bold,
),
)
]),
),
),
],
),
)
],
),
),
);
}
void _validateInputs() {
if (_formKey.currentState?.validate() != null) {
final _validForm = _formKey.currentState!.validate();
if (_validForm) {
_formKey.currentState!.save();
}
}
}
}
Change resizeToAvoidBottomInset to true
put SingleChildScrollView before Stack
Like this
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(...)
Put the SingleChildScrollView as the Scaffold's body.
Scaffold(
resizeToAvoidBottomInset: true,
body:
SingleChildScrollView(child: ...)
)
Was building UI with TextField() in Flutter, I defined the controller in state and tried to use that defined emailController and passwordController in TextField() but it says "Invalid constant value.". I tried to resolve it but didn't work. Here is the code for login_screen.dart
import 'package:flutter/material.dart';
import 'package:rider_app/routes/routing_constants.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
#override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final _validate = false;
// #override
// void dispose() {
// emailController.dispose();
// passwordController.dispose();
// super.dispose();
// }
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(
height: 40.0,
),
const Center(
child: Image(
image: AssetImage("lib/assets/images/logo.png"),
width: 200.0,
height: 200.0,
alignment: Alignment.center,
)),
const SizedBox(
height: 2.0,
),
const Text(
"Login as a Rider",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25.0, fontFamily: "Brand Bold"),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Column(
children: [
const SizedBox(
height: 10.0,
),
const TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(
fontSize: 15.0,
),
hintText: "Email address",
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey),
// focusedBorder: OutlineInputBorder(
// borderSide:
// BorderSide(width: 1.0, color: Colors.blueAccent),
// ),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0),
// ),
),
style: TextStyle(fontSize: 15.0),
controller: emailController,
),
const SizedBox(
height: 10.0,
),
const TextField(
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "Password",
labelStyle: TextStyle(fontSize: 15.0),
hintText: "Your password",
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey),
// focusedBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0, color: Colors.blueAccent),
),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0)
// )
// ),
obscureText: true,
style: TextStyle(fontSize: 15.0),
),
const SizedBox(
height: 45.0,
),
ElevatedButton(
onPressed: () {
debugPrint("Logged In");
Navigator.pushNamed(context, homeScreen);
},
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 23, vertical: 11),
child: Text(
'Login',
style: TextStyle(
fontSize: 18,
fontFamily: "Brand Bold",
fontWeight: FontWeight.w500),
),
),
),
],
),
),
FlatButton(
onPressed: () {
Navigator.pushNamed(context, signUpScreen);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Don't have Account?",
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: "Brand-Regular"),
),
Text(
" Register Here.",
style: TextStyle(
fontFamily: "Brand-Regular",
fontWeight: FontWeight.w600),
)
],
))
],
),
),
);
}
}
The controller defination is okay but as I try to assign controller to the TextField() controller, the error is thrown. Screenshot attached herewith:
Have any idea ?? let me know, even suggetion is appreciated. Thank you!
GitHub Repo: Project Link Github
Remove the const before TextField, that should resolve the error.
Remove const keywords at the beginning of TextField widgets.
Try removing the const modifier from the TextField.
remove const from const TextField and you are good to go.
Your code will be like this:
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(
fontSize: 15.0,
),
Try removing the "const" before TextField, (or one of the top widgets in the widget tree), that should resolve the error.
I didn't make use of Expanded widget but I don't know why I keep getting for this error.
Uncaught exception by widget library, Incorrect use of ParentDataWidget in four places I can't get where exactly the error is coming from. though it doesn't stop me from using the application but I feel it should be fixed. please can anyone help me?
This is my code below:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:erg_app/Anchors.dart';
import 'package:erg_app/api/api.dart';
import 'package:shared_preferences/shared_preferences.dart';
class LogIn extends StatefulWidget {
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
bool _isLoading = false;
TextEditingController mailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
ScaffoldState scaffoldState;
_showMsg() {
final snackBar = SnackBar(
content: Text(
'Invalid Username or Password',
style: (TextStyle(fontSize: 18)),
),
backgroundColor: Colors.amber[900],
);
_scaffoldKey.currentState.showSnackBar(snackBar);
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: Scaffold(
key: _scaffoldKey,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 0.4, 0.9],
colors: [
Color(0XFF4CAF50),
Color(0xFF388E3C),
Color(0xFF075009),
],
),
),
child: ListView(
children: <Widget>[
/////////// background///////////
SizedBox(height: 30),
new Container(
width: 100.00,
height: 100.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: AssetImage('assets/images/icon.png'),
fit: BoxFit.contain,
),
)),
Column(
children: <Widget>[
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Positioned(
left: 30,
top: 100,
child: Container(
margin: EdgeInsets.only(top: 50),
child: Center(
child: Text(
"Welcome",
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontWeight: FontWeight.bold),
),
),
),
),
SizedBox(height: 30),
Card(
elevation: 4.0,
color: Colors.white,
margin: EdgeInsets.only(left: 20, right: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(10.0),
// child: form(key: _formKey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
///////////// Email//////////////
TextField(
style: TextStyle(color: Color(0xFF000000)),
controller: mailController,
cursorColor: Color(0xFF9b9b9b),
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.account_circle,
color: Colors.grey,
),
hintText: "Username",
hintStyle: TextStyle(
color: Color(0xFF9b9b9b),
fontSize: 15,
fontWeight: FontWeight.normal),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green)),
),
),
/////////////// password////////////////////
TextField(
style: TextStyle(color: Color(0xFF000000)),
cursorColor: Color(0xFF9b9b9b),
controller: passwordController,
keyboardType: TextInputType.number,
obscureText: true,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.vpn_key,
color: Colors.grey,
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green)),
hintText: "Password",
hintStyle: TextStyle(
color: Color(0xFF9b9b9b),
fontSize: 15,
fontWeight: FontWeight.normal),
),
),
///////////// LogIn Botton///////////////////
Padding(
padding: const EdgeInsets.all(10.0),
child: FlatButton(
child: Padding(
padding: EdgeInsets.only(
top: 8,
bottom: 8,
left: 10,
right: 10),
child: Text(
_isLoading ? 'Loging...' : 'Login',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
decoration: TextDecoration.none,
fontWeight: FontWeight.normal,
),
),
),
color: Colors.green,
disabledColor: Colors.grey,
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(20.0)),
onPressed: _isLoading ? null : _login,
),
),
],
),
),
),
//////////// new account///////////////
Padding(
padding: const EdgeInsets.only(top: 20),
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => LogIn()));
},
child: Text(
'Forgot Your Password?',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
decoration: TextDecoration.none,
fontWeight: FontWeight.normal,
),
),
),
),
],
),
),
),
],
)
],
),
),
));
// Gesture ends here
}
}
this is the picture of the error message:
You have a Positioned widget inside Column widgets in different parts of your code.
A Positioned widget must be a descendant of a Stack, and the path from
the Positioned widget to its enclosing Stack must contain only
StatelessWidgets or StatefulWidgets
I pasted the above from Flutter docs and it says that a Positioned must be descendant of a Stack i.e you cannot have a position inside other Widgets aside from a Stack widget.
You should remove the Positioned widgets from your code. or wrap them with a Stack widget
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:erg_app/Anchors.dart';
import 'package:erg_app/api/api.dart';
import 'package:shared_preferences/shared_preferences.dart';
class LogIn extends StatefulWidget {
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
bool _isLoading = false;
TextEditingController mailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
ScaffoldState scaffoldState;
_showMsg() {
final snackBar = SnackBar(
content: Text(
'Invalid Username or Password',
style: (TextStyle(fontSize: 18)),
),
backgroundColor: Colors.amber[900],
);
_scaffoldKey.currentState.showSnackBar(snackBar);
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: Scaffold(
key: _scaffoldKey,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 0.4, 0.9],
colors: [
Color(0XFF4CAF50),
Color(0xFF388E3C),
Color(0xFF075009),
],
),
),
child: ListView(
children: <Widget>[
/////////// background///////////
SizedBox(height: 30),
new Container(
width: 100.00,
height: 100.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: AssetImage('assets/images/icon.png'),
fit: BoxFit.contain,
),
)),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 50),
child: Center(
child: Text(
"Welcome",
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 30),
Card(
elevation: 4.0,
color: Colors.white,
margin: EdgeInsets.only(left: 20, right: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(10.0),
// child: form(key: _formKey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
///////////// Email//////////////
TextField(
style: TextStyle(color: Color(0xFF000000)),
controller: mailController,
cursorColor: Color(0xFF9b9b9b),
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.account_circle,
color: Colors.grey,
),
hintText: "Username",
hintStyle: TextStyle(
color: Color(0xFF9b9b9b),
fontSize: 15,
fontWeight: FontWeight.normal),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green)),
),
),
/////////////// password////////////////////
TextField(
style: TextStyle(color: Color(0xFF000000)),
cursorColor: Color(0xFF9b9b9b),
controller: passwordController,
keyboardType: TextInputType.number,
obscureText: true,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.vpn_key,
color: Colors.grey,
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green)),
hintText: "Password",
hintStyle: TextStyle(
color: Color(0xFF9b9b9b),
fontSize: 15,
fontWeight: FontWeight.normal),
),
),
///////////// LogIn Botton///////////////////
Padding(
padding: const EdgeInsets.all(10.0),
child: FlatButton(
child: Padding(
padding: EdgeInsets.only(
top: 8,
bottom: 8,
left: 10,
right: 10),
child: Text(
_isLoading ? 'Loging...' : 'Login',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
decoration: TextDecoration.none,
fontWeight: FontWeight.normal,
),
),
),
color: Colors.green,
disabledColor: Colors.grey,
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(20.0)),
onPressed: _isLoading ? null : _login,
),
),
],
),
),
),
//////////// new account///////////////
Padding(
padding: const EdgeInsets.only(top: 20),
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => LogIn()));
},
child: Text(
'Forgot Your Password?',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
decoration: TextDecoration.none,
fontWeight: FontWeight.normal,
),
),
),
),
],
),
),
],
)
],
),
),
));
// Gesture ends here
}
}