How to show a widget along a ListView on the same screen in Flutter?

user_6275346 0
Viewed 5995

I'm trying to build a very simple ToDo app. It consists of a TextField and a Button (a form) on the top of the screen that allow the user to add items to the ListView that is just under the TextField.

I'm capable to display the TextField and the Button, and I'm also capable to display a ListView, but when I try to display both at the same time, the screen is empty.

Am I missing something? I try to display the ListView into a Column widget but it looks like it doesn't work.

Here is my short code without the form:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My app")
        ),
        body: Column(
          children: <Widget>[
            ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        )
          ])),
      );
  }
}

Thanks!

flutter-layout dart flutter listview
3 Answers

You should use an Expanded widget around your ListView. What is does is to expand its child (in this case, the ListView) to fit the maximum available space on the parent, excluding the space taken by other widgets.

Then, when you want to add the input on the bottom, you can just put the normal widget there inside the Column, but outside the ListView, so the list will scroll and the TextField will always stay on the bottom of the page.

Here's the code with the bottom input ready, but I suggest you try to understand carefully what's going on with Columns, Rows and Expanded widgets.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
          appBar: AppBar(
              title: Text("My app")
          ),
          body: Column(
            mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: ListView(
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.map),
                        title: Text('Map'),
                      ),
                      ListTile(
                        leading: Icon(Icons.photo_album),
                        title: Text('Album'),
                      ),
                      ListTile(
                        leading: Icon(Icons.phone),
                        title: Text('Phone'),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "What to do?"
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.send),
                      onPressed: (){
                        //do something
                      },
                    )
                  ],
                )
              ],
          ),
      ),
    );
  }
}
user_37584390

Vertical viewport for ListView was given unbounded heigh. Wrap your ListView with Expanded widget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
          appBar: AppBar(title: Text("My app")),
          body: Column(children: <Widget>[
            RaisedButton(onPressed: () {}),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.map),
                    title: Text('Map'),
                  ),
                  ListTile(
                    leading: Icon(Icons.photo_album),
                    title: Text('Album'),
                  ),
                  ListTile(
                    leading: Icon(Icons.phone),
                    title: Text('Phone'),
                  ),
                ],
              ),
            )
          ])),
    );
  }
}
user_64308250

Another better solution is to warp it to Flexible:

Flexible:  
  child: 
    Listview.builder {
      // following two lines needed to make it work
      shrinkWrap: true
      physics: ScrollPhysics(),
      // the rest of your code
    }

Remember the two lines that are needed to avoid boundary error and warning from flutter and to have the list display correctly.

user_28415380
Related