How to make modify Sliverappbar so I can see the background image with FlexibleSpaceBar when I scroll up?

Issue

How to make modify Sliverappbar so I can see the background image with FlexibleSpaceBar when I scroll up?

SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text("Collapsing Toolbar",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: Image.network(
                "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                fit: BoxFit.cover,
              )),
        ),

Solution

I’m afraid this is the standard behavior of the FlexibleSpaceBar. You can change the color but not make it transparent.

A workaround I found is to use a Stack instead of the FlexibleSpaceBar:

SliverAppBar(
  expandedHeight: 200.0,
  floating: true,
  pinned: true,
  snap: true,
  flexibleSpace: Stack(
    children: <Widget>[
      Positioned.fill(
        child: Image.network(
          "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
          fit: BoxFit.cover,
        ),
      ),
      Positioned.fill(
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(
              "Collapsing Toolbar",
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    ],
  ),
),

Answered By – Thierry

Answer Checked By – Mildred Charles (FlutterFixes Admin)