ListView builder hassize
Flutter Problem: Listview Vs Column + SingleChildScrollViewJitesh Mohite Follow Jun 13, 2020 · 3 min read A lot of new flutter programmer while deciding the above topic will get confused, as they perform most of the things similar Show Let's take an example of a shopping app where we see a list of products from top to bottom Let's see how Listview works
Few Advantages:
Note: One important point you should take care while choosing ListView
Code Sample:
padding: const EdgeInsets.all(8), children: Container( height: 50, color: Colors.red[600], child: const Center(child: Text('Entry A')), ), Container( height: 50, color: Colors.red[500], child: const Center(child: Text('Entry B')), ), Container( height: 50, color: Colors.red[100], child: const Center(child: Text('Entry C')), ), ], ) 2. ListView.Builder() final Listfinal List padding: const EdgeInsets.all(8), itemCount: entries.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, color: Colors.red[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')), ); } ) Output: Now check how SingleChildScrollView + Column worksThe column is used when we have to list widgets vertically on the screen and SingleChildScrollView widget provides scroll functionality for Column widgets.
So for complex layouts with a small number of items, the performance gain may not be worth the trouble, in which case we can use SingleChildScrollView. Few Advantages:
Code:SingleChildScrollView(child: Column( children: Container( height: 250, color: Colors.red[600], child: const Center(child: Text('Entry A')), ), Container( height: 250, color: Colors.red[500], child: const Center(child: Text('Entry B')), ), Container( height: 250, color: Colors.yellow[100], child: const Center(child: Text('Entry C')), ), ], ), ) Output: Summary:
Github: https://github.com/jitsm555/Flutter-Problems/tree/master/listview_column_app Youtube: |