Question 75908 in Flutter Question posted in
The official Flutter documentation can be found here.

Adding Shadow to Curved AppBar – Flutter

I have a curved AppBar using the following code.
I want to add a shadow right beneath the curve.
Any help would be much appreciated!
image of curved AppBar

Code:

appBar: PreferredSize(
        preferredSize: const Size.fromHeight(85.0),
        child: AppBar(
          title: const Text("Services"),
          flexibleSpace: ClipPath(
            clipper: Customshape(),
            child: Container(
              height: 250,
              width: MediaQuery.of(context).size.width,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0.1, 0.55],
                  colors: <Color>[Color(0xff21CDAF), Color(0xff1093BC)],
                ),
              ),
            ),
          ),
        ),
      ),

class Customshape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
    var path = Path();
    path.lineTo(0, height - 50);
    path.quadraticBezierTo(width / 2, height, width, height - 50);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

I tried wrapping the container with a material widget and adding a box shadow to box decoration but neither worked.

Tags:

2

Answers


  1. 0

    to achieve the shadow you can use

    • elevation
    • shadowColor
      you can also modify the toolbarHeight and toolbarOpacity to achieve the shadow effect

    if you need further assistance i will be happy to help more!

    Login or Signup to reply.
  2. 0

    You can use this Custom Widget:

    
class CurvedAppBar extends StatelessWidget implements PreferredSizeWidget {
  final double _preferredHeight = 40.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.1, 0.55],
          colors: <Color>[Color(0xff21CDAF), Color(0xff1093BC)],
        ),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(40),
          bottomRight: Radius.circular(40),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.purple.withOpacity(0.8), //👈 Customize your shadow
            spreadRadius: 1,
            blurRadius: 4,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            alignment: Alignment.center,
            height: 60,
            child: Text(
              'Resources',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(_preferredHeight);
}

    And use it as:

    Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: CurvedAppBar(), // 👈 Add it here
        body: Center(child: Text("Hello")),
      ),
    );
  }

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search