Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how can I hide effect color in SliverAppBar

There is a color-like effect that always appear in my SliverAppBar:

Screenshot

How can I hide effect color in SliverAppBar?

SliverAppBar(
  expandedHeight: 150,
  centerTitle: true,
  forceMaterialTransparency: false,
  // surfaceTintColor: Colors.blue,
  pinned: true,
  forceElevated: false,
  backgroundColor: const Color(0xff2E3358),
  flexibleSpace: FlexibleSpaceBar(
    titlePadding: const EdgeInsets.all(0),
    centerTitle: true,
    title: Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Text(
        'Bengaluru',
        style: GoogleFonts.poppins(
          textStyle: const TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    ),
    background: const Image(
      image: AssetImage('assets/images/bg.png'),
      fit: BoxFit.cover,
      alignment: Alignment.topCenter,
    ),
  ),
);
Tags:

2

Answers


  1. 0

    try this:

    SliverAppBar(
...
elevation: 0,
)
    Login or Signup to reply.
  2. 0

    There is no color effect on your SliverAppBar.

    You have a background image set for your body widget, and the SliverAppBar has the same background image as well. The two images do not come together in harmony, which create an illusion that there is a "color effect" there (in your case, the sky image is darker on the top side and lighter on the bottom side, so when the bottom side meet the other top side, it looks like a shiny color effect).

    Illustration

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search