Flutter ListView horizontal scroll

Well, Your Code Work Fine with wrapping your- ListView.builder with Expanded Widget & setting mainAxisSize: MainAxisSize.min, of Column Widget.

E.x Code of what you Have.

body: Column[ mainAxisSize: MainAxisSize.min, children: [ Text[ 'Headline', style: TextStyle[fontSize: 18], ], Expanded[ child: ListView.builder[ shrinkWrap: true, scrollDirection: Axis.horizontal, itemCount: 15, itemBuilder: [BuildContext context, int index] => Card[ child: Center[child: Text['Dummy Card Text']], ], ], ], Text[ 'Demo Headline 2', style: TextStyle[fontSize: 18], ], Expanded[ child: ListView.builder[ shrinkWrap: true, itemBuilder: [ctx,int]{ return Card[ child: ListTile[ title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ]; }, ], ], ], ],

Update:

Whole page Is Scroll-able with - SingleChildScrollView.

body: SingleChildScrollView[ child: Column[ mainAxisSize: MainAxisSize.min, children: [ Text[ 'Headline', style: TextStyle[fontSize: 18], ], SizedBox[ height: 200.0, child: ListView.builder[ physics: ClampingScrollPhysics[], shrinkWrap: true, scrollDirection: Axis.horizontal, itemCount: 15, itemBuilder: [BuildContext context, int index] => Card[ child: Center[child: Text['Dummy Card Text']], ], ], ], Text[ 'Demo Headline 2', style: TextStyle[fontSize: 18], ], Card[ child: ListTile[title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ], Card[ child: ListTile[title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ], Card[ child: ListTile[title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ], Card[ child: ListTile[title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ], Card[ child: ListTile[title: Text['Motivation $int'], subtitle: Text['this is a description of the motivation']], ], ], ], ],

Screenshot:

class _HomePageState extends State { @override Widget build[BuildContext context] { return Scaffold[ body: ListView.builder[ itemCount: 7, itemBuilder: [_, i] { if [i < 2] return _buildBox[color: Colors.blue]; else if [i == 3] return _horizontalListView[]; else return _buildBox[color: Colors.blue]; }, ], ]; } Widget _horizontalListView[] { return SizedBox[ height: 120, child: ListView.builder[ scrollDirection: Axis.horizontal, itemBuilder: [_, __] => _buildBox[color: Colors.orange], ], ]; } Widget _buildBox[{Color color}] => Container[margin: EdgeInsets.all[12], height: 100, width: 200, color: color]; }

Video liên quan