Flutter – Elevation in AppBar

In Flutter, you can set the elevation of the AppBar using the elevation property. The elevation controls the shadow effect displayed below the AppBar. Here’s an example code snippet to set the elevation of the AppBar:

AppBar(
         title: Text('Elevation'),
         elevation: 20,
       ),

In the above code snippet, the elevation property is set to 20. You can adjust the value to increase or decrease the elevation of the AppBar. A higher value will produce a more prominent shadow effect.

Note: The elevation property is only available on Android and web platforms. On iOS, the AppBar has a fixed elevation of 0.0, and the elevation property has no effect.

Example of Default Elevation of the AppBar

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Elevation'),

        ),
        body: Center(
          child: Text('Default Elevation'),
        ),
      ),
    );
  }
}

Output:

Code Explanation:

• The main() method is the entry point of the application or the principle method, which runs the RunMyApp widget.
• The RunMyApp widget is a stateless widget that returns a MaterialApp widget.
• The debugShowCheckedModeBanner property of the MaterialApp widget is set to false, which hides the debug banner in the top right corner of the screen.
• The theme property of the MaterialApp widget is set to a ThemeData object with a primarySwatch of green, which sets the default color scheme of the application to green.
• The home property of the MaterialApp widget is set to a Scaffold widget.
• The Scaffold widget contains an AppBar widget with the title “Elevation“.
• The body property of the Scaffold widget is set to a Center widget with a child Text widget that displays the message “Default Elevation”.
• By default, the AppBar has an elevation of 4.0, which means it displays a shadow below it. However, the elevation property of the AppBar widget is not set, so it uses the default elevation of 4.0.

Example of Elevation 20 of the AppBar

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Elevation'),
          elevation: 20,
        ),
        body: Center(
          child: Text(' Elevation 20'),
        ),
      ),
    );
  }
}

Output:

Code Explanation:

• The main() method is the entry point of the application or the principle method, which runs the RunMyApp widget.
• The RunMyApp widget is a stateless widget that returns a MaterialApp widget.
• The debugShowCheckedModeBanner property of the MaterialApp widget is set to false, which hides the debug banner in the top right corner of the screen.
• The theme property of the MaterialApp widget is set to a ThemeData object with a primarySwatch of green, which sets the default color scheme of the application to green.
• The home property of the MaterialApp widget is set to a Scaffold widget.
• The Scaffold widget contains an AppBar widget with the title “Elevation”.
• The body property of the Scaffold widget is set to a Center widget with a child Text widget that displays the message “Elevation 20”.
• In this example, the elevation is set to 20.