Sliver 应用栏背景颜色不起作用

Question

I have a sliver app bar with the background of the same color as the color or the contents that are scrolled under it, therefore making the appbar blend with the contents. Is there any way I can completely hide the contents that are beneath the SliverAppBar?

So as you can see below, the background color of the main app bar is the same as the background color of what follows(the contents).

CustomScrollView(
      controller: controller,
      slivers: [
// This should be the main app bar where the contents have to be behind it
        SliverAppBar(
            toolbarHeight: 36,
            centerTitle: true,
            title: showChatTitle
                ? const Text(
                    'Chats',
                    style: TextStyle(fontSize: 13, color: Colors.black),
                  )
                : null,
            pinned: true,
            floating: true,
            elevation: 0,
            backgroundColor: Colors.grey.withOpacity(0.002),
            leading: Container(
              margin: const EdgeInsets.only(left: 14, top: 10),
              child: const Text(
                'Edit',
                style: TextStyle(color: Colors.blue, fontSize: 12.5),
              ),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.edit_calendar,
                  color: Colors.blueAccent,
                ),
              ),
            ]),
//--------------------------------------------------------------------

// Contents follows now
        SliverAppBar(
          toolbarHeight: 45,
          elevation: 0,
          pinned: pinChatText,
          foregroundColor: Colors.black,
          backgroundColor: Colors.grey.withOpacity(0.002),
          title: const Text(
            'Chats',
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          sliver: SliverAppBar(
              toolbarHeight: searchBarHeight,
              floating: false,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              foregroundColor: Colors.black,
              backgroundColor: Colors.grey.withOpacity(0.2),
              title: Text.rich(
                TextSpan(
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.grey.withOpacity(textColorOpacity),
                  ),
                  children: [
                    WidgetSpan(
                      child: Icon(
                        Icons.search,
                        color: Colors.grey.withOpacity(textColorOpacity),
                        size: 17,
                      ),
                    ),
                    const TextSpan(
                      text: ' Search',
                    )
                  ],
                ),
              )),
        ),
        SliverList(
            delegate: SliverChildListDelegate(
          [
            Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8, top: 15),
              child: Row(children: const [
                Text(
                  'Broadcast Lists',
                  style: TextStyle(
                    color: Colors.blueAccent,
                  ),
                ),
                Spacer(),
                Text(
                  'New Group',
                  style: TextStyle(
                    color: Colors.blueAccent,
                  ),
                )
              ]),
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: 20,
              itemBuilder: (context, index) => Column(
                children: const [
                  ChatItem(),
                  Divider(
                    indent: 50,
                    thickness: 0.4,
                  )
                ],
              ),
            ),
          ],
        ))
      ],
    );

Answer 1

• You can try it with code:

 NestedScrollView( controller: _scrollController, headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverAppBar( expandedHeight: 200.0, floating: false, pinned: true, backgroundColor: Colors.red, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text("text sample", style: TextStyle( color: isShrink ? Colors.black : Colors.white, fontSize: 16.0, )), background: CachedNetworkImage( imageUrl: 'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png', fit: BoxFit.cover, )), ), ]; }, body: Center( child: Text("hello world"), ), );

Answer 2

Okay so I had to use Colors.grey.shade50 instead of Colors.grey.withOpacity(0.003)

Check code below

CustomScrollView(
      controller: controller,
      slivers: [
// This should be the main app bar where the contents have to be behind it
        SliverAppBar(
            toolbarHeight: 36,
            centerTitle: true,
            title: showChatTitle
                ? const Text(
                    'Chats',
                    style: TextStyle(fontSize: 13, color: Colors.black),
                  )
                : null,
            pinned: true,
            floating: true,
            elevation: 0,
            backgroundColor: Colors.grey.shade50, // Used shade here
            leading: Container(
              margin: const EdgeInsets.only(left: 14, top: 10),
              child: const Text(
                'Edit',
                style: TextStyle(color: Colors.blue, fontSize: 12.5),
              ),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.edit_calendar,
                  color: Colors.blueAccent,
                ),
              ),
            ]),
//--------------------------------------------------------------------

// Contents follows now
        SliverAppBar(
          toolbarHeight: 45,
          elevation: 0,
          pinned: pinChatText,
          foregroundColor: Colors.black,
          backgroundColor: Colors.grey.withOpacity(0.002),
          title: const Text(
            'Chats',
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          sliver: SliverAppBar(
              toolbarHeight: searchBarHeight,
              floating: false,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              foregroundColor: Colors.black,
              backgroundColor: Colors.grey.withOpacity(0.2),
              title: Text.rich(
                TextSpan(
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.grey.withOpacity(textColorOpacity),
                  ),
                  children: [
                    WidgetSpan(
                      child: Icon(
                        Icons.search,
                        color: Colors.grey.withOpacity(textColorOpacity),
                        size: 17,
                      ),
                    ),
                    const TextSpan(
                      text: ' Search',
                    )
                  ],
                ),
              )),
        ),
        SliverList(
            delegate: SliverChildListDelegate(
          [
            Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8, top: 15),
              child: Row(children: const [
                Text(
                  'Broadcast Lists',
                  style: TextStyle(
                    color: Colors.blueAccent,
                  ),
                ),
                Spacer(),
                Text(
                  'New Group',
                  style: TextStyle(
                    color: Colors.blueAccent,
                  ),
                )
              ]),
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: 20,
              itemBuilder: (context, index) => Column(
                children: const [
                  ChatItem(),
                  Divider(
                    indent: 50,
                    thickness: 0.4,
                  )
                ],
              ),
            ),
          ],
        ))
      ],
    );