Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing the drop shadow from a Scaffold AppBar in Flutter?

Is there a way to remove the drop shadow under the app bar (AppBar class) when using a Scaffold widget in Flutter?

like image 569
Matt S. Avatar asked Feb 27 '18 17:02

Matt S.


People also ask

How do I remove shadows from app bar?

We can control the box-shadow using elevation attribute. Setting the value of elevation to 0 removes the box shadow. Here is how the AppBar looks from elevation 0 to 4. I have set the background to transparent to easily see the elevation difference.

How do I get rid of AppBar leading in Flutter?

A simple way to remove the back button in the AppBar Widget is to set automaticallyImplyLeading to false.


3 Answers

Looking at the AppBar constructor, there's an elevation property that can be used to set the height of the app bar and hence the amount of shadow cast. Setting this to zero removes the drop shadow:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My App Title'),
        elevation: 0,
      ),
      body: const Center(
        child: Text('Hello World'),
      ),
    );
  }

enter image description here

like image 155
Matt S. Avatar answered Oct 19 '22 00:10

Matt S.


I have tried something it might help you

AppBar(
backgroundColor: Colors.transparent,
bottomOpacity: 0.0,
elevation: 0.0,
),

Check this out

like image 39
Yash Adulkar Avatar answered Oct 18 '22 23:10

Yash Adulkar


If you want to remove the shadow of all app bars without repeating code, just add a AppBarTheme property with elevation: 0 to your app theme (ThemeData), inside your MaterialApp widget:

// This code should be located inside your "MyApp" class, or equivalent (in main.dart by default)
return MaterialApp(
  // App Theme:
  theme: ThemeData(
    // ••• ADD THIS: App Bar Theme: •••
    appBarTheme: AppBarTheme(
      elevation: 0, // This removes the shadow from all App Bars.
    )
  ),
);
like image 22
ThiagoAM Avatar answered Oct 18 '22 23:10

ThiagoAM