How to Expand Single Child Scroll View in Flutter
I am attempting to expand a single child scroll view, but not having any luck. I have tried expanding the single child scroll view, wrapping in a container, and / or expanding children widgets and either I get an error or it does not expand. I am not sure what I am doing wrong, or how to expand a single child scroll view.
The ideal result would be in the image shown that the white container expand to the bottom of the device, but the result i am currently getting is leaving a gap and showing the purple background.
Current Result:
Code:
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: cPrimaryColor,
body: SafeArea(
child: Container(
height: double.infinity,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
VerticalWidetSpacer(height: 40.0),
Padding(
padding: kLoginMargin,
child: Text('Create Better',
style: TextStyle(
color: Colors.white,
fontSize: tHeader,
fontWeight: FontWeight.bold
),),
),
VerticalWidetSpacer(height: 20.0),
Padding(
padding: kLoginMargin,
child: Text('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum',
style: TextStyle(
fontSize: tBody,
color: Colors.white
),),
),
VerticalWidetSpacer(height: 60.0),
Column(
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0)
),
),
child: Column(
children: [
VerticalWidetSpacer(height: 30.0),
Text('Sign in',
style: TextStyle(
fontSize: tBodyHeader,
color: Colors.black,
fontWeight: FontWeight.bold
),),
VerticalWidetSpacer(height: 40.0,),
LoginTextField(
fieldLabel: 'Email',
prefixIcon: Icon(FontAwesomeIcons.envelope),
hintText: 'example@gmail.com',
),
VerticalWidetSpacer(height: 20.0),
LoginTextField(
fieldLabel: 'Password',
suffixIcon: Icon(FontAwesomeIcons.eyeSlash),
hintText: '●●●●●●●●',
),
VerticalWidetSpacer(height: 20.0),
LoginButton(),
NewTextButton(
buttonText: 'Forgot Password',
onPressed: () {
},
textColor: Color(0xFF6E6E6E),
textFontSize: 18.0,
),
VerticalWidetSpacer(height: 40.0),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
NewTextButton(
buttonText: 'Create a new account',
onPressed: () {
},
textColor: cButtonColor,
textFontSize: 18.0,
useFontWeight: true,
fontWeight: FontWeight.bold,
)
],
)
],
),
),
],
)
],
),
),
),
),
);
}
}
Solution
import 'package:flutter/material.dart';
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.purple,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Text('Create Better',
style: TextStyle(
color: Colors.white,
fontSize: 38,
fontWeight: FontWeight.bold
),),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Text(
'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum',
style: TextStyle(
fontSize: 18,
color: Colors.white
),
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 25.0)),
Expanded(
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0)
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
const Text(
'Sign in',
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.bold
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
const Text(
"Email",
style: TextStyle(
fontSize: 18.0,
color: Colors.black
),
),
TextFormField(
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(10),
hintText: "Example.mail.com",
hintStyle: TextStyle(
color: Colors.black26,
fontSize: 16.0,
fontStyle: FontStyle.italic,
),
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
const Text(
"Password",
style: TextStyle(
fontSize: 18.0,
color: Colors.black
),
),
TextFormField(
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(10),
hintText: "",
hintStyle: TextStyle(
color: Colors.black26,
fontSize: 16.0,
fontStyle: FontStyle.italic,
),
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
MaterialButton(
onPressed: () {
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"LOGIN",
style: TextStyle(
color: Colors.white,
),
),
],
),
color: Colors.black,
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),
const Center(child: Text("Forgot Password")),
const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
const Spacer(),
const Center(child: Text("Create new account")),
const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
],
),
),
),
)
],
),
),
);
}
}
try this, should look like this, still don't know why you use SingleChildScrollView
- Flutter error: Execution failed for task ':app:compileDebugJavaWithJavac'
- Children that overflow their parents don't receive tap detection
- Flutter auto fill Assists suggestions not working
- Convert a String to enum value in Dart
- How to use the flutter native splash screen
- Where is flutter.compileSdkVersion?
- Execution failed for task ':app:checkDebugDuplicateClasses'. due to Duplicate class com.mapbox.android.core.permissions.PermissionsListener
- Why does Flutter fail to compile as soon as any package is added to the pubspec.yaml in Android Studio?
- How to check the flutter version of a project
- Flutter - Unhandled Exception: FormatException: Unexpected character (at character 1) | Instance of Response
- Android Studio device list stuck on loading
- The image I tried to display via Flutter NetworkImage is not displayed correctly
- How to load Flutter assets in Android
- App must target Android 14 (API level 34) or higher is showing even after update to API level 34
- How to collapse the ExpansionTile on button click? - Flutter
- Flutter: Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized
- Flutter Firebase Google Sign In not working. Stops after account selection
- How to create a 3D house in Flutter with rotation, highlighting, and control?
- Flutter build error for the first time :Could not open settings remapped class cache for 7yvt6la2007dno98lt3rzbguf
- ModalBottomSheet with images from the gallery
- Create a page transition animation from a DraggableScrollableSheet
- Flutter/Dart: Customize Bottom Navigation Bar height
- How Do I Use KeyCloak in Flutter
- Flutter Solve: 'Offset is outside the bounds of the DataView' error only on Firebase Hosting
- Stripe terminal Wisepad 3 reader not get detected in android Flutter
- Flutter z-index in Column
- How to remove trailing zeros using Dart
- Opening Location Permission from the inside of App flutter
- Dart/Flutter check if value is an integer/whole number
- Could not find package "flutter_native_splash". Did you forget to add a dependency?