Wave Curved AppBar in Flutter

User Interface:

Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'Custom_Side_bar.dart';

void main() => runApp(
      MaterialApp(
        title: "Side_bar",
        debugShowCheckedModeBanner: false,
        home: Wavebar(),
      ),
    );

class Wavebar extends StatelessWidget {
  // const Wavebar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: MainAppBar());
  }
}

class MainAppBar extends StatelessWidget with PreferredSizeWidget {
  //final Text title;
  final double barHeight = 50.0;

  //MainAppBar({Key key, this.title}) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight + 100.0);

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
        child: ClipPath(
          clipper: WaveClip(),
          child: Container(
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Wave App Bar',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                  ),
                ),
              ],
            ),
          ),
        ),
        preferredSize: Size.fromHeight(kToolbarHeight + 100));
  }
}

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    final lowPoint = size.height - 30;
    final highPoint = size.height - 60;

    path.lineTo(0, size.height);
    path.quadraticBezierTo(size.width / 4, highPoint, size.width / 2, lowPoint);
    path.quadraticBezierTo(
        3 / 4 * size.width, size.height, size.width, lowPoint);
    path.lineTo(size.width, 0);

    return path;
  }

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

Video

Contact Me
Facebook Profile: Asim Irshad Facebook
LinkedIn Profile: Asim Irshad Linked In
GitHub Link:https://github.com/AsimIrshad
Youtube Channel Link: Learn Flutter Now