CODEWITHSUNDEEP
flutter
user3005122
user3005122

Reputation: 181

How to set background for a sliverlist

I've develop an app.There is a page like this:

screenshot

If there are more comments, the picture and comment list can be scroll. So I put them in a CustomScrollView. The question is how can I set background for the SliverList?

Upvotes: 14

Views: 13769

Answers (4)

jurrdb
jurrdb

Reputation: 492

Any sliver in your CustomScrollView can be wrapped with a DecoratedSliver. This also allows your to give various slivers different background colors, while preserving the CustomScrollView's property of dynamically building its children.

See also: DecoratedSliver Flutter docs

Screenshot:

decorated sliver demo screenshot

Code:


class SliverBackgroundDemo extends StatelessWidget {
  const SliverBackgroundDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Coloured slivers demo')),
      body: CustomScrollView(
        slivers: [
          DecoratedSliver(
            decoration: const BoxDecoration(
              color: Colors.blue,
            ),
            sliver: SliverList.builder(
              itemCount: 10,
              itemBuilder: (context, index) => Text('Child $index'),
            ),
          ),
          DecoratedSliver(
            decoration: const BoxDecoration(
              color: Colors.red,
            ),
            sliver: SliverGrid.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              itemCount: 10,
              itemBuilder: (context, index) => Text('Child $index'),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 10

user3005122
user3005122

Reputation: 181

use this:

Add a grouping background by customizing the RenderSliver.: https://github.com/mrdaios/flutter_group_sliver

flutter_group_sliver: ^0.0.2

Upvotes: 4

Jorge Sánchez
Jorge Sánchez

Reputation: 431

You can wrap the 'CustomScrollView' on a Container, and set a color for that Container. This is how I solved:

Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Title'),
            expandedHeight: 100.0,
            flexibleSpace: FlexibleSpaceBar(),
          ),
          SliverList(
            delegate: SliverChildListDelegate([]),
          )
        ],
      ),
    );
  }

Upvotes: 14

Yuna
Yuna

Reputation: 1417

Try wrap CustomScrollView within Container and give color to container widget.

Upvotes: 3

Related Questions