Home » How to Create Shadow and Curved AppBar

How to Create Shadow and Curved AppBar

How to Create Shadow and Curved AppBar – The Shadow Curved AppBar is an advanced AppBar variant that utilizes the Flutter technology. It has a shadowed, curving bottom border. Many of today’s mobile software makes use of this design pattern.

Shadow Curved AppBar is easy to implement and can be customized to fit the specific requirements of any application.

Drawing a curved shape at the AppBar’s bottom with the CustomPaint widget produces the Shadow Curved AppBar in Flutter. The BoxDecoration property can then be used to cast a shadow over the rounded form. Lastly, the AppBar can be customized by including additional widgets and components, like as icons and text, to produce a completely functioning and aesthetically pleasing user interface.

customize the appbar in Flutter

Flutter BoxShadow widget may be used to cast a shadow over a curved AppBar. The following code snippet is an example of a shadow effect applied to a rounded AppBar.

  1. Create a new Flutter project or open an existing one.
  2. In your main.dart file, import the material package:
import 'package:flutter/material.dart';
  1. Make a new class that extends StatefulWidget in your main.dart file. Your AppBar widget, as well as the shadow effect, will be contained in this class. Here’s an Example:
class MyAppBar extends StatefulWidget {
  _MyAppBarState createState() => _MyAppBarState();

class _MyAppBarState extends State<MyAppBar> {
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 5,
            offset: Offset(0, 3), // changes position of shadow
      child: AppBar(
        title: Text('Curved AppBar with Shadow'),
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(30),
            bottomRight: Radius.circular(30),
  1. Add MyAppBar to main.dart's build function. Example:
class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(80.0),
        child: MyAppBar(),
      body: Center(
        child: Text('Hello, World!'),
  1. Run your app and you should see a curved AppBar with a shadow effect. You can adjust the color, spreadRadius, blurRadius, and offset of the shadow effect to your liking by modifying the values in the BoxShadow widget.

With the aforementioned code, we give the AppBar a shadow effect by setting its elevation attribute to 5. The elevation value allows you to modify the depth of the shadow cast. The shape property is also adjusted to produce the rounded appearance by using a ContinuousRectangleBorder with rounded corners.


Curved app bars offer visual attractiveness to apps and websites. It can modernize the UI and highlight key software features. However, curved app bars might affect usability and accessibility, especially for people with disabilities or on smaller screens. Any design decision must balance aesthetics with utility and make the app easy to use.

See also  Flutter camera app example with Code

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top