Answer by Divyang Rana for How to create a custom AppBar widget?

AppBar custom class using Getx

Step 1: Make custom AppBar class

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {  final String title;  final List<CustomAppBarAction> actions;  final Widget? leading;  final bool automaticallyImplyLeading;  CustomAppBar({Key? key, required this.title, this.actions = const [], this.leading, this.automaticallyImplyLeading = true}) : super(key: key);  @override  State<CustomAppBar> createState() => _CustomAppBarState();  @override  Size get preferredSize => Size.fromHeight(kToolbarHeight);}class CustomAppBarAction {  final String title;  final VoidCallback onTap;  CustomAppBarAction({required this.title, required this.onTap});}class _CustomAppBarState extends State<CustomAppBar> {  @override  Widget build(BuildContext context) {    return AppBar(      title: Text(        widget.title,        style: TextStyle(color: AppColors.whiteColor),      ),      backgroundColor: AppColors.primeryColor,      automaticallyImplyLeading: widget.automaticallyImplyLeading,      actions: <Widget>[        if (widget.actions.isNotEmpty)          PopupMenuButton<CustomAppBarAction>(            onSelected: (action) {              action.onTap();            },            itemBuilder: (BuildContext context) {              return widget.actions.map((CustomAppBarAction action) {                return PopupMenuItem<CustomAppBarAction>(value: action, child: Text(action.title));              }).toList();            },          ),      ],      leading: widget.leading,      centerTitle: true,      foregroundColor: AppColors.whiteColor,    );  }}

Step 2: Make additional color class

class AppColors {  static const Color whiteColor = Color(0xffffffff);  static const Color primeryColor = Color(0xff7f65cb);}

Step 3: Use as per your need

 return Scaffold(      appBar: CustomAppBar(title: "title"),    );

OR

class MyHomePage extends StatelessWidget {  final GlobalKey appBarKey = GlobalKey();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: CustomAppBar(        key: appBarKey,        title: "My Home Page",        actions: [          CustomAppBarAction(            title: "Action 1",            onTap: () {              print("Action 1 tapped");            },          ),          CustomAppBarAction(            title: "Action 2",            onTap: () {              print("Action 2 tapped");            },          ),        ],        automaticallyImplyLeading: true,        leading: IconButton(          icon: Icon(Icons.menu),          onPressed: () {            print("Action leading tapped");          },        ),      ),    );  }}