How to pass multiple widgets as children in Flutter? [duplicate]

Question

I recently started learning Flutter and have been going through the documentation. I am working on this small app, where the screen has a button on the top of the screen and a list below it.

Whenever I pass RaisedButton with a ListView widget into another ListView or Column Widget, its throwing error.

I/flutter ( 4734): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4734): The following assertion was thrown during performResize():
I/flutter ( 4734): Vertical viewport was given unbounded height.
I/flutter ( 4734): Viewports expand in the scrolling direction to fill their container.
////MORE LINES OF ERRORS/////

Here's the code I have been working on:

import 'package:flutter/material.dart';

void main() {
  runApp(ListDemo(
    items: new List<ListItem>.generate(
      100,
          (i) => i % 6 == 0
          ? new HeadingItem("Heading $i")
          : new MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

// The base class for the different types of items the List can contain
abstract class ListItem {}

// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);
}

// A ListItem that contains data to display a message
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);
}

class ListDemo extends StatelessWidget {
  final List<ListItem> items;
  ListDemo({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final ListView listView = ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        if (item is HeadingItem) {
          return new ListTile(
            title: new Text(
              item.heading,
              style: Theme.of(context).textTheme.headline,
            ),
          );
        } else if (item is MessageItem) {
          return new ListTile(
            title: new Text(item.sender),
            subtitle: new Text(item.body),
          );
        }
      },
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lists'),
        ),
        body: ListView( //Tried using ListView, Column.. None of them help solving the issue
          children: <Widget>[
            RaisedButton(
              onPressed: null,
              child: Text('Sample Button'),
            ),
            Container(
              child: listView,
            )
        ]
      )
      )
    );
  }
}

Please help me solve this issue of letting know, how to pass multiple children, and also please make understand the concept as well.

EDITED

One of the possible solutions suggested wrapping ListView with Expanded class. When I did it threw me an error as below:

I/flutter ( 4190): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 4190): The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter ( 4190): Incorrect use of ParentDataWidget.
I/flutter ( 4190): Expanded widgets must be placed inside Flex widgets.
I/flutter ( 4190): Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.

So I wrapped the entire Widget code in Flex as below:

      Flex(
        direction: Axis.vertical,
        children: <Widget>[
          ListView(
            children: <Widget>[
              RaisedButton(
               onPressed: null,
               child: Text('Snackbar'),
              ),
              Expanded(
               child: listView
              )
             ],
            )
          ],
        )

but then it threw me this error:

I/flutter ( 4388): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4388): The following assertion was thrown during performResize():
I/flutter ( 4388): Vertical viewport was given unbounded height.
I/flutter ( 4388): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 4388): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 4388): typically happens when a scrollable widget is nested inside another scrollable widget.

Answer 1

This question is already answered here

Can't add a ListView in Flutter

If you use a scrollable view(Listview) inside another scrollable view, the inner scrollable view doesn't know how much height it should occupy. You can tell the inner scrollable view about how much height it should take using an Expanded widget.