Create 3 row columns with horizontal scroll in flutter - dart

Question

UPDATE: I keep getting an error when i try and use a listView pretty much i need 3 list view on 3 layers of columns and each has a horizontal scrollable list view
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.red,),
],
)
);
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.blue,),
],
)
);
Widget horizontalList3 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.blue,),
],
)
);
return new Scaffold(
appBar: new AppBar(
title: new Text("Activity"),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
horizontalList3,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
So pretty much this should work but i keep getting a mediaquery error and have no clue what i am missing or what's causing the error

Answer 1

When you are using a ListView inside another ListView the first one should have a specific size
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200, //<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.red,
),
],
));
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200,//<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.blue,
),
],
));
Widget horizontalList3 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200,//<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.blue,
),
],
));
return new Scaffold(
appBar: new AppBar(
title: new Text("Activity"),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
horizontalList3,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Answer 2

Your error says MediaQuery.of() was called on a context that does not contain a MediaQuery
It's Because You are using Scaffold for your app's parent widget.But scaffold should be used for a page not an app.
You should use MaterialApp for the parent widget of your app.
#override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//Your code here
)
);
}