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 and Curved AppBar is easy to implement and can be customized to fit the specific requirements of any application.

Drawing a Shadow and Curved AppBar 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 and 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 {
 @override
  _MyAppBarState createState() => _MyAppBarState();
}

class _MyAppBarState extends State<MyAppBar> {
 @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          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),
          ),
        ),
       elevation:5
      ),
    );
  }
}

  1. Add MyAppBar to main.dart’s build function. Example:

class MyHomePage extends StatelessWidget {
 @override
  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 Shadow and Curved AppBar 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.

Conclusion

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.

Hello, I'm Cakra. I'm currently occupied with developing an application using the Flutter framework. Additionally, I'm also working on writing some articles related to it.

You May Also Like