如何使用 Flutter 在同一屏幕上显示两个 ListView？

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

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

Answer 2

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 3

Just add flex property to expanded, it will work fine.

Expanded(
  flex: 10,
  child: Container(
    color: Colors.blue,
    child: _showSecondListView(),
  ),
)

Or in case you want two equal sized list just wrap both with Expanded, and give same flex in both (You can play with flex value to change in what ratio you need to display the list).

    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
            child: _showFirstListView(),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );

Answer 4

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