Not able to make Scrollable - flutter

Question

I am new in flutter and I try to make scrollable UI.
I try to add Expanded widgets, ListViews Widgets , SingleChildScrollView widgets but didn't get the expected result.
Also, I try to wrap the stack inside Container and then inside SingleChildScrollView. But it throws error.
I tried many aspects to make my homepage scrollable. But, I got errors (Mentioned below)
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#e1279 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: _RenderColoredBox#89cc6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#9505f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 549 pos 12: 'child.hasSize': is not true.
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
new TextEditingController().clear();
},
child: Stack(
children: <Widget>[
Container(
height: 200,
child: TopBar(),
),
Container(
margin: EdgeInsets.only(top: 55),
child: Text(
"PriceTrackers",
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w900,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
ListView(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),
child: Form(
key: _formKey,
child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.store),
Text(
"Supported Store",
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
),
Image.asset(
"Assets/img/amazon.png",
width: 20,
),
Image.asset(
"Assets/img/flipkart.png",
width: 20,
),
Image.asset(
"Assets/img/ajio.png",
width: 20,
),
Image.asset(
"Assets/img/snapdeal.png",
width: 20,
),
Image.asset(
"Assets/img/ss.jpg",
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// boxShadow: [
// BoxShadow(color: Colors.white, spreadRadius: 3),
// ],
),
),
// Add TextFormFields and RaisedButton here.
TextFormField(
controller: _controller,
enableInteractiveSelection: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
hintText: "Enter Product URL",
suffixIcon: Icon(Icons.search),
),
// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },
showCursor: true,
autofocus: false,
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},
),
RaisedButton.icon(
icon: Icon(
Icons.search,
color: Colors.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
elevation: 20.0,
onPressed: () async {
// Validate returns true if the form is valid, otherwise false.
if (_formKey.currentState.validate()) {
setState(() {
createAlbum(_controller.text).then((value) => {
Navigator.push(
context,
EnterExitRoute(
exitPage: HomePage(),
enterPage: LineChartSample2(
getData: value)))
});
});
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
'Processing Data',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.green,
));
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => LineChartSample2()),
// );
}
},
label: Text(
'View Price Graph',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blue[200],
blurRadius: 25.0, // soften the shadow
spreadRadius: 5.0, //extend the shadow
offset: Offset(
15.0, // Move to right 10 horizontally
15.0, // Move to bottom 10 Vertically
),
)
],
),
child: Row(
children: <Widget>[
Container(
width: 130,
height: 130,
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
child: FadeInImage(
fit: BoxFit.scaleDown,
// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: AssetImage("Assets/img/bag.png"),
image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
),
),
Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(0, 20, 10, 0),
child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.black),
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: <Widget>[
OutlineButton.icon(
onPressed: () => {},
icon: Icon(Icons.shopping_basket),
label: Text("But Now #28939")),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Avg Price : 7,98,374",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w900,
),
),
Text(
"Avg Price :34,43,343",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon: Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(
20, 5, 20, 5),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
label: Text(
"Show Price Graph",
style: TextStyle(fontSize: 15.0),
),
)
],
)),
],
),
))
],
),
),
])),
),
],
),
Container(
margin: EdgeInsets.only(top: 650),
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
));

Answer 1

You can copy paste run full code below
Step 1: Use LayoutBuilder and ConstrainedBox
return LayoutBuilder(builder: (context, constraints) {
...
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),
child: Stack(
Step 2: Change ListView to Column
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Column(
Step 3: GridView use shrinkWrap: true
working demo
full code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
TextEditingController().clear();
},
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),
child: Stack(
children: <Widget>[
Container(
height: 200,
child: Text("TopBar()"),
),
Container(
margin: EdgeInsets.only(top: 55),
child: Text(
"PriceTrackers",
style: TextStyle(
color: Colors.black,
fontSize: 50.0,
fontWeight: FontWeight.w900,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),
child: Form(
//key: _formKey,
child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.store),
Text(
"Supported Store",
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
),
Image.network(
'https://picsum.photos/250?image=9',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=10',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=11',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=12',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=13',
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// boxShadow: [
// BoxShadow(color: Colors.white, spreadRadius: 3),
// ],
),
),
// Add TextFormFields and RaisedButton here.
TextFormField(
//controller: _controller,
enableInteractiveSelection: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
hintText: "Enter Product URL",
suffixIcon: Icon(Icons.search),
),
// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },
showCursor: true,
autofocus: false,
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},
),
RaisedButton.icon(
icon: Icon(
Icons.search,
color: Colors.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
elevation: 20.0,
onPressed: () async {
// Validate returns true if the form is valid, otherwise false.
},
label: Text(
'View Price Graph',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blue[200],
blurRadius: 25.0,
// soften the shadow
spreadRadius: 5.0,
//extend the shadow
offset: Offset(
15.0,
// Move to right 10 horizontally
15.0, // Move to bottom 10 Vertically
),
)
],
),
child: Row(
children: <Widget>[
Container(
width: 130,
height: 130,
padding:
EdgeInsets.fromLTRB(5, 10, 5, 10),
child: FadeInImage(
fit: BoxFit.scaleDown,
// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: NetworkImage(
"https://picsum.photos/250?image=9"),
image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
),
),
Expanded(
child: Container(
padding:
EdgeInsets.fromLTRB(0, 20, 10, 0),
child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.black),
),
Container(
margin: EdgeInsets.fromLTRB(
0, 10, 0, 0),
child: Column(
children: <Widget>[
OutlineButton.icon(
onPressed: () => {},
icon: Icon(Icons
.shopping_basket),
label: Text(
"But Now #28939")),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Text(
"Avg Price : 7,98,374",
style: TextStyle(
fontSize: 10,
fontWeight:
FontWeight.w900,
),
),
Text(
"Avg Price :34,43,343",
style: TextStyle(
fontSize: 10,
fontWeight:
FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon:
Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor:
Colors.black,
padding:
EdgeInsets.fromLTRB(
20, 5, 20, 5),
splashColor:
Colors.blueAccent,
onPressed: () {
/*...*/
},
label: Text(
"Show Price Graph",
style: TextStyle(
fontSize: 15.0),
),
)
],
)),
],
),
))
],
),
),
])),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 650),
child: GridView.count(
shrinkWrap: true,
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text(
"He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
),
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}

Answer 2

You need to remove height from container.
SingleChildScrollView(
child: Container(
child: Stack(
children: <Widget>[
])))