Skip to content

Instantly share code, notes, and snippets.

@Nash0x7E2
Created March 12, 2019 00:43
Show Gist options
  • Save Nash0x7E2/727f08c06f6bfc3e6711a39980436680 to your computer and use it in GitHub Desktop.
Save Nash0x7E2/727f08c06f6bfc3e6711a39980436680 to your computer and use it in GitHub Desktop.
Sample code for having a horizontal list within a vertical list view in Flutter.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: MyHomePage(title: 'List playground'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Widget> _children = () sync* {
yield AspectRatio(
aspectRatio: 16 / 9,
child: ListView(
scrollDirection: Axis.horizontal,
physics: const AlwaysScrollableScrollPhysics(),
children: List.generate(12, (int index) {
return AspectRatio(
aspectRatio: 4 / 3,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Placeholder(),
),
);
}),
),
);
yield* List.generate(
25,
(int index) {
return SizedBox(
height: 160.0,
width: 60.0,
child: Card(
color: index.isEven ? Colors.purpleAccent : Colors.pinkAccent,
),
);
},
);
}()
.toList();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(children: _children),
);
}
}
@JamesCullum
Copy link

Thanks a lot - basically the ApectRatio around the ListView is the trick. The 4/3 AspectRatio in the ListChild can be used, but it works already beforehand 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment