CODEWITHSUNDEEP
flutterflutter-sliver
Lomski
Lomski

Reputation: 520

Sliver list with box shadow

Is it possible to add a box shadow to sliver list widget? I have a custom scroll view so i cant just wrap sliver list with a container.

enter image description here

Upvotes: 1

Views: 1233

Answers (1)

Vinícius Santos
Vinícius Santos

Reputation: 71

Since CustomScrollView requires slivers as widgets and they don't contain any shadow or box property, we can use the SliverToBoxAdapter and hold a decorated container. As the content grows, the SliverToBoxAdapter will make it scrollable.

Instead of

body: CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate([
        Text('Item'),
        Text('Item'),
        Text('Item'),
      ]),
    ),
  ],
),

Use this

body: CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            new BoxShadow(
              color: Colors.grey[300],
              offset: new Offset(3.0, 3.0),
              blurRadius: 9
            )
          ],
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget> [
            Text('Item'),
            Text('Item'),
            Text('Item'),
          ]
        )
      ),
    ),
  ],
),

Upvotes: 1

Related Questions