Flutter AppBar Tutorials

Appbar is a widget that contains the toolbar in a Flutter application. An app bar contains different toolbar widgets like menu button, actions, icon buttons and many more.

Add a simple AppBar with action buttons

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Name"),
        actions: <Widget>[
          Padding(
              padding: EdgeInsets.fromLTRB(0.0, 0.0, 16.0, 0.0),
              child: GestureDetector(
                onTap: () {
                  print("Calculator");
                },
                child: Icon(Icons.home),
              )),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.only(right: 10.0),
      ),
    );
  }

Load AppBar from another file

AppBar needs to be loaded on every screen, so it is not a good idea to include it in each of it. We need to create a custom AppBar in a file then call it from any screens.

We create a widget call MainAppBar and call it from Scaffold like this.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MainAppBar(title: Text(widget.title)),
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(50.0);

  @override
  Widget build(BuildContext context) {

    return AppBar(
      title: title,
      actions: <Widget>[
        Padding(
            padding: EdgeInsets.fromLTRB(0.0, 16.0, 16.0, 0.0),
            child: GestureDetector(
              onTap: () {
                print("Calculator");
              },
              child: FaIcon(FontAwesomeIcons.calculator, size: 20),
            )),
        Padding(
            padding: EdgeInsets.fromLTRB(0.0, 16.0, 16.0, 0.0),
            child: GestureDetector(
              onTap: () {
                print("History");
              },
              child: FaIcon(FontAwesomeIcons.history, size: 20),
            )),
      ],
    );
  }
}

Wave Curved AppBar

Custom Clipper will be used to draw the wave curved path. In the WaveClip class you will see we draw the clip at 4 points: 0, 1/4 of the width, 3/4 of the width, and the width.

class MainAppBar extends StatelessWidget implements 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.blue,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                title,
              ],
            ),
          ),
        ),
        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;
  }
}

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close