'How to make transparent sliverappbar in flutter?

I'm trying to make e-commerce app in flutter. I wanted to make Appbar transparent and have animation, so I use Sliverappbar but I can't make it transparent without scrolling down.

I tried to use stack, but it doesn't work and has error. I want appbar transparent when it's on top and change white when I scroll down.

This is my flutter code

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Icon(
          Icons.menu,
          size: 30,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.tune, color: Colors.black, size: 30),
          )
        ],
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          leading: Icon(
            Icons.menu,
            size: 30,
          ),
          backgroundColor: Colors.transparent,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.tune,
                color: Colors.black,
                size: 30,
              ),
            )
          ],
          floating: true,
          elevation: 0.0,
          snap: false,
        ),
        SliverToBoxAdapter(
          child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.7,
              width: MediaQuery.of(context).size.width,
              child: Carousel(
                images: [
                  Image.network(
                      'https://i.pinimg.com/564x/83/32/37/8332374f18162612dd9f2a4af2fda794.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://i.pinimg.com/originals/e2/8e/50/e28e5090b7193ec9b2d5b5c6dfaf501c.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://image-cdn.hypb.st/https%3A%2F%2Fhypebeast.com%2Fwp-content%2Fblogs.dir%2F6%2Ffiles%2F2019%2F09%2Fmschf-fall-winter-lookbook-streetwear-seoul-korea-47.jpg?q=75&w=800&cbr=1&fit=max',
                      fit: BoxFit.cover)
                ],
                showIndicator: false,
              )),
        ),
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.only(
                left: 25.0, top: 20.0, right: 0.0, bottom: 20.0),
            child: Text('Recommended for You',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
          ),
        ),
        SliverPadding(
            padding: EdgeInsets.only(left: 35.0, right: 35.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 20.0,
                crossAxisSpacing: 25.0,
                childAspectRatio: 0.67,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return _buildListItem(context, index);
                },
                childCount: 13,
              ),
            ))
      ],
    );

Solution 1:^[1]

Best solution I can find is, instead of using SliverAppBar, use a regular AppBar in a SliverToBoxAdapter. You would set the flexibleSpace property to your Carousel, or put the AppBar and carousel into a Stack.

The flexibleSpace property, as far as I can tell, behaves differently in a SliverAppBar and a regular AppBar. It wont collapse in a regular AppBar and you also won't need to put your carousel in a FlexibleSpaceBar().

You may need to do a few additional things to get the exact look you're going for (e.g. change the elevation).

Solution 2:^[2]

You can simply warp SliverAppBar with SliverOpacity widget

SliverOpacity (
opacity: 0.5, 
sliver: SliverAppBar(
leading: Icon(              
Icons.menu,
size: 30, ),

backgroundColor: Colors.transparent,
actions: <Widget>[
       IconButton(
         icon: Icon(
           Icons.tune,
           color: Colors.black,
           size: 30,
         ),
       )
     ],
floating: true,  
elevation: 0.0,
snap: false,
),

)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'How to make transparent sliverappbar in flutter?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]