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
- Use fvm to change flutter version in vscode, but the flutter version not work?
- how to get sha1 of android app in Vs code
- Flutter ElevatedButton shape - rectangle
- YouTube video in video_player package
- Flutter bloc migration due to mapEventToState is not working
- What's the difference between double.infinity and double.maxFinite in Dart?
- Flutter Web not building because of Firebase Analytics and Firebase Remote Config
- Flutter: change border color for OutlinedButton
- Change TextField cursor bottom indicator in Flutter
- Error: Plugin [id: 'com.android.application', version: '8.7.0', apply: false] was not found in any of the following sources
- BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 61 on Apple Arm
- Getting idToken 'null' when using google_sign_in in Flutter
- Playstore error: App Bundle contains native code, and you've not uploaded debug symbols
- How to solve "Unable to find git in your PATH" on Flutter?
- How to change OutlinedButton border color?
- Not creating the .g.dart class in Flutter(Dart)
- Flutter: Get passed arguments from Navigator in Widget's state's initState
- CustomScrollView slivers with contents in SliverFillRemaining not scrolling
- In flutter, how to set spacing between row items inside of a column?
- How to write a double back button pressed to exit app using flutter
- How to disable the text editing in DropdownMenu<T> class?
- Flutter 3.24.3 problem with Android Studio Ladybug | 2024.2.1
- Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl. [Flutter]
- Flutter Google play services
- My Flutter PopScope is not working anymore
- flutter modal bottom sheet above navigation bar
- error: Target release_unpack_ios failed: Exception: Failed to codesign
- How to customize notification sound in Awesome Notification
- Flutter File_picker MissingPluginException
- Undefined symbol: __swift_FORCE_LOAD_ on Flutter iOS