How do wrap a Card around SliverList?

user_12492675 0
Viewed 1684

I have a Sliver List and I want to encapsulate it in a card. This is my code for the Sliver List:

  Widget hello() {
    return SliverPadding(
      padding: const EdgeInsets.only(
        top: 0.0,
        bottom: 100.0,
      ),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.only(
                top: 4,
                bottom: 4,
                left: 8,
                right: 8,
              ),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Color(0xff9a9a9a),
                    height: 0.5,
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  ListTile(
                    leading: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Container(
                        child: Image.network('http://cdn.akc.org/content/hero/cute_puppies_hero.jpg'),
                      ),
                    ),
                    title: Row(
                      children: <Widget>[
                        Text('Hello',
                        ),
                      ],
                    ),
                    subtitle: Text(
                      'This is a puppy',
                  ),
                  SizedBox(
                    height: 4,
                  ),
                ],
              ),
            );
          },
          childCount: 8,
        ),
      ),
    );
  }

This is how I've called it :

  Widget build(BuildContext context) {
    return Scaffold(
 backgroundColor: Color.fromRGBO(247, 248, 251, 1),
      body: Container(
        child: Stack(
          children: <Widget>[
            CustomScrollView(
                slivers: <Widget>[
                  hello(),
                 ..other widgets are called here..
                ],
              ),  
          ],
        ),
      ),
    );
  }

This is what I'm trying to achieve with my SliverList which I am want to display inside a card : enter image description here

When I try to wrap the SliverList with a Card I get a RenderFlex error and it doesnt accecpt the Card as a child.

dart flutter user-interface
1 Answers

For those who's still looking for the answer: you can use SliverStack widget from the wonderful package sliver_tools:

import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';

CustomScrollView(
  slivers: [
    SliverStack(
      insetOnOverlap: false,
      children: [
        SliverPositioned.fill(child: Card()),
        SliverList(...),
      ],
    ),
  ],
);
user_26940520
Related