Created
March 12, 2019 00:43
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 👍