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

How to achieve bottom inverted border radius app bar in flutter

here is the appBar that i’m trying to achieve,

enter image description here

here is what i tried, but this is not right method at all, how do i achieve this App bar in flutter

Scaffold(
      body: SafeArea(
        child: ListView(
          physics: const BouncingScrollPhysics(),
          children: [
            Stack(
              children: [
                Container(
                  height: 180,
                  decoration: const BoxDecoration(gradient: AppColor.bgColor),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 140),
                  child: Container(
                    height: MediaQuery.of(context).size.height - 250,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                      color: Colors.white
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );

this is not the right method i know, please provide the right method to achieve this app bar, thank you for your time 🙂

Tags:

2

Answers


  1. 0 
    Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Colors.red,
              Colors.green,
              Colors.blue,
            ],
          ),
        ),
        child: Column(
          children: [
            const SizedBox(
              height: 65,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Home',
                    style: MyStyle.bold18,
                  ),
                  Icon(
                    Icons.notifications,
                    size: 18,
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Expanded(
              child: Container(
                width: double.infinity,
                decoration: const BoxDecoration(
                  color: AppColor.white,
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(35),
                  ),
                ),
                padding: const EdgeInsets.symmetric(
                  vertical: 20,
                  horizontal: 16,
                ),
                child: child,// your child widget
              ),
            )
          ],
        ),
      ),
    ),
    Login or Signup to reply.
  2. 0

    You can use ShapeBorder.

    class AppBarShape extends OutlinedBorder {
  @override
  OutlinedBorder copyWith({BorderSide? side}) => this; //todo

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    Path path = Path()
      ..fillType = PathFillType.evenOdd
      ..addRect(rect)
      ..addRRect(RRect.fromRectAndCorners(
        Rect.fromLTWH(rect.left, rect.bottom - 30, rect.width, 30),
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ));
    return path;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return getInnerPath(rect, textDirection: textDirection);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    /// create shader linear gradient
    canvas.drawPath(getInnerPath(rect), Paint()..color = Colors.blue);
  }

  @override
  ShapeBorder scale(double t) => this;
}

    And use case

    Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      shape: AppBarShape(),
    ),
    body: SafeArea(
      child: ListView(
        children: [
          SizedBox(height: 100),
          Container(
            height: 180,
            width: double.infinity,
            decoration: ShapeDecoration(shape: AppBarShape(), shadows: [
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                blurRadius: 10,
                spreadRadius: 5,
                offset: const Offset(0, 5),
              ),
            ]),
          ),
        ],
      ),
    ),
  );
}

    Result

    enter image description here

    You can also implement PreferredSizeWidget to a widget for Appbar.

    class F extends StatelessWidget implements PreferredSizeWidget {

    For Sliver, use SliverPersistentHeaderDelegate.

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

Back To Top
Search