Adding Card to ListView

Question

I'm trying to get list of Cards, and trying using the Expanded widget, but got overflow error

My code:

new Expanded(
      child: StreamBuilder(
          stream: Firestore.instance.collection('baby').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text('Loading...');
            return ListView.builder(
                itemCount: snapshot.data.documents.length,
                padding: const EdgeInsets.only(top: 10.0),
                itemExtent: 25.0,
                itemBuilder: (context, index) {
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return //Text(" ${ds['name']} ${ds['vote']}");
                    Card(
                      child: Expanded(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            const ListTile(
                              leading: const Icon(Icons.album),
                              title: const Text('The Enchanted Nightingale'),
                              subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
                            ),
                            new ButtonTheme.bar( // make buttons use the appropriate styles for cards
                              child: ButtonBar(
                                children: <Widget>[
                                   FlatButton(
                                    child: const Text('BUY TICKETS'),
                                    onPressed: () { /* ... */ },
                                  ),
                                   FlatButton(
                                    child: const Text('LISTEN'),
                                    onPressed: () { /* ... */ },
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                    ),
                    );
                });
          })),

The error I got is: Incorrect use of ParentDataWidget.

Full error:

Performing hot reload... I/flutter ( 9119): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 9119): The following assertion was thrown building DefaultTextStyle(debugLabel: (englishLike I/flutter ( 9119): body1).merge(blackMountainView body1), inherit: false, color: Color(0xdd000000), family: Roboto, I/flutter ( 9119): size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping I/flutter ( 9119): at box width, overflow: clip): I/flutter ( 9119): Incorrect use of ParentDataWidget. I/flutter ( 9119): Expanded widgets must be placed directly inside Flex widgets. I/flutter ( 9119): Expanded(no depth, flex: 1, dirty) has a Flex ancestor, but there are other widgets between them: I/flutter ( 9119): - _InkFeatures-[GlobalKey#93e52 ink renderer] I/flutter ( 9119): - CustomPaint I/flutter ( 9119): - PhysicalShape(clipper: ShapeBorderClipper, elevation: 1.0, color: Color(0xffffffff), shadowColor: I/flutter ( 9119): Color(0xff000000)) I/flutter ( 9119): - Padding(padding: EdgeInsets.all(4.0)) I/flutter ( 9119): - Semantics(container: true, properties: SemanticsProperties, label: null, value: null, hint: null) I/flutter ( 9119): - RepaintBoundary-[<0>] I/flutter ( 9119): - KeepAlive(keepAlive: false) I/flutter ( 9119): - SliverFixedExtentList(delegate: SliverChildBuilderDelegate#b334e(estimated child count: 3)) I/flutter ( 9119): - SliverPadding(padding: EdgeInsets(0.0, 10.0, 0.0, 0.0)) I/flutter ( 9119): - Viewport(axisDirection: down, anchor: 0.0, offset: ScrollPositionWithSingleContext#bebad(offset: I/flutter ( 9119): 0.0, range: 0.0..0.0, viewport: 380.0, ScrollableState, AlwaysScrollableScrollPhysics -> I/flutter ( 9119): ClampingScrollPhysics, IdleScrollActivity#7b3a8, ScrollDirection.idle)) I/flutter ( 9119): - IgnorePointer-[GlobalKey#4c7f9](ignoring: false, ignoringSemantics: false) I/flutter ( 9119): - Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null) I/flutter ( 9119): - Listener(listeners: [down], behavior: opaque) I/flutter ( 9119): - _GestureSemantics I/flutter ( 9119): - _ExcludableScrollSemantics-[GlobalKey#22165] I/flutter ( 9119): - RepaintBoundary I/flutter ( 9119): - CustomPaint I/flutter ( 9119): - RepaintBoundary I/flutter ( 9119): - Expanded(flex: 1) (this is a different Expanded than the one with the problem) I/flutter ( 9119): These widgets cannot come between a Expanded and its Flex. I/flutter ( 9119): The ownership chain for the parent of the offending Expanded was: I/flutter ( 9119): DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#93e52 ink renderer] ← I/flutter ( 9119): NotificationListener ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape I/flutter ( 9119): ← _MaterialInterior ← Material ← Padding ← ⋯ I/flutter ( 9119): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 9119): Another exception was thrown: Incorrect use of ParentDataWidget. I/chatty ( 9119): uid=10096(com.example.flutterapp) Thread-3 identical 3 lines I/flutter ( 9119): Another exception was thrown: Incorrect use of ParentDataWidget.

UPDATE
Here is the output screen I got:

If I removed the Expanded the output became like this:

Answer 1

In this example we build an ListView with card style list view. This is to help achieve a specific styling. This card style is being popularly used to display list style items.

Play around with the Card attributes. You can change the shadow by adjusting the elevation. Also try changing the shape and margin.

This example at last row shows creation of a Card widget that can be tapped. When tapped this Card's InkWell displays an "ink splash" that fills the entire card.

ListView(
  children: <Widget>[
    Card(child: ListTile(title: Text('One-line ListTile'))),
    Card(
      child: ListTile(
        leading: FlutterLogo(),
        title: Text('One-line with leading widget'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('One-line with trailing widget'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(),
        title: Text('One-line with both widgets'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('One-line dense ListTile'),
        dense: true,
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(size: 56.0),
        title: Text('Two-line ListTile'),
        subtitle: Text('Here is a second line'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(size: 72.0),
        title: Text('Three-line ListTile'),
        subtitle:
        Text('A sufficiently long subtitle warrants three lines.'),
        trailing: Icon(Icons.more_vert),
        isThreeLine: true,
      ),
    ),
    Card(
        child: InkWell(
          splashColor: Colors.blue.withAlpha(30),
          onTap: () {
            print('Card tapped.');
          },
          child: Container(
            width: 300,
            height: 100,
            child: Center(
              child: Text(
                'When tapped this Cards InkWell displays an ink splash that fills the entire card',
              ),
            ),
          ),
        )),
  ],
)

This is what it looks like when run: