Removing the drop shadow from a Scaffold AppBar in Flutter?

Question

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

Answer 1

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'),
      ),
    );
  }

Answer 2

I have tried something it might help you

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

Check this out

Answer 3

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

Answer 4

Seems that recent Flutter versions (3.3/3.7+) introduced a new parameter called scrolledUnderElevation:

AppBar(
  backgroundColor: Colors.transparent,
  bottomOpacity: 0.0,
  elevation: 0.0,
  // New parameter:
  scrolledUnderElevation: 0,
);