How To Remove Flutter Appbar Elevation

In this post, we will be practically discussing how to remove Flutter appbar elevation. We will be removing the Flutter appbar elevation using step by step explanation so you can have a proper practical knowledge of how to do it and so you can easily remove the Flutter appbar elevation in your Flutter apps. So let’s not wait anymore and start discussing how to remove Flutter appbar elevation.

What is Flutter Appbar Elevation?

Flutter appbar elevation as the name suggests, it is the elevated effect of the Flutter appbar widget by using a shadow like effect that is coming from the Flutter appbar and thus it gives an elevated effect to the Flutter appbar. Let’s understand it using a proper Flutter example. First we will see what the default Flutter appbar elevation looks like and then we will make it more visible in case you don’t see it clearly then we will remove it.

Default Flutter Appbar Elevation

In order to see the default Flutter appbar elevation, we have to implement a simple Flutter appbar widget. See the below code:

appBar: AppBar()

So this is the default elevation that you can see in the above image. Let’s now increase it in the next section then see how it looks.

Increase Flutter Appbar Elevation

So to increase the Flutter appbar elevation, you have to use the elevation constructor of the Flutter appbar widget class. It takes double(decimal) but you can pass it integer as well(it will convert it to double by itself). For demonstration, we have passed it a value of 10. See the below code:

appBar: AppBar(
      elevation: 10
    )

You can see in the above image that the elevation of Flutter appbar is now increased.

Remove Flutter Appbar Elevation

Maybe you have guessed it already of how to remove Flutter appbar elevation. But if you don’t then don’t worry, I will explain it. As you can see in the above section on how we have increased the Flutter appbar elevation. We will follow the same process but will give value 0 to the elevation constructor of the Flutter appbar widget class. See the below code:

appBar: AppBar(
      elevation: 0
    )

The elevation of Flutter appbar widget is removed and can be seen in the above image.

So now you have a detailed practical knowledge of how to customize and remove Flutter appbar elevation. In case you still have any doubts regarding Flutter appbar elevation then do let me now in the comment section. I would love to answer all your questions.

The complete source code of custom Flutter appbar widget in which Flutter appbar elevation is also implemented is given in the next section.

Flutter Appbar Elevation Remove Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
      elevation: 0,
      centerTitle: true,
      title: Text(
        'Flutter Appbar Elevation Removed',
        style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
      ),
    )));
  }
}

Conclusion

As a final point, you’ve now practically learn with proper code implementation of what Flutter appbar elevation is and how to customize of remove elevation from Flutter appbar widget. Thanks for giving your time to this post and I would appreciate your feedback on this post. I have many other posts concerning Flutter widgets, Flutter app development, Flutter animation programs, beautiful Flutter templates with free source code, and many more. Thank you for reading this post.