SliverAppBar Background Color Transparency Problem

Question

I am New to Flutter and I decided to Learn Slivers in flutter and I Stuck in SliverAppBar and I have SliverAppBar with Background Color of Transparent and When I Scroll then I can See My SliverToBoxAdapter and SliverGrid Content Behind the AppBar that I don't Want. I want SliverAppBar background Transparent so I can See the Whole Screen Background Color and I Also Want to not to Show the Content Behind the SliverAppBar When Scroll.

This is My Code:-

Scaffold(
      body: Stack(
        children: <Widget>[
          // Screen's Background Color
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.black45, Colors.grey.shade800],
                ),
              ),
            ),
          ),

          SafeArea(
            child: CustomScrollView(
              physics: BouncingScrollPhysics(),
              slivers: [
                SliverAppBar(
                  pinned: true,
                  elevation: 0.0,
                  expandedHeight: 100,
                  backgroundColor: Colors.transparent,
                  flexibleSpace: FlexibleSpaceBar(
                    collapseMode: CollapseMode.pin,
                    title: const Text(
                      'London',
                      style: TextStyle(color: Colors.white),
                    ),
                    titlePadding: EdgeInsets.all(10.0),
                  ),
                ),
                SliverPadding(padding: EdgeInsets.all(50)),
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text(
                              '35°',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 40,
                                color: Colors.white,
                              ),
                            ),
                            Text(
                              'sunny',
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 5),
                        Text(
                          'Mon 40° / 26°',
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ],
                    ),
                  ),
                ),
                // Hourly Forecast UI
                SliverToBoxAdapter(child: HourlyForecastUI()),
                // Daily Forecast UI
                SliverToBoxAdapter(child: DailyForecastUI()),
                // Current Weather Details
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  delegate: SliverChildBuilderDelegate((context, index) {
                    final detailsItem = _currentWeatherDetailsList[index];
                    return CurrentWeatherDetailsListItem(
                      detailsItem: detailsItem,
                    );
                  }, childCount: _currentWeatherDetailsList.length),
                ),
              ],
            ),
          ),
        ],
      ),
    );

This is How it Looks Like, Content is Showing Behind the SliverAppBar the London is Title of the SliverAppBar:-

Mubashir Nawaz · Accepted Answer · 2025-05-13 12:24:40Z

Try This solution ,
Added background in FlexibleSpaceBar
code:

import 'package:flutter/material.dart';

class SliverTest extends StatefulWidget {
  const SliverTest({super.key});

  @override
  State<SliverTest> createState() => _SliverTestState();
}

class _SliverTestState extends State<SliverTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.black45, Colors.grey.shade800],
                ),
              ),
            ),
          ),
          SafeArea(
            child: CustomScrollView(
              physics: BouncingScrollPhysics(),
              slivers: [
                SliverAppBar(
                  automaticallyImplyLeading: false,
                  pinned: true,
                  elevation: 0.0,
                  floating: false,
                  excludeHeaderSemantics: true,
                  // collapsedHeight: 10,
                  expandedHeight: 50,
                  backgroundColor: Colors.transparent,

                  flexibleSpace: FlexibleSpaceBar(
                    background: Container(
                      decoration: BoxDecoration(
                        gradient: RadialGradient(
                            colors: [Colors.black, Colors.grey.shade800],
                            radius: 0),
                      ),
                    ),
                    collapseMode: CollapseMode.pin,
                    title: const Text(
                      'London',
                      style: TextStyle(color: Colors.white),
                    ),
                    titlePadding: EdgeInsets.all(10.0),
                  ),
                ),
                SliverPadding(padding: EdgeInsets.all(50)),
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text(
                              '35°',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 40,
                                color: Colors.white,
                              ),
                            ),
                            Text(
                              'sunny',
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 5),
                        Text(
                          'Mon 40° / 26°',
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ],
                    ),
                  ),
                ),
                // Hourly Forecast UI
                SliverToBoxAdapter(
                    child: Text(
                  "Hourly Forecast",
                  style: TextStyle(color: Colors.white, fontSize: 20),
                )),
                // Daily Forecast UI
                SliverToBoxAdapter(
                    child: Text(
                  "Daily Forecast",
                  style: TextStyle(color: Colors.white, fontSize: 20),
                )),
                // Current Weather Details
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  delegate: SliverChildBuilderDelegate((context, index) {
                    return ListTile(
                      title: Text(
                        "Index",
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    );
                  }, childCount: 20),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

This is the Result

Nah! I can Still See the Content Behind the AppBar and What if I have Image in the Background so that's Why I need Transparent AppBar background Color and Also Don't Want to Show the Content Behind the AppBar. I can add Color for Now but What about I need in Future.

Collectives™ on Stack Overflow

SliverAppBar Background Color Transparency Problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest