How to make curved bottom appBar in Flutter?

Question

How to draw custom shape for the appBar in my application to look like the image?

Brumfield

Answer 1

I think it is not the appBar's shape.

I think it's the white container below the green-colored appBar that has the rounded corner.

Here's the example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
                top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Hello',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 50.0,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Juster

Yes i tried that but i need the appbar to be as the image as when scrolling the appbar does not change to default – Brumfield

Is there anyway to make appbar with shape like the image – Brumfield

Answer 2

I built something similar with a CustomScrollView and SliverPersistenHeader, to get the curved effect your header can have a maxExtent and minExtent. When not scrolled the header height will show the curve otherwise when you start scrolling it will also shrink to a set height.

You can check out this tutorial from around 2:50 to get an idea of how to implement the header and then design your background containers accordingly.

Shadchan

Answer 3

As answer above. It is not part of the appbar programatically. Here is how I do it.

Create a class as such:

import 'dart:ui';

import 'package:flutter/material.dart';

class AppBarPainter extends CustomPainter {

@override
void paint(Canvas canvas, Size size) {
    Paint paint_1 = Paint()
      ..color = const Color(0xffF57752)
      ..style = PaintingStyle.fill;

    Path path_1 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width * .08, 0.0)
      ..cubicTo(
          size.width * 0.04, 0.0, //x1,y1
          0.0, 0.04, //x2,y2
          0.0, 0.1 * size.width //x3,y3
          );

    Path path_2 = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width * .92, 0.0)
      ..cubicTo(
          size.width * .96, 0.0, //x1,y1
          size.width, 0.96, //x2,y2
          size.width, 0.1 * size.width //x3,y3
          );

    Paint paint_2 = Paint()
      ..color = const Color(0xffF57752)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    Path path_3 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0);

    canvas.drawPath(path_1, paint_1);
    canvas.drawPath(path_2, paint_1);
    canvas.drawPath(path_3, paint_2);
  }

And then use it in your screen by stacking it ontop of body widget.

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 80.0,
        backgroundColor: const Color(0xffF57752),
        elevation: 0.0,
        title: const Text('Title'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.white,
            child: Text('     text here'),
          ),
          CustomPaint(
            painter: AppBarPainter(),
            child: Container(height: 0),
          ),
        ],
      ),
    );
  }

Modiste