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

I’ve already fixed this and will answer my own question soon — Jake
– Jake, Commented Aug 18, 2018 at 20:33

Tamir Abutbul · Accepted Answer · 2020-07-16 13:48:23Z

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

Haha this is even better than my own answer! Thanks for the help

Alan John · Accepted Answer · 2019-05-23 05:47:21Z

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

                ],
              ),

            ],
          ),
        ),

      ],
    ),
  );
}

Jake · Accepted Answer · 2018-10-16 16:11:51Z

0

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.

edited Oct 16, 2018 at 16:11

answered Aug 18, 2018 at 22:35

Jake

2,07610 gold badges37 silver badges63 bronze badges

Comments

Tanjil Alom · Accepted Answer · 2025-09-23 06:36:38Z

0

UI Structure (Scaffold)

Scaffold(
  appBar: AppBar(...),
  body: Column(
    children: [
      // Horizontal ListView
      // Vertical ListView
    ],
  ),
)

Horizontal ListView

SizedBox(
  height: 250,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Container(
        width: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.lightGreen,
          boxShadow: [BoxShadow(...)],
        ),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            height: 30,
            alignment: Alignment.center,
            color: Colors.black.withOpacity(0.7),
            child: Text(items[index], style: TextStyle(color: Colors.white)),
          ),
        ),
      );
    },
  ),
),

Shows horizontally scrollable cards. Each card has:

A background color (lightGreen).
Shadow for depth.
Bottom overlay text (item name).

Vertical ListView

Expanded(
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Container(
          height: 72,
          width: 72,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            boxShadow: [BoxShadow(...)],
          ),
        ),
        title: Text('Item Header', style: ...),
        subtitle: Text('Items subTitle.', style: ...),
      );
    },
  ),
),

Shows ListTiles with:

Leading image container (currently empty, placeholder).
Title: "Item Header".
Subtitle: "Items subTitle.".

Horizontal and Vertical Listview

the listview show like this

edited Sep 23 at 6:36

answered Feb 2 at 10:31

Tanjil Alom

13 bronze badges

2 Comments

Community Feb 2 at 13:55

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Starship Feb 4 at 0:13

Don't add code-only answers

Collectives™ on Stack Overflow

Flutter - Displaying two ListViews on one screen

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related