CODEWITHSUNDEEP
flutterdartflutter-layoutappbarflutter-appbar
Miguel Rolex
Miguel Rolex

Reputation: 23

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

Upvotes: 1

Views: 2120

Answers (3)

evals
evals

Reputation: 1869

add these properties to the app bar

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

Upvotes: 1

danwild
danwild

Reputation: 2046

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
  ...
);

Upvotes: 1

Dani3le_
Dani3le_

Reputation: 1487

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

Upvotes: 2

Related Questions