How Do I Turn Off Elevation in AppBar?

To turn off the elevation (shadow) of an AppBar, you simply need to set its elevation property to 0. This is the most straightforward method to achieve a flat design without any visual lift beneath your AppBar.

Understanding AppBar Elevation

In user interface design, "elevation" refers to the visual depth or perceived distance an element has from its background. For an AppBar, elevation typically manifests as a subtle shadow cast beneath it, making it appear to float above the content. While this can enhance the visual hierarchy and material design aesthetic, there are many cases where a flat design or a custom visual style requires the removal of this shadow.

Removing the Default AppBar Shadow

The primary way to remove the visual shadow beneath an AppBar is by setting its elevation property to 0. By default, AppBar often has a non-zero elevation (e.g., 4.0 in Flutter's Material Design), which creates the shadow.

Here's a practical example in Flutter:

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Bar without Elevation'),
        elevation: 0, // Set elevation to 0 to remove the shadow
        backgroundColor: Colors.blue, // Optional: Set a background color
      ),
      body: Center(
        child: Text(
          'Content beneath a flat AppBar',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

In this code, setting elevation: 0 ensures that the AppBar will not display any shadow, creating a seamless look with the content or the top of the screen.

Managing Elevation with Scroll Behavior

While elevation: 0 removes the initial shadow, you might encounter a scenario where you want the AppBar to start flat but gain a shadow when content scrolls underneath it. This provides visual feedback that the content is passing behind the AppBar. Flutter accommodates this with the scrolledUnderElevation property.

• elevation: Controls the shadow when content is not scrolled under the AppBar.
• scrolledUnderElevation: Controls the shadow that appears only when content scrolls beneath the AppBar.

If you set elevation to 0 but provide a non-zero value for scrolledUnderElevation, the AppBar will initially have no shadow. However, as the user scrolls and content passes behind the AppBar, the shadow defined by scrolledUnderElevation will become visible.

Here's an example:

import 'package:flutter/material.dart';

class ScrollablePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Elevation on Scroll'),
        elevation: 0, // No initial shadow
        scrolledUnderElevation: 4.0, // Shadow appears when content scrolls under
        backgroundColor: Colors.deepPurple,
        surfaceTintColor: Colors.transparent, // Prevents tint if present
      ),
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

In this example, the AppBar starts without a shadow. As you scroll the ListView down, the AppBar will dynamically display a shadow with an elevation of 4.0, making it clear that content is passing beneath it.

Global AppBar Elevation Settings

For consistency across your application, you can define AppBar elevation settings globally using ThemeData. This is particularly useful for applying a consistent design language.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Global AppBar Elevation',
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 0, // Global setting for no initial shadow
          scrolledUnderElevation: 8.0, // Global setting for scroll-under shadow
          backgroundColor: Colors.teal,
        ),
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
        // No need to set elevation here, it comes from Theme
      ),
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('List Item $index'),
          );
        },
      ),
    );
  }
}

Summary of Elevation Properties

Property	Description	Effect with 0	Effect with non-zero
elevation	Controls the shadow when the content is not scrolled under the AppBar.	No initial shadow.	Initial shadow visible.
scrolledUnderElevation	Controls the shadow that appears only when content scrolls beneath the AppBar.	No shadow on scroll.	Shadow appears when content scrolls under.

By effectively utilizing these properties, you can precisely control the visual depth and shadow behavior of your AppBar, achieving a variety of design aesthetics from perfectly flat to dynamically shadowed.