Flutter - Displaying two ListViews on one screen

Question

I'm trying to add a horizontal listView.builder on top of another vertical listView.builder. Both listViews should have text on top of both.

This is what I've made so far, only the top horizontal listView.builder is drawn, when I try to click where the bottom vertical listView.builder is supposed to be drawn, the app crashes in debug and I get the error: NoSuchMethodError: The getter 'visible' was called on null.

Also, I don't know how to add the two text fields, so I've left them out.

I have quite a lot of code, if you need to view more of it please do so here

Widget _cryptoWidget() {
return new Container(
    child: new Column(
      children: <Widget>[
        new Flexible(
          child: new ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
              return _listViewFiller();
            }
          ),
        ),
        new Flexible(
          child: new RefreshIndicator(
          key: refreshKey,
          child: new ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: _currencies.length,
            itemBuilder: (BuildContext context, int index) {
              final int i = index ~/ 2;
              final Crypto currency = _currencies[i];
              final MaterialColor color = _colors[i % _colors.length];
              if (index.isOdd) {
                return new Divider();
              }
              return _getListItemUi(currency, color);
            },
          ),
          onRefresh:refreshList,
        ),
        )
      ],
    )
  );
 }

Answer 1

import 'package:flutter/material.dart';
import 'background.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget 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"
];

@override
Widget 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 here Styled list

Answer 2

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

                ],
              ),

            ],
          ),
        ),

      ],
    ),
  );
}

Answer 3

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.