• Home
  • Flutter
    • All
    • App Templates
    • Designs
    • Resources
    • Widgets
    Quizlet Alternative AI: Study Notes to Flashcards

    Quizlet Alternative AI: Study Notes to Flashcards

    StickerAI

    StickerAI: AI Sticker Maker for iOS

    plants selling ui design

    Plants Selling Flutter UI App Design

    7 Best Flutter Repositories on GitHub

    7 Best Flutter Repositories on GitHub

    flutter ecommerce templates

    Top 8 Ecommerce Flutter App Templates

    best-flutter-ui-kits

    10 Best Flutter UI Kits

    AI image generator app - featured image.

    Create an AI Image Generator In Flutter, Clean Architecture Part 2

    Create an ai image generator in flutter

    Create an AI Image Generator In Flutter, Clean Architecture Part 1

    How To Create a Custom AppBar In Flutter

    How To Create a Custom AppBar In Flutter

  • My Apps
  • Recommendations
  • Backend
  • How-To-Guides
  • General
No Result
View All Result
Yassine Benkhay
  • Home
  • Flutter
    • All
    • App Templates
    • Designs
    • Resources
    • Widgets
    Quizlet Alternative AI: Study Notes to Flashcards

    Quizlet Alternative AI: Study Notes to Flashcards

    StickerAI

    StickerAI: AI Sticker Maker for iOS

    plants selling ui design

    Plants Selling Flutter UI App Design

    7 Best Flutter Repositories on GitHub

    7 Best Flutter Repositories on GitHub

    flutter ecommerce templates

    Top 8 Ecommerce Flutter App Templates

    best-flutter-ui-kits

    10 Best Flutter UI Kits

    AI image generator app - featured image.

    Create an AI Image Generator In Flutter, Clean Architecture Part 2

    Create an ai image generator in flutter

    Create an AI Image Generator In Flutter, Clean Architecture Part 1

    How To Create a Custom AppBar In Flutter

    How To Create a Custom AppBar In Flutter

  • My Apps
  • Recommendations
  • Backend
  • How-To-Guides
  • General
No Result
View All Result
Yassine Benkhay
No Result
View All Result

How To Create a Custom AppBar In Flutter

Yassine BENKHAY by Yassine BENKHAY
July 23, 2023
in Flutter, How-To-Guides, Widgets
3
How To Create a Custom AppBar In Flutter
Share on FacebookShare on Twitter

Table of Contents

  • 1. Create a custom AppBar Class
  • 2. Use The Custom AppBar
  • 3. Result
  • 4. Conclusion

Even if you change the AppBar color from its default in Flutter, sometimes it won’t reflect the application idea, maybe you’re building a travel app, and you want the AppBar to reflect the adventurous spirit of your users or any other custom app. Having a custom reusable AppBar can cut the traditionality of the default AppBar in Flutter, In this tutorial we will learn how to create a custom AppBar step by step. so Let’s begin.

01
of 04
Create a custom AppBar Class

First things first, let’s create a CustomAppBar class that extends StatelessWidget and implementsthe PreferredSizeWidget which is an abstract class that is used to create widgets that can define their preferred size.

The PreferredSizeWidget has a single abstract method called preferredSizethat should be overridden by its subclasses, This method returns a Size that represents the preferred size of the widget.

In this example, we override the preferredSize method to give the height to the toolbarHeight‘s appbar widget.

Size get preferredSize => Size.fromHeight(height);

The properties that our custom appbar will have are the following:

  final String title;
  final Color backgroundColor;
  final Color textColor;
  final double height;
  final double bottomLeftRadius;
  final double bottomRightRadius;

These properties will be required in the CustomAppBar class constructor.

const CustomAppBar({
super.key, 
required this.title,
required this.backgroundColor,
required this.textColor, 
required this.height,
required this.bottomLeftRadius,
required this.bottomRightRadius,
});

In the build method, we return an AppBar with toolbarHeight to give a custom height to the AppBar, the BorderRadius only in the

bottomRight, and bottomLeft, to give rounded edges, title, backgroundColor, and textColor which will be the color of the appbar title.

Full Class:

import 'package:flutter/material.dart';
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final Color backgroundColor;
  final Color textColor;
  final double height;
  final double bottomLeftRadius;
  final double bottomRightRadius;

   const CustomAppBar({super.key, required this.title, required this.backgroundColor,required this.textColor, required this.height,required this.bottomLeftRadius,required this.bottomRightRadius,});
  @override
  Size get preferredSize => Size.fromHeight(height);
  @override
  Widget build(BuildContext context) {
    return AppBar(
        shape:  RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(bottomLeftRadius),
        bottomRight: Radius.circular(bottomRightRadius),
    )),
      centerTitle: true,
      title: Text(title,style: TextStyle(color: textColor),),
      backgroundColor: backgroundColor,
      toolbarHeight: height,

    );
  }
}

02
of 04
Use The Custom AppBar

Now you can use the CustomAppBar on any screen giving the desired values to its properties like so:

 Scaffold(
        appBar: const CustomAppBar(
          title: 'Home',
          backgroundColor: Color(0xff000132),
          textColor: Colors.white,
          height: 120.0,
          bottomLeftRadius: 30,
          bottomRightRadius: 30,
        ),
      
      ),

Full Class:

import 'package:flutter/material.dart';
import 'package:custom_appbar_tutorial/custom_appbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home:    Scaffold(
        appBar: const CustomAppBar(
          title: 'Home',
          backgroundColor: Color(0xff000132),
          textColor: Colors.white,
          height: 120.0,
          bottomLeftRadius: 30,
          bottomRightRadius: 30,
        ),

      ),
    );
  }
}

03
of 04
Result

Here’s what the result looks like:

custom flutter appbar
Flutter Custom AppBar

04
of 04
Conclusion

In this tutorial, we’ve learned how to create a custom AppBar in Flutter. To explore different ways of changing its color and appearance, refer to this tutorial for more insights.

Previous Post

How To Change AppBar Color In Flutter(2 Ways)

Next Post

Create an AI Image Generator In Flutter, Clean Architecture Part 1

Yassine BENKHAY

Yassine BENKHAY

Hey there, my name is Yassine. I am a bachelor degree in computer systems and software engineering, and a mobile flutter developer, refer to about me page for more information.

Related Posts

Quizlet Alternative AI: Study Notes to Flashcards
Recommendations

Quizlet Alternative AI: Study Notes to Flashcards

by Yassine BENKHAY
November 15, 2024
0

Introduction In today’s fast-paced academic environment, students need tools that adapt to their learning styles. While Quizlet has long been...

Read more
StickerAI

StickerAI: AI Sticker Maker for iOS

October 9, 2024
plants selling ui design

Plants Selling Flutter UI App Design

November 28, 2023
7 Best Flutter Repositories on GitHub

7 Best Flutter Repositories on GitHub

November 10, 2023
flutter ecommerce templates

Top 8 Ecommerce Flutter App Templates

October 18, 2023
best-flutter-ui-kits

10 Best Flutter UI Kits

October 17, 2023
Next Post
Create an ai image generator in flutter

Create an AI Image Generator In Flutter, Clean Architecture Part 1

Comments 3

  1. Ikram says:
    2 years ago

    Good job 👌

    Reply
    • Yassine BENKHAY says:
      2 years ago

      Thank you.

      Reply
  2. Pingback: How To Change AppBar Color In Flutter(2 Ways)

Leave a Reply Cancel reply

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

Subscribe to Our Newsletter

Flutter Premium Templates

Recommendations

Quizlet Alternative AI: Study Notes to Flashcards

November 15, 2024
Quizlet Alternative AI: Study Notes to Flashcards

Introduction In today’s fast-paced academic environment, students need tools that adapt to their learning styles. While Quizlet has long been...

Read more
by Yassine BENKHAY
0 Comments
Recommendations

StickerAI: AI Sticker Maker for iOS

October 9, 2024
StickerAI

Looking for a fun and simple way to create personalized stickers for your chats, social media, or even printed products?...

Read more
by Yassine BENKHAY
0 Comments
Designs

Plants Selling Flutter UI App Design

November 28, 2023
plants selling ui design

The user interface is a crucial part of any mobile application development, not only a beautiful design can shape the...

Read more
by Yassine BENKHAY
0 Comments
Yassine Benkhay

Terms & conditions | Privacy Policy | About me | Contact
© 2024 yassinebenkhay.com All rights reserved.

Quick Links

  • Home
  • Flutter
  • My Apps
  • Recommendations
  • Backend
  • How-To-Guides
  • General

Let's keep in touch!

No Result
View All Result
  • Home
  • Flutter
  • My Apps
  • Recommendations
  • Backend
  • How-To-Guides
  • General

Terms & conditions | Privacy Policy | About me | Contact
© 2024 yassinebenkhay.com All rights reserved.