Darpal
Reputation: 362
How can I make my column scrollable in Flutter?
I tried using new Listview but don't know what was going wrong in it - it always used to show some error like "expected 1 argument, but entered 0" even if I wrote shrinkwrap to true.
Removing Column also didn't work for me.
And I tried searching for some solutions on the internet, as I am still learning this language. I am not able to figure out the correct way to write it.
import 'package:flutter/material.dart';
class SignupPage extends StatefulWidget {
@override
_SignupPageState createState() => _SignupPageState();
}
class _SignupPageState extends State<SignupPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(16.0, 100.0, 0.0, 0.0),
child: Text(
'Signup',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(260.0, 105.0, 0.0, 0.0),
child: Text(
'.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.green),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'Full Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Email Address ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Confirm Email Address ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Phone Number ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 50.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.green,
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
)),
SizedBox(height: 20.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Text('Go Back',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
),
),
),
),
],
)),
)
]));
}
}
Upvotes: 0
Views: 3692
Answers (1)
R. C. Howell
Reputation: 1081
It looks like you have some issues with parentheses mismatch. Depending on your editor, there are many great Dart & Flutter plugins which can help. I pasted your code into a new Flutter project, removed the rogue parenthesis, and change the Scaffold body to ListView. It yields the behavior you ask for. Below is this code.
import 'package:flutter/material.dart';
class SignupPage extends StatefulWidget {
@override
_SignupPageState createState() => _SignupPageState();
}
class _SignupPageState extends State<SignupPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: ListView(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(16.0, 100.0, 0.0, 0.0),
child: Text(
'Signup',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(260.0, 105.0, 0.0, 0.0),
child: Text(
'.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.green),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'Full Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Email Address ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Confirm Email Address ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Phone Number ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 50.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.green,
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
)
),
SizedBox(height: 20.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Text('Go Back',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
),
),
),
),
],
)
),
]
)
);
}
}
Going forward, I would suggest using drtfmt to help with code format consistency. I noticed that indentations were inconsistent as well as the use of trailing commas was inconsistent. As you are learning the language, using extensions, linters, and formatters will really help! Best of luck!
Upvotes: 5
Related Questions
- Flutter - Making Scrollable child inside a Column with List view Builder
- Scrollable Column and ListView.builder
- Scrollable Container inside a Column
- Flutter - How to make a column screen scrollable
- How to use Listview.builder in Column and make them scrollable horizontally in flutter?
- Column elements are not scrollable in flutter
- ListView.builder is not scrolling inside column
- How to make ListView Scrollable in flutter
- How To Make The Column Scrollable In Flutter Web?
- Make a column scrollable in flutter