I'm trying to make a login screen inside my flutter app. But for some reason i'm getting an warning (bottom overflowed by 30 pixels) and i don't know why this is happening.
I tried:
- Wrapping my widgets to a SingleChildScrollView
- Using resizeToAvoidBottomInset: false
But none of these solutions worked.
My Login Screen:
import 'package:PrivMessage/Screens/reset_password.dart';
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
String email = "";
String password = "";
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF263238),
body: SafeArea(
child: Center(
child: Column(
children: [
Row(
children: [
Container(
margin: const EdgeInsets.only(top: 12),
child: IconButton(
icon: Image.asset("assets/images/back_icon.png", height: 30, width: 30,),
iconSize: 40,
onPressed: () {
// Go to previews screen
Navigator.pop(context);
},
),
),
Container(
margin: const EdgeInsets.only(left: 8, top: 12),
child: const Text("Sign in", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 23),),
),
const Spacer()
],
),
const SizedBox(height: 30),
Container(
margin: const EdgeInsets.only(top: 30),
child: const Text("Sign in to continue",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 35),
),
),
Container(
margin: const EdgeInsets.only(top: 20),
child: const Text("Sign in to your account below to\ncontinue and start chatting with safety.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontSize: 17),
),
),
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)
),
margin: const EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {
});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Email address"),
),
),
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)
),
margin: const EdgeInsets.only(top: 20.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {
});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Password"),
),
),
Row(
children: [
const Spacer(),
Container(
margin: const EdgeInsets.only(right: 40),
child: TextButton(
onPressed: () {
Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: const ResetPasswordScreen()));
},
child: const Text("Forgot password?")
),
)
],
),
SizedBox(
width: 1000,
height: 50,
child: Container(
margin: const EdgeInsets.only(left: 40, right: 40),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
), primary: Colors.indigo),
child: const Text("Sign in", style: TextStyle(fontSize: 20)),
),
),
),
const Spacer(),
const Spacer(),
const Spacer(),
const SizedBox(height: 20),
const Text("Made by George Sepetadelis", style: TextStyle(color: Colors.grey, fontSize: 18)),
const SizedBox(height: 20)
],
),
),
),
);
}
}
CodePudding user response：
You can try out this.
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
String email = "";
String password = "";
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF263238),
body: Center(
child: ListView(
children: [
Row(
children: [
Container(
margin: const EdgeInsets.only(top: 12),
child: IconButton(
icon: Image.asset(
"assets/images/back_icon.png",
height: 30,
width: 30,
),
iconSize: 40,
onPressed: () {
// Go to previews screen
Navigator.pop(context);
},
),
),
Container(
margin: const EdgeInsets.only(left: 8, top: 12),
child: const Text(
"Sign in",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 23),
),
),
const Spacer()
],
),
const SizedBox(height: 30),
Container(
margin: const EdgeInsets.only(top: 30),
child: const Text(
"Sign in to continue",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 35),
),
),
Container(
margin: const EdgeInsets.only(top: 20),
child: const Text(
"Sign in to your account below to\ncontinue and start chatting with safety.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontSize: 17),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)),
margin: const EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Email address"),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)),
margin: const EdgeInsets.only(top: 20.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Password"),
),
),
Row(
children: [
const Spacer(),
Container(
margin: const EdgeInsets.only(right: 40),
child: TextButton(
onPressed: () {
// Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: const ResetPasswordScreen()));
},
child: const Text("Forgot password?")),
)
],
),
SizedBox(
width: 1000,
height: 50,
child: Container(
margin: const EdgeInsets.only(left: 40, right: 40),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
primary: Colors.indigo),
child: const Text("Sign in", style: TextStyle(fontSize: 20)),
),
),
),
const Spacer(),
const Spacer(),
const Spacer(),
const SizedBox(height: 20),
const Center(
child: Text("Made by George Sepetadelis",
style: TextStyle(color: Colors.grey, fontSize: 18)),
),
const SizedBox(height: 20)
],
)),
);
}
}
CodePudding user response：
Try swipe SafeArea with Scaffold , and Use SingleChildScrollView above main Column.
CodePudding user response：
Add a container of height 600 and wrap it with a SingleChildScrollView and add scrollbars if desired
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body:SingleChildScrollView(
child: Container(height:600,child:
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
margin: const EdgeInsets.only(top: 12),
child: IconButton(
icon: Image.asset("assets/images/back_icon.png", height: 30, width: 30,),
iconSize: 40,
onPressed: () {
// Go to previews screen
Navigator.pop(context);
},
),
),
Container(
margin: const EdgeInsets.only(left: 8, top: 12),
child: const Text("Sign in", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 23),),
),
const Spacer()
],
),
const SizedBox(height: 30),
Container(
margin: const EdgeInsets.only(top: 30),
child: const Text("Sign in to continue",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 35),
),
),
Container(
margin: const EdgeInsets.only(top: 20),
child: const Text("Sign in to your account below to\ncontinue and start chatting with safety.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontSize: 17),
),
),
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)
),
margin: const EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {
});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Email address"),
),
),
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
color: const Color(0xFFECECEC)
),
margin: const EdgeInsets.only(top: 20.0, left: 40.0, right: 40.0),
child: TextFormField(
onChanged: (newText) {
setState(() {
});
},
cursorColor: Colors.black,
decoration: const InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Password"),
),
),
Row(
children: [
const Spacer(),
Container(
margin: const EdgeInsets.only(right: 40),
child: TextButton(
onPressed: () {
},
child: const Text("Forgot password?")
),
)
],
),
SizedBox(
width: 1000,
height: 50,
child: Container(
margin: const EdgeInsets.only(left: 40, right: 40),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
), primary: Colors.indigo),
child: const Text("Sign in", style: TextStyle(fontSize: 20)),
),
),
),
const Spacer(),
const Spacer(),
const Spacer(),
const SizedBox(height: 20),
const Text("Made by xxx", style: TextStyle(color: Colors.grey, fontSize: 18)),
const SizedBox(height: 20)
],
), // This trailing comma makes auto-formatting nicer for build methods.
)));
}
}