AppBar full transparent

Question

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

When scrolled

Answer 1

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.

Answer 2

add these properties to the app bar

backgroundColor: Colors.transparent,
elevation: 0,
shadowColor: Colors.transparent,
surfaceTintColor: Colors.transparent,

Answer 3

The accepted answer did not work for me, and did not consider foreground colour for things like screen title or action buttons.

This is what I used:

Scaffold(
  // height of the body is extended to include the height of the AppBar
  // and the top of the body is aligned with the top of the AppBar.
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    foregroundColor: Colors.black,
    elevation: 0,
  ), // AppBar
  ...
);