Flutter layout issue about Flexible

Question

I am developing a flutter app, but it show error when I run the app. I don't understand what is the problem. I think I mix up the logic of how the widget expand in layout. Please kindly help to solve this issue.

error message:

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

Here with my code:

    body: Container(
          child: Flexible(
            child: FirebaseAnimatedList(
              query: databaseReference,
              itemBuilder: (_, DataSnapshot snapshot,
                  Animation<double> animation,
                  int index) {
                return new Card(
                  color: Colors.black38,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        leading: IconButton(
                          icon: Icon(Icons.format_list_bulleted),
                          color: Colors.blueAccent,
                          splashColor: Colors.greenAccent,
                          onPressed: () {
                            // Perform some action
                            debugPrint('button ok');
                          },
                        ),
                        title: Text(shopList[index].shopName),
                        subtitle: Text(shopList[index].address),
                      ),

                      Container(
                        child: Flexible(
                          child: Form(
                            key: formShopKey,
                            child: ListView(
                              children: <Widget>[
                                ListTile(
                                  leading: Icon(
                                    Icons.money_off,
                                    color: Colors.white,
                                  ),
                                  title: TextFormField(
                                    maxLength: 100,
                                    initialValue: "",
                                    maxLines: 3,
                                    //onSaved: (val) => booking.seafoodRequest = val,
                                    //validator: (val) => val == "" ? val : null,
                                    decoration: new InputDecoration(

                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

                      ButtonTheme.bar(
                        // make buttons use the appropriate styles for cards
                        child: new ButtonBar(
                          children: <Widget>[
                            new FlatButton(
                              child: const Text('BUY TICKETS'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                            new FlatButton(
                              child: const Text('LISTEN'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        );


  [1]: https://i.sstatic.net/5vAsv.png
  [2]: https://i.sstatic.net/LuZEl.png

Answer 1

I had to fill in a few gaps but the below should build for you. I also swapped FirebaseAnimatedList with a regular AnimatedList to get it to build. You can compare and adjust the layout.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: AnimatedList(
              initialItemCount: 10,
              itemBuilder: (BuildContext context, int index,
                  Animation<double> animation) {
                return new Card(
                  color: Colors.black38,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        leading: IconButton(
                          icon: Icon(Icons.format_list_bulleted),
                          color: Colors.blueAccent,
                          splashColor: Colors.greenAccent,
                          onPressed: () {
                            // Perform some action
                            debugPrint('button ok');
                          },
                        ),
                        title: Text('Name'),
                        subtitle: Text('Address'),
                      ),
                      Container(
                        constraints: BoxConstraints(
                          minHeight: 100.0,
                          maxHeight: 200.0,
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Expanded(
                              child: Form(
                                child: ListView(
                                  children: <Widget>[
                                    ListTile(
                                      leading: Icon(
                                        Icons.money_off,
                                        color: Colors.white,
                                      ),
                                      title: TextFormField(
                                        maxLength: 100,
                                        initialValue: "",
                                        maxLines: 3,
                                        //onSaved: (val) => booking.seafoodRequest = val,
                                        //validator: (val) => val == "" ? val : null,
                                        decoration: new InputDecoration(),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      ButtonTheme.bar(
                        // make buttons use the appropriate styles for cards
                        child: new ButtonBar(
                          children: <Widget>[
                            new FlatButton(
                              child: const Text('BUY TICKETS'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                            new FlatButton(
                              child: const Text('LISTEN'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}