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

Related searches

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

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

How to display two ListViews on one screen in Flutter?, How to display two ListViews on one screen in Flutter? Use the below example code for displaying two ListViews on one screen in Flutter. Children in ListView are list of itens, so, if you want to display a button or text, your widget tree is: Scaffold appBar: AppBar body: Container child: ListView ListItem ListItem ListItem Then, in your case, you can use a Column to display "fixed widget" (text, button) + listview scrollable:

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

Flutter - Displaying two ListViews on one screen, Flutter - Displaying two ListViews on one screen. flutter listview height flutter listview expanded flutter nested listview flutter listview selected item flutter listview� Display a list of items commonly will refer to a widget, named ListView. In this post, I will show you how to make a simple ListView in Flutter by creating a display-only note application. ListView in Flutter. ListView is one of the most commonly-used in mobile apps development. Basically, there are a lot of items in the same type, same way of

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

Flutter Nested ListView, Source code https://github.com/IhorKlimov/Flutter Check out my blog www. myhexaville.com Duration: 8:30 Posted: Jun 3, 2018 A while ago, I wrote an article on the basics of using a ListView and GridView in Flutter.This article is meant as a more detailed exploration on the ListView class, ScrollPhysics and tweaks and

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

A solution to putting multiple ListViews inside a ScrollView in Flutter , A solution to putting multiple ListViews inside a ScrollView in Flutter. gistfile1.txt. return new Scaffold(. appBar: new AppBar(. title: new Text("Project Details"),. This solution allows the ListView to take the rest of the screen without having to deal with media query. – Terence Ponce Jul 31 '19 at 2:46 I'm too new to Flutter to know why this works, but I'm glad it does.

Scrolling widgets, Scroll multiple widgets as children of the parent. See more widgets in the widget catalog. ListView is the most commonly used scrolling widget. It displays its� We have two variables: selectedValue for storing the selected list item, and isLargeScreen is a simple boolean which stores if the screen is large enough to display both the list and detail widgets.

Flutter provides us with two widgets: the CompositedTransformFollower and the CompositedTransformTarget. Simply put, if we link a follower and a target , then the follower will follow the target

Flutter provides ListView.builder which can be used to generate dynamic content from external sources.. In this tutorial, we will create a button widget, and when the button is pressed, it will add an item to the List and display that List on the mobile screen.

Comments
  • I am not sure what is the output you want?
  • 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.
  • The code you have shared on dartpad doesn't produce the space at the bottom?
  • @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.
  • @dlohani It did. It only show half height for the second listView.
  • If I use Expanded for both, it will show both half screen. That not what I want. I want both listView in wrap_content.
  • 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.
  • You can't open dartpad?
  • Yes, I can. and you have the first loose and the second using space left.
  • 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.
  • If I use Expanded for both, it will show both half screen. That not what I want. I want both listView in wrap_content.
  • Just try to change flex value.