How to change AppBar Elevation Color in Flutter

Elevation has an important role in material design. It helps to create a shadow according to the elevated distance. In this Flutter tutorial, let’s learn how to change the AppBar elevation color.

The AppBar widget has an elevation property through which you can apply elevation to the AppBar. If you want to change the default color of elevation then you should use shadowColor property. See the code snippet given below.

AppBar(
          title: const Text(
            'Flutter AppBar Elevation Color',
          ),
          elevation: 20,
          shadowColor: Colors.orange,
        ),

You will see an orange shadow color in the output.

Following is the complete code.

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            'Flutter AppBar Elevation Color',
          ),
          elevation: 20,
          shadowColor: Colors.orange,
        ),
        body: const Center(
            child: Text('Flutter AppBar elevation color tutorial')));
  }
}

I hope this Flutter AppBar elevation color tutorial is helpful for you.