Sliver App Bar with Transparent background

Question

I am providing a video below. Here, when the list is at the topmost position. I want that content(here it is goat's pic) to go behind the app bar. It is only happening when scrolling down or up. But not in the topmost position. I searched everywhere. But no results.

    return Scaffold(
  backgroundColor: commonBlack,
  body: NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
    return [
     SliverAppBar(
       excludeHeaderSemantics: true,
       elevation: 0,
       floating: true,
       snap: true,
       backgroundColor: Colors.transparent,
       toolbarHeight: 90,
       title: Column(.....)
    ];
  }, body: ListView(
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Image.asset('assets/images/profile_image.png'),
          Image.asset('assets/images/profile_image.png'),
          Image.asset('assets/images/profile_image.png'),
        ],
      ),
    ],
  ),),
);

Youtube link .... Sorry, I couldn't upload here.

Answer 1

Try below code hope its help to you. refer SliverAppBar

return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            snap: false,
            floating: true,
            expandedHeight: 160.0,
            backgroundColor: Colors.transparent,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text(
                'SliverAppBar',
              ),
              background: FlutterLogo(),
            ),
          ),
          const SliverToBoxAdapter(
            child: SizedBox(
              height: 20,
              child: Center(
                child: Text('Scroll to see the SliverAppBar in effect.'),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Column(
                  children: [
                    Image.network(
                        'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png'),
                  ],
                );
              },
              childCount: 5,
            ),
          ),
        ],
      ),
    );

Result screen->