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

Answer 1

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

Answer 2

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

Answer 3

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