How to show two ListView on the same screen with Flutter?

Question

I trying to make two listView in one screen, but the second listView only show half screen(lot of space at the bottom).

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Flexible(
          child: Container(
            color: Colors.red,
            child: _showFirstListView(),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );
  }

  Widget _showFirstListView() {
    return ListView.builder(
      itemCount: 1,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Text("First ListView");
      },
    );
  }

  Widget _showSecondListView() {
    return ListView.builder(
        itemCount: 15,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                Text("FirstLine"),
                SizedBox(
                  height: 15,
                ),
                Text("SecondLine"),
                SizedBox(
                  height: 15,
                ),
                Text("ThirdLine"),
              ],
            ),
          );
        });
  }
}

I have posted it on dartpad. https://dartpad.dev/950d274dc06deb127d91d77b539c5db5

Hey, just remove Fexible and use Expanded in your column of the build func for the first list. You have posted the right thing in dartpad. Look at your dartpad code. — Shajedul Islam
– Shajedul Islam, Commented Jan 28, 2020 at 11:16
The code you have shared on dartpad doesn't produce the space at the bottom? — dlohani
– dlohani, Commented Jan 28, 2020 at 11:16
@ShajedulIslamAny If I use Expanded for both, it will show both half screen. That not what I want. I want both listView in wrap_content. — Hoo
– Hoo, Commented Jan 28, 2020 at 11:20
@dlohani It did. It only show half height for the second listView. — Hoo
– Hoo, Commented Jan 28, 2020 at 11:24

Crazy Lazy Cat · Accepted Answer · 2020-01-28 13:03:48Z

Instead of Column, use another ListView to contain both _showFirstListView and _showSecondListView.

Then your ListView in _showFirstListView and _showSecondListView should have

shrinkWrap: true,
physics: ClampingScrollPhysics(),

Demo: DartPad

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          _firstListView(),
          _secondListView(),
        ],
      ),
    );
  }

  Widget _firstListView() {
    return Container(
      color: Colors.green,
      child: ListView.builder(
        itemCount: 20,
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        itemBuilder: (context, index) => ListTile(title: Text("FIRST $index")),
      ),
    );
  }

  Widget _secondListView() {
    return Container(
      color: Colors.red,
      child: ListView.builder(
        itemCount: 20,
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        itemBuilder: (context, index) => ListTile(title: Text("Second $index")),
      ),
    );
  }
}

Miguel Ruivo · Accepted Answer · 2020-01-28 11:47:38Z

1

You want to remove the first ListView from a Flexible because you are already shrinking it to wrap and using both shrinkWrap and Flexible in the same list, will result on both lists sharing the same space 50/50, but you are actually shrinking the first one and the remaining space will be blank.

To avoid that, just let the list itself decide what space to use.

 @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.red,
          child: _showFirstListView(),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );
  }

edited Jan 28, 2020 at 11:47

answered Jan 28, 2020 at 11:17

Miguel Ruivo

18k7 gold badges67 silver badges92 bronze badges

7 Comments

Hoo Over a year ago

If I use Expanded for both, it will show both half screen. That not what I want. I want both listView in wrap_content.

Miguel Ruivo Over a year ago

I'm afraid I'm not getting what you are trying to achieve then. It might be a good idea if you could post a simple mock or so.

Hoo Over a year ago

You can't open dartpad?

Miguel Ruivo Over a year ago

Yes, I can. and you have the first loose and the second using space left.

Hoo Over a year ago

Did you see the second ListView only show half screen? It should show full, which mean the blue color should fill until "no issues" there.

|

dlohani · Accepted Answer · 2020-01-28 12:15:06Z

I know it's already answered, but for what you are trying to achieve, I don't know why do you even want to use two listviews that scroll separately, why not use a single list view. Try this, might be better than what you want.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
          Container(
             width: double.infinity,
            color: Colors.red,
            child: _showFirstListView(),
          ),
          Container(
            width: double.infinity,
            color: Colors.blue,
            child: _showSecondListView(),
          ),
      ],
    );
  }

  Widget _showFirstListView() {
    return Column(
    children: [
      ...[1].map((item) => Text("first listview")), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }

  Widget _showSecondListView() {
    return Column(
    children: [
      //usually you already have a list of items you want to display
      ...[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((item) => Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                Text("FirstLine"),
                SizedBox(
                  height: 15,
                ),
                Text("SecondLine"),
                SizedBox(
                  height: 15,
                ),
                Text("ThirdLine"),
              ],
            ),
          )), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }
}

Collectives™ on Stack Overflow

How to show two ListView on the same screen with Flutter?

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related