Flutter ListView horizontal scroll

Horizontal ListView inside a Vertical ScrollView in Flutter

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')), ); }, ), ), ], ),

Flutter ListView horizontal scroll

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')), ), ], ), ),

Flutter ListView horizontal scroll


Screenshot:

Flutter ListView horizontal scroll


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); }