Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

AppBar – Scroll on top

AppBar - Scroll on top

When scrolled

AppBar - 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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading