flutterdarterror-handlingflutter-layout
Getting Error on ScrollView Flutter Whenever i tried to click on text-filed
I am making a simple Login Page where I am getting error of bottom overflow whenever i clicked on text-filed
I tried to Implement SingleChildScrollView but still getting error.I also tried ListView to overcome this but the stack-trace error is showing the relevant error caused by sometime Column or sometimes Scaffold Thanks in Advance
Here is my login.dart file
class LoginScreen extends StatelessWidget {
static const rout = '/login-screen';
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: const Color.fromRGBO(255, 243, 18, 3),
body: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 90),
child: Image.asset('assets/images/Logo.png'),
),
// const SizedBox(
// height: 40,
// ),
const SafeArea(
child: Padding(
padding: EdgeInsets.only(left: 3, right: 250, top: 10),
child: Text(
"Login",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 40),
// textAlign: TextAlign.center,
),
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 200, top: 1),
child: Text(
"Please Login to continue",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
fontSize: 15),
// textAlign: TextAlign.center,
),
),
const SizedBox(
height: 10,
),
const Card(
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: TextField(
obscureText: false,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.black26,
),
hintText: 'Email-Address',
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
const SizedBox(
height: 10,
),
const Card(
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: TextField(
obscureText: true,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.password, color: Colors.black26),
hintText: "Password",
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
const SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () => {},
style: ElevatedButton.styleFrom(
// backgroundColor: Color.fromARGB(255, 246, 214, 4)),
backgroundColor: Colors.white),
child: const Text(
'Login',
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.normal,
),
),
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.only(bottom: 20),
child: Text(
"Don't have an account?",
style: TextStyle(color: Colors.black, fontSize: 18),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: TextButton(
onPressed: () => {},
child: const Text(
"Sign Up",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
)),
)
],
)
]),
));
}
}
Solution
Use GlobalKey to make custom spacer for SingleChildScrollView like this:
class TestWidget extends StatefulWidget {
const TestWidget({Key? key}) : super(key: key);
@override
State<TestWidget> createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget> {
GlobalKey topWidgetKey = GlobalKey();
GlobalKey bottomWidgetKey = GlobalKey();
double topWidgetHeight = 0.0;
double bottomWidgetHeight = 0.0;
double spacer = 0.0;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
final _topWidgetKeyContext = topWidgetKey.currentContext;
if (_topWidgetKeyContext != null) {
final box = _topWidgetKeyContext.findRenderObject() as RenderBox;
topWidgetHeight = box.size.height;
}
final _bottomKeyContext = bottomWidgetKey.currentContext;
if (_bottomKeyContext != null) {
final box = _bottomKeyContext.findRenderObject() as RenderBox;
bottomWidgetHeight = box.size.height;
}
spacer = MediaQuery.of(context).size.height -
AppBar().preferredSize.height -
topWidgetHeight -
bottomWidgetHeight -
MediaQuery.of(context).viewPadding.top -
MediaQuery.of(context).viewPadding.bottom;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.purple[50],
appBar: AppBar(
title: Text('fist'),
),
body: SingleChildScrollView(
child: Column(children: <Widget>[
Column(
key: topWidgetKey,
children: [
Padding(padding: EdgeInsets.only(top: 90), child: Container()
// Image.asset('assets/images/Logo.png'),
),
// const SizedBox(
// height: 40,
// ),
SafeArea(
child: Padding(
padding: EdgeInsets.only(left: 3, right: 250, top: 10),
child: Text(
"Login",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 40),
// textAlign: TextAlign.center,
),
),
),
Padding(
padding: EdgeInsets.only(left: 20, right: 200, top: 1),
child: Text(
"Please Login to continue",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
fontSize: 15),
// textAlign: TextAlign.center,
),
),
SizedBox(
height: 10,
),
Card(
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: TextField(
obscureText: false,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.black26,
),
hintText: 'Email-Address',
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
SizedBox(
height: 10,
),
Card(
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: TextField(
obscureText: true,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.password, color: Colors.black26),
hintText: "Password",
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () => {},
// style: ElevatedButton.styleFrom(
// // backgroundColor: Color.fromARGB(255, 246, 214, 4)),
// backgroundColor: Colors.white),
child: Text(
'Login',
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.normal,
),
),
),
],
),
SizedBox(
height: spacer < 24 ? 24 : spacer,
),
Padding(
key: bottomWidgetKey,
padding: EdgeInsets.only(bottom: 20),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: "Don't have an account?",
style: TextStyle(color: Colors.black, fontSize: 18)),
TextSpan(
text: "Sign Up",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()..onTap = () {}),
],
),
),
),
]),
),
);
}
}
