FlexibleSpaceBar background image maintains some opacity when collapsed

Question

I am using SliverAppBar in my project. I have set a background color and a background image in the "flexible space" parameter. However when the appbar collapses, the image does not fully fade out to become the "backgroundColor" I selected, but the background image I selected in "flexible space" remains visible in the background even if loosing some degree of opacity.

This is the code in the widget. Thanks.

import 'package:flutter/material.dart';
import './last-announcements.dart';
import './your-announcements.dart';
import './search-bar.dart';

class HomeOverview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const immageUrl = 'assets/images/Logo.png';
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          backgroundColor: Theme.of(context).primaryColor,          
          flexibleSpace: FlexibleSpaceBar(
              background: Padding(
                padding: const EdgeInsets.only(top: 25.0),
                child: Image(
                  image: AssetImage(immageUrl),
                  alignment: Alignment.topCenter,
                ),
              ),      
              centerTitle: true,
              title: Container(
                width: double.infinity,
                height: 50,
                color: Theme.of(context).primaryColor,
                margin: EdgeInsets.only(left: 10, right: 10),
                child: SearchBar(),
              )),
          expandedHeight: 250,
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          YourAnnouncemets(),
          LastAnnouncements(),
        ]))
      ],
    );
  }
} 

Answer 1

Try it inside a scaffold and the CustomScrollView inside the scaffold body centered, thus background color is preserved behind the flexible space.

 return Scaffold(
  backgroundColor: Theme.of(context).primaryColor,
    body: Center(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: Theme
                  .of(context)
                  .primaryColor,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Fleet"),
                background: Container(
                  decoration: BoxDecoration(
                    // borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      image: AssetImage("assets/carfinance.jpeg"),
                      fit: BoxFit.fill,
                    ),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 40,
                          offset: Offset(2, 4),
                          color: colors.AppColor.gradientSecond
                      )
                    ],
                  ),
                ),
                //padding: EdgeInsets.only(bottom: 100),
              ),
              expandedHeight: 250,
            ),
            SliverList(
                delegate: SliverChildListDelegate([
                  // YourAnnouncemets(),
                  // LastAnnouncements(),
                ])
            ),
          ],
        )
    )
);