flutterdartflutter-layoutappbarflutter-appbar

AppBar full transparent


Problem

Is there any way to make the AppBar fully transparent without using the Stack Widget??

This is my AppBar right now (It's transparent but not fully, it has a little white shadow)

AppBar(
  automaticallyImplyLeading: false,
  backgroundColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  shadowColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.menu,
              color: colors.BLACK,
              size: 24,
            ),
          ),
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.notifications,
              color: colors.BLACK,
              size: 24,
            ),
          ),
        ],
      ),
      Row(
        children: const [
          Text('Location', style: TextStyle(color: colors.BLACK, fontSize: 14)),
          Icon(
            Icons.location_on,
            color: colors.BLACK,
            size: 24,
          ),
        ]
      ),
      IconButton(
        onPressed: () {}, 
        icon: const CircleAvatar(
          backgroundImage: AssetImage('assets/images/icons/temp_profile_pic.png'),
          radius: 20,
        )
      )
    ],
  ),
);

Prints

Here some prints to show you what's happening:

Scroll on top

Scroll on top

When scrolled

When scrolled


Solution

  • To set your AppBar completely transparent you need to set the elevation to 0 and set the color as transparent, as:

    AppBar(
       backgroundColor: Colors.transparent,
       elevation: 0
    )
    

    The AppBar will have the same color as the Scaffold's background.

    screenshot