Can't find correct layout option for how to use ListView in a custom Widget

Question

I am trying to extract re-use a simple widget that is then referenced in parent widget. The custom widget simply uses a row to layout a textField and a button, and below this I Want to have a listview showing items. I then embed in the customwidget in parent, but it continually throws Error. I have not figured out how to get the custom widget working where I can use ListView or column layout inside. Below is the 2 simplified widgets that demo the issue.

Here is the parent widget, which is where I call the custom widget PlayListControl()

   @override
 Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
    title: Text('My Playlists'),
  ),
  body: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(20),
          child: Text('Test'),
        ),
        PlayListControl(),
      ],
    ),
  ),
  drawer: SideDrawer(),
);
 }
}

And here is the playlistcontrol widget.

  @override
 Widget build(BuildContext context) {
   return Container(
  margin: EdgeInsets.all(10),
    child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              child: TextField(),
            ),
            ButtonTheme(
                minWidth: 30,
                child: RaisedButton(
                  textColor: Colors.white,
                  child: Text('add'),
                  onPressed: () {},
                )),
          ],
        ),
      ),
      Expanded(
        child: ListView(
          children: <Widget>[
            Text('Widget 1'),
            Text('Widget 2'),
          ],
        ),
      )
    ],
  ),
);
}
}

No matter what I try, it always complains about layout issue related to height. I would have thought wrapping the ListView in Expanded would solve the issue, but it doesn't. Only if I use a container and specify height do I not get the errors, but I want to use whatever available space there is.

How can I get this playlistcontrol() widget to properly render inside a parent control?

Yea, tried that...didn't work. FYI, if I use singlechildscrollview, and inside Column...it lets me do that. However, my goal is to use ListView.builder() to dynamic create a list... — mike hennessy, Sep 10 '19 at 19:10
I think the problem is the listView in the column. this solution could help https://stackoverflow.com/questions/45669202/how-to-add-a-listview-to-a-column-in-flutter — Neli, Sep 10 '19 at 20:23
i read that thread before, hence I tried using the recommended wrapping with "Expanded". Per the documentation, that should limit the listView to whatever space remains...but in my case, it throws an error. Once distinction, if I use expanded with listview in parent widget, it works. The issue occurs when I am referencing the child widget. Using Height on the container works, but then it won't dynamically use available space. — mike hennessy, Sep 10 '19 at 20:27
Which container were you setting the height on? The one in the child widget? — Sub 6 Resources, Sep 10 '19 at 20:58
still have not figure out how to use that ListView in the child widget to leverage available space. — mike hennessy, Sep 11 '19 at 12:47

score 1 · Accepted Answer · answered Sep 12 '19 at 15:35

you forgot to wrap the first container of PlayListControl in Expanded widget..

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Playlists'),
          ),
          body: Container(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              textDirection: TextDirection.ltr,
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.all(20),
                  child: Text('Test'),
                ),
                PlayListControl(),
              ],
            ),
          ),
        ));
  }
}

class PlayListControl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 200,
                    child: TextField(),
                  ),
                  ButtonTheme(
                      minWidth: 30,
                      child: RaisedButton(
                        textColor: Colors.white,
                        child: Text('add'),
                        onPressed: () {},
                      )),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  Text('Widget 1'),
                  Text('Widget 2'),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Can't find correct layout option for how to use ListView in a custom Widget

1 Answers1