Show
Contents You might want to create a list that scrolls horizontally rather than vertically. The ListView widget supports horizontal lists. Use the standard ListView constructor, passing in a horizontal scrollDirection, which overrides the default vertical direction. Interactive exampleimport 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { const title = 'Horizontal List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: Container( margin: const EdgeInsets.symmetric(vertical: 20.0), height: 200.0, child: ListView( // This next line does the trick. scrollDirection: Axis.horizontal, children: <Widget>[ Container( width: 160.0, color: Colors.red, ), Container( width: 160.0, color: Colors.blue, ), Container( width: 160.0, color: Colors.green, ), Container( width: 160.0, color: Colors.yellow, ), Container( width: 160.0, color: Colors.orange, ), ], ), ), ), ); } }Contents
Contents The standard ListView constructor works well for small lists. To work with lists that contain a large number of items, it’s best to use the ListView.builder constructor. In contrast to the default ListView constructor, which requires creating all items at once, the ListView.builder() constructor creates items as they’re scrolled onto the screen. 1. Create a data sourceFirst, you need a data source. For example, your data source might be a list of messages, search results, or products in a store. Most of the time, this data comes from the internet or a database. For this example, generate a list of 10,000 Strings using the List.generate constructor. To display the list of strings, render each String as a widget using ListView.builder(). In this example, display each String on its own line. Interactive exampleimport 'package:flutter/material.dart'; void main() { runApp( MyApp( items: List<String>.generate(10000, (i) => 'Item $i'), ), ); } class MyApp extends StatelessWidget { final List<String> items; const MyApp({Key? key, required this.items}) : super(key: key); @override Widget build(BuildContext context) { const title = 'Long List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, ), ), ); } }
 If you want to display multiple widgets in vertically or horizontally with scrollable, you can use flutter list view To display, listView we have multiple options such as
Working with Flutter ListView()ListView() helps you to display static content, where you know list length or list data (how much data), you can use this Flutter ListView() Example 1This example, we’re going to display images horizontally with scrollable <span class="hljs-selector-tag">ListView</span>( <span class="hljs-attribute">scrollDirection</span>: Axis.horizontal, <span class="hljs-attribute">children</span>: <Widget>[ Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>), ], )Flutter ListView() Example 2Now, we’re going to display 7 wonders name, country, images with vertically scrollable ListView( <span class="hljs-name">children</span>: <Widget>[ ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg"</span>), title: Text(<span class="hljs-string">"Taj Mahal"</span>), subtitle: Text(<span class="hljs-string">"India"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Christ-the-Redeemer.jpg"</span>), title: Text(<span class="hljs-string">"Christ the Redeemer"</span>), subtitle: Text(<span class="hljs-string">"Brazil"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2016/03/petra-jordan9.jpg"</span>), title: Text(<span class="hljs-string">"Petra"</span>), subtitle: Text(<span class="hljs-string">"Jordan"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Great-Wall-of-China-view.jpg"</span>), title: Text(<span class="hljs-string">"The Great Wall of China"</span>), subtitle: Text(<span class="hljs-string">"China"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/View-of-the-Colosseum.jpg"</span>), title: Text(<span class="hljs-string">"The Colosseum"</span>), subtitle: Text(<span class="hljs-string">"Rome"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Machu-Picchu-around-sunset.jpg"</span>), title: Text(<span class="hljs-string">"Machu Picchu"</span>), subtitle: Text(<span class="hljs-string">"Peru"</span>)), ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Chichen-Itza-at-night.jpg"</span>), title: Text(<span class="hljs-string">"Chichén Itzá"</span>), subtitle: Text(<span class="hljs-string">"Mexico"</span>)), ], )Image Source: http://matadornetwork.com/read/21-amazing-images-new-seven-wonders-world/ Flutter ListView.builder() TutorialFlutter ListView.builder() helps you to generate a list view, when you’re data length is unknown. (E.g) If you’re getting data from a web server, we’re not sure about how many (in count) data we receive. so we should use a list view for that. Flutter ListView.builder() exampleFor this example, we’re going to display the same 7 wonders but with List. consider, you’re receiving these data from a web request. First, we need to create a class for Place where we can create custom List <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Place</span> </span>{ <span class="hljs-built_in">String</span> imageUrl; <span class="hljs-built_in">String</span> name; <span class="hljs-built_in">String</span> country; Place({<span class="hljs-keyword">this</span>.imageUrl, <span class="hljs-keyword">this</span>.name, <span class="hljs-keyword">this</span>.country}); }Now using this Place, we can create custom List as follows List wonders = [ Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"Taj Mahal"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"India"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Christ-the-Redeemer.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"Christ the Redeemer"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"Brazil"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2016/03/petra-jordan9.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"Petra"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"Jordan"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Great-Wall-of-China-view.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"The Great Wall of China"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"China"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/View-of-the-Colosseum.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"The Colosseum"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"Rome"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Machu-Picchu-around-sunset.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"Machu Picchu"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"Peru"</span>), Place( <span class="hljs-symbol"> imageUrl:</span> <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Chichen-Itza-at-night.jpg"</span>, <span class="hljs-symbol"> name:</span> <span class="hljs-string">"Chichén Itzá"</span>, <span class="hljs-symbol"> country:</span> <span class="hljs-string">"Mexico"</span>), ];Now, we can display these data inside ListView.builder() ListView.builder( itemCou<span class="hljs-symbol">nt:</span> wonders.length, itemBuild<span class="hljs-symbol">er:</span> (context, <span class="hljs-built_in">index</span>) { return ListTile(leadi<span class="hljs-symbol">ng:</span> Image.network(wonders[<span class="hljs-built_in">index</span>].imageUrl), tit<span class="hljs-symbol">le:</span> <span class="hljs-built_in">Text</span>(wonders[<span class="hljs-built_in">index</span>].name), subtit<span class="hljs-symbol">le:</span> <span class="hljs-built_in">Text</span>(wonders[<span class="hljs-built_in">index</span>].country),); }, ), |
