CODEWITHSUNDEEP
dartflutter
S.D.
S.D.

Reputation: 5857

How to vertically stack ListView's with one ListView expanded

I am building a simple Flutter app with two ListView's on top of each other. I'm trying to position the first list view (a list of files), which takes up all available space, to be above the second list view (a list of tags), which just takes up the necessary space to display the tags.

Here is a mockup of the desired design (image)

I have tried adding the lists to a Stack widget, but the lists overlap. I have also tried adding the ListView's to two Expanded widgets but this also does not work.

This is what my app looks like using the Stack widget.

Here is all the code used (copy and paste into default project main.dart if you want to run it)

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage();

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        alignment: Alignment.bottomCenter,
        children: [
          new ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text("File $index"),
              );
            },
          ),
          new Text("Tags"),
          new ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, index) {
              return new Chip(label: new Text("Tag $index"));
            }
          ),
        ],
      ),
    );
  }
}

Anyone know how to make this layout in Flutter where you have two vertical ListView's with some space between them?

Upvotes: 0

Views: 3115

Answers (1)

Ian
Ian

Reputation: 2984

Use a CustomScrollView with multiple SliverLists inside:

  CustomScrollView(
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildListDelegate(List<Text>.generate(7, (int i) {
          return Text("List 1 Item $i");
        })),
      ),
      SliverToBoxAdapter(
        child: Text('Tags'),
      ),
      SliverList(
        delegate: SliverChildListDelegate(List<Text>.generate(3, (int i) {
          return Text("List 2 Item $i");
        })),
      ),
    ],
  )

Upvotes: 2

Related Questions