Skip to main content

Return to Question

edited title
Link
DarkBee
DarkBee
  • 14.4k
  • 9
  • 84
  • 133

SliverAppBar Background Color Transparency Problem in flutter

added 4 characters in body
Source Link
Munsif Ali
Munsif Ali
  • 7.9k
  • 7
  • 35
  • 66
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),
                ),
              ],
            ),
          ),
        ],
      ),
    );

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );
Source Link
Abdullah Hameed
Abdullah Hameed
  • 25
  • 6

SliverAppBar Background Color Transparency Problem in flutter

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:-

enter image description here