{"id":12733,"date":"2025-07-14T05:54:57","date_gmt":"2025-07-14T05:54:57","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12733"},"modified":"2025-07-14T05:59:35","modified_gmt":"2025-07-14T05:59:35","slug":"nested-listview-in-flutter","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/nested-listview-in-flutter","title":{"rendered":"How to implement Nested ListView in Flutter?"},"content":{"rendered":"

Approach – 1<\/h2>\n
\r\nimport 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n const MyApp({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return MaterialApp(\r\n     theme: ThemeData(\r\n       colorScheme: ColorScheme.fromSeed(\r\n         seedColor: Colors.deepPurple,\r\n       ),\r\n       useMaterial3: true,\r\n     ),\r\n     home: const NestedListView(),\r\n   );\r\n }\r\n}\r\n\r\nclass NestedListView extends StatelessWidget {\r\n const NestedListView({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Scaffold(\r\n     body: SafeArea(\r\n       child: ListView.builder(\r\n         itemCount: 10,\r\n         itemBuilder: (context, index) {\r\n           return Column(\r\n             crossAxisAlignment: CrossAxisAlignment.start,\r\n             children: [\r\n               Padding(\r\n                 padding: const EdgeInsets.all(8.0),\r\n                 child: Text(\r\n                   'Category $index',\r\n                   style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\r\n                 ),\r\n               ),\r\n               SizedBox(\r\n                 height: 100,\r\n                 child: ListView.builder(\r\n                   scrollDirection: Axis.horizontal,\r\n                   physics: ClampingScrollPhysics(),\r\n                   itemCount: 15,\r\n                   itemBuilder: (context, innerIndex) {\r\n                     return Container(\r\n                       width: 100,\r\n                       margin: EdgeInsets.all(8),\r\n                       color: Colors.blueAccent,\r\n                       child: Center(\r\n                         child: Text(\r\n                           'Item $innerIndex',\r\n                           style: TextStyle(color: Colors.white),\r\n                         ),\r\n                       ),\r\n                     );\r\n                   },\r\n                 ),\r\n               ),\r\n             ],\r\n           );\r\n         },\r\n       ),\r\n     ),\r\n   );\r\n }\r\n}\r\n<\/pre>\n
Outer ListView:<\/h3>\n
The outer ListView.builder creates a vertically scrollable list.
\nEach item in this list contains a category title and an inner ListView.<\/p>\n
Inner ListView:<\/h3>\n
The inner ListView.builder is configured to scroll horizontally (scrollDirection: Axis.horizontal).
\nphysics: <\/strong>ClampingScrollPhysics() ensures smooth scrolling behavior.<\/p>\n
A fixed height (SizedBox(height: 100)) is set to constrain the inner ListView\u2019s size, preventing layout issues.<\/p>\n
Scroll Conflict Resolution:<\/h3>\n
By default, nested scrollable widgets cause conflicts. Setting physics: NeverScrollableScrollPhysics() on the inner ListView (if vertical) or using ClampingScrollPhysics() (for horizontal) ensures the outer ListView handles primary scrolling.<\/p>\n
shrinkWrap:<\/strong> true ensures the inner ListView takes only the space it needs.<\/p>\n
Performance:<\/h3>\n
Using ListView.builder for both outer and inner lists ensures lazy loading, improving performance for large datasets.
\n\"perform-1\"\"perfom-2\"<\/p>\n
Approach – 2<\/h2>\n
\r\nimport 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n const MyApp({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return MaterialApp(\r\n     theme: ThemeData(\r\n       colorScheme: ColorScheme.fromSeed(\r\n         seedColor: Colors.deepPurple,\r\n       ),\r\n       useMaterial3: true,\r\n     ),\r\n     home: const NestedListView(),\r\n   );\r\n }\r\n}\r\n\r\nclass NestedListView extends StatelessWidget {\r\n const NestedListView({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Scaffold(\r\n     body: SafeArea(\r\n       child: CustomScrollView(\r\n         slivers: [\r\n           SliverList(\r\n             delegate: SliverChildBuilderDelegate(\r\n               (context, index) {\r\n                 return Column(\r\n                   crossAxisAlignment: CrossAxisAlignment.start,\r\n                   children: [\r\n                     Padding(\r\n                       padding: const EdgeInsets.all(8.0),\r\n                       child: Text(\r\n                         'Category $index',\r\n                         style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\r\n                       ),\r\n                     ),\r\n                     SizedBox(\r\n                       height: 100,\r\n                       child: ListView.builder(\r\n                         scrollDirection: Axis.horizontal,\r\n                         physics: ClampingScrollPhysics(),\r\n                         itemCount: 15,\r\n                         itemBuilder: (context, innerIndex) {\r\n                           return Container(\r\n                             width: 100,\r\n                             margin: EdgeInsets.all(8),\r\n                             color: Colors.redAccent,\r\n                             child: Center(\r\n                               child: Text(\r\n                                 'Item $innerIndex',\r\n                                 style: TextStyle(color: Colors.white),\r\n                               ),\r\n                             ),\r\n                           );\r\n                         },\r\n                       ),\r\n                     ),\r\n                   ],\r\n                 );\r\n               },\r\n               childCount: 10,\r\n             ),\r\n           ),\r\n         ],\r\n       ),\r\n     ),\r\n   );\r\n }\r\n}\r\n<\/pre>\n
Fixed Height for Inner ListView:<\/h3>\n
Always constrain the inner ListView\u2019s height (if vertical) or width (if horizontal) using a SizedBox or Container to avoid layout errors.<\/p>\n
Scroll Physics:<\/h3>\n
Use NeverScrollableScrollPhysics() for inner ListView if you want the outer ListView to handle all scrolling.
\nUse ClampingScrollPhysics() for smoother scrolling in horizontal lists.<\/p>\n
Performance Optimization:<\/h3>\n
Use ListView.builder instead of ListView to lazily load items.<\/p>\n
Avoid deeply nested widgets; consider CustomScrollView for complex layouts.<\/p>\n
Debugging Scroll Issues:<\/h3>\n
If scrolling doesn\u2019t work as expected, check for conflicting physics or missing size constraints.
\nUse Flutter\u2019s DevTools to inspect the widget tree and layout
\n\"scroll-output-1\"\"scroll-output-2\"<\/p>\n
\"Also
<\/p>
Also Read:<\/h3>Best Flutter Libraries<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
Approach – 1 import ‘package:flutter\/material.dart’; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: Colors.deepPurple, ), useMaterial3: true, ), home: const NestedListView(), ); } } class NestedListView extends StatelessWidget { const NestedListView({super.key}); @override Widget build(BuildContext context) { return Scaffold( […]<\/p>\n","protected":false},"author":1,"featured_media":12734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-12733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12733"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12733"}],"version-history":[{"count":5,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12733\/revisions"}],"predecessor-version":[{"id":12743,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12733\/revisions\/12743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12734"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}