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

Flutter – AppBar color stays changed after scrolling and moving to different tab

When I scroll down in homepage the appbar color darkens but when i click any other tab the color stays same. I want the color to be the default appbar color when changed to new tab.
When not scrolled
When scrolled
When changed to another tab

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

int currentIndex = 0;

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter app'),
        ),
        body: IndexedStack(
          index: currentIndex,
          children: [
            ListView.builder(
              itemCount: 10,
              itemBuilder: (ctx, index) {
                return const Placeholder(
                  fallbackHeight: 200,
                );
              },
            ),
            const Center(child: Text('search')),
            const Center(child: Text('user')),
          ],
        ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: currentIndex,
          destinations: const [
            NavigationDestination(icon: Icon(Icons.home), label: 'home'),
            NavigationDestination(icon: Icon(Icons.search), label: 'search'),
            NavigationDestination(icon: Icon(Icons.person), label: 'user'),
          ],
          onDestinationSelected: (index) {
            setState(
              () {
                currentIndex = index;
              },
            );
          },
        ),
      ),
    );
  }
}

tried:
scrolledUnderElevation: 0 and surfaceTintColor: Colors.transparent
but it still remains a little dark.
This is what it should look like

Tags:

2

Answers


  1. 0

    weird, But you can definitely try to force transparency in the AppBar:

    forceMaterialTransparency: true,
    Login or Signup to reply.
  2. 0

    you can get ride of this using backgroundColor and surfaceTintColor like this:

     AppBar(
          title: const Text('flutter app'),
          surfaceTintColor: Colors.white,
          backgroundColor: Colors.white,
        ),

    or you can change forceMaterialTransparency to true as answered by A-E like this:

     AppBar(
          title: const Text('flutter app'),
          forceMaterialTransparency: true,
        ),

    Forces the AppBar’s Material widget type to be MaterialType.transparency (instead of Material’s default type).
    This will remove the visual display of backgroundColor and elevation, and affect other characteristics of the AppBar’s Material widget.

    read-more

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

Back To Top
Search