Flutter - Displaying two ListViews on one screen
import 'package:flutter/material.dart';import 'background.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), debugShowCheckedModeBanner: false, home: new MyHomePage(title: 'Popular'),);}}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => new _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {List<String> items = ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8"];@overrideWidget build(BuildContext context) {final _width = MediaQuery.of(context).size.width;final _height = MediaQuery.of(context).size.height;final headerList = new ListView.builder( itemBuilder: (context, index) { EdgeInsets padding = index == 0?const EdgeInsets.only( left: 20.0, right: 10.0, top: 4.0, bottom: 30.0):const EdgeInsets.only( left: 10.0, right: 10.0, top: 4.0, bottom: 30.0); return new Padding( padding: padding, child: new InkWell( onTap: () { print('Card selected'); }, child: new Container( decoration: new BoxDecoration( borderRadius: new BorderRadius.circular(10.0), color: Colors.lightGreen, boxShadow: [ new BoxShadow( color: Colors.black.withAlpha(70), offset: const Offset(3.0, 10.0), blurRadius: 15.0) ], image: new DecorationImage( image: new ExactAssetImage( 'assets/img_${index%items.length}.jpg'), fit: BoxFit.fitHeight, ), ), // height: 200.0, width: 200.0, child: new Stack( children: <Widget>[ new Align( alignment: Alignment.bottomCenter, child: new Container( decoration: new BoxDecoration( color: const Color(0xFF273A48), borderRadius: new BorderRadius.only( bottomLeft: new Radius.circular(10.0), bottomRight: new Radius.circular(10.0))), height: 30.0, child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( '${items[index%items.length]}', style: new TextStyle(color: Colors.white), ) ], )), ) ], ), ), ), ); }, scrollDirection: Axis.horizontal, itemCount: items.length,);final body = new Scaffold( appBar: new AppBar( title: new Text(widget.title), elevation: 0.0, backgroundColor: Colors.transparent, actions: <Widget>[ new IconButton(icon: new Icon(Icons.shopping_cart, color: Colors.white,), onPressed: (){}) ], ), backgroundColor: Colors.transparent, body: new Container( child: new Stack( children: <Widget>[ new Padding( padding: new EdgeInsets.only(top: 10.0), child: new Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ new Align( alignment: Alignment.centerLeft, child: new Padding( padding: new EdgeInsets.only(left: 8.0), child: new Text( 'Recent Items', style: new TextStyle(color: Colors.white70), )), ), new Container( height: 300.0, width: _width, child: headerList), new Expanded(child: ListView.builder(itemBuilder: (context, index) { return new ListTile( title: new Column( children: <Widget>[ new Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Container( height: 72.0, width: 72.0, decoration: new BoxDecoration( color: Colors.lightGreen, boxShadow: [ new BoxShadow( color: Colors.black.withAlpha(70), offset: const Offset(2.0, 2.0), blurRadius: 2.0) ], borderRadius: new BorderRadius.all( new Radius.circular(12.0)), image: new DecorationImage( image: new ExactAssetImage( 'assets/img_${index%items.length}.jpg', ), fit: BoxFit.cover, )), ), new SizedBox( width: 8.0, ), new Expanded( child: new Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Text( 'My item header', style: new TextStyle( fontSize: 14.0, color: Colors.black87, fontWeight: FontWeight.bold), ), new Text( 'Item Subheader goes here\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry', style: new TextStyle( fontSize: 12.0, color: Colors.black54, fontWeight: FontWeight.normal), ) ], )), new Icon( Icons.shopping_cart, color: const Color(0xFF273A48), ) ], ), new Divider(), ], ), ); })) ], ), ), ], ), ),);return new Container( decoration: new BoxDecoration( color: const Color(0xFF273A48), ), child: new Stack( children: <Widget>[ new CustomPaint( size: new Size(_width, _height), painter: new Background(), ), body, ], ), ); }}A very nice example with complete source code hereStyled list
This sample code shows two listview vertical direction in single page,both lisview data are from APIs and i design a listitem widget or template separately (ListItemPosts).
body: ListView( children: <Widget>[ Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox(height: 10.0), new Container( margin: EdgeInsets.only(left: 10.0,right: 10.0), height: 40.0, width: double.infinity, decoration: BoxDecoration( borderRadius: BorderRadius.circular(25.0), color: Colors.green.withOpacity(0.25) ), child:Padding( padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0), child: Text( 'Invoiced Products', style: TextStyle( fontFamily: 'Quicksand', fontSize: 20.0, color: Colors.green, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), ), ), SizedBox(height: 5.0), FutureBuilder<List<SalesOrder>>( future: fetchstring(http.Client()), builder: (context, snapshot) { if (snapshot.hasError) print(snapshot.error); return snapshot.hasData ? ListItemPosts( items: snapshot.data) : Center(child: CircularProgressIndicator()); }, ), SizedBox(height: 10.0) ], ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox(height: 10.0), new Container( margin: EdgeInsets.only(left:10.0,right: 10.0), height: 40.0, width: double.infinity, decoration: BoxDecoration( borderRadius: BorderRadius.circular(25.0), color: Colors.red.withOpacity(0.25) ), child:Padding( padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0), child: Text( 'Pending Products', style: TextStyle( fontFamily: 'Quicksand', fontSize: 20.0, color: Colors.red, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), ), ), SizedBox(height: 5.0), FutureBuilder<List<SalesOrder>>( future: fetchstring(http.Client()), builder: (context, snapshot) { if (snapshot.hasError) print(snapshot.error); return snapshot.hasData ? ListItemPosts( items: snapshot.data) : Center(child: CircularProgressIndicator()); }, ), SizedBox(height: 10.0) ], ) ], )ListitemPost (widget)
class ListItemPosts extends StatelessWidget { final List<SalesOrder> items; ListItemPosts({Key key, this.items}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: new ListView.builder( itemCount: items[0].sodetails.length, primary: false, shrinkWrap: true, itemBuilder: (BuildContext context, int position) { return new Column( children: <Widget>[ Divider(height: 5.0), listItem(your Data can pass), ], ); }) ); }}Widget listItem(Get the data ) { return Container( height: 125.0, width: double.infinity, margin: EdgeInsets.only(left: 10.0,right: 10.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.0), color: Colors.white, ), child: Row( children: <Widget>[ /*Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.0), image: DecorationImage(image: AssetImage(imagedata))), height: 100.0, width: 80.0, ),*/ SizedBox(width: 0.0), Container( width: MediaQuery.of(context).size.width -30.0, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Flexible(child: Text( imagename, textAlign: TextAlign.left, softWrap: false, style: TextStyle(fontFamily: 'Quicksand',fontSize: 14.0,color: Colors.black), )), SizedBox(height: 5.0), Flexible(child: Text( trim.stringtrim(imagedes), overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle(fontFamily: 'Quicksand',fontSize: 12.0,color: Colors.black45), ), ), SizedBox(height: 5.0), Text( 'Price: '+Price.toString(), style: TextStyle(fontFamily: 'Quicksand'), ), SizedBox(height: 5.0), Text( 'Qty: '+Quatity.toString(), style: TextStyle(fontFamily: 'Quicksand'), ), SizedBox(height: 5.0), Container( height: 2.0, width: 100.0, color: Colors.amber, ), ], ), ], ), ), ], ), );}
This might not be the cleanest way to do this, but I’m relatively new to flutter so it’s the best I can do.
First I created a master container to pass all the info through so I can keep all relative code in their respected places, this piece allows me to show both listViews in the same container
This is one of the containers that’s passed to _positonalArguments. This lets me keep the elements from overflowing, for instance the maxHeight: 335.0, is a strict parameter found due to trial and error.
I used the same BoxConstraints in both containers passed to _positionalArguments, along with the same margin values.
Sorry I’m using images instead of pasting code, I’m using stack on my phone to answer this.