CODEWITHSUNDEEP
flutterdartappbarflutter-widget
KURRU HEM
KURRU HEM

Reputation: 1853

How to create a custom AppBar widget?

I'm new to flutter. I'm trying to create a custom appbar widget and importing the widget in pages.

But I was unable to create the widget.

import 'package:flutter/material.dart';
 
 class AppBar extends StatelessWidget{
  @override
  Widget build(BuildContext context){
return AppBar(
  title: Text('Ordering'),
  actions: <Widget>[
    IconButton(
      onPressed: _incrementCounter,
      icon: Icon(Icons.add),
    ),
    BadgeIconButton(
      itemCount: _counter,
      badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
      badgeTextColor: Colors.white,
      icon: Icon(Icons.shopping_cart, size: 30.0,),
      onPressed: () {}
    ),
  ],
);

} }'

Upvotes: 55

Views: 59322

Answers (8)

Divyang Rana
Divyang Rana

Reputation: 31

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");
          },
        ),
      ),
    );
  }
}

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267394

Screenshot (Null Safe):

enter image description here

Full code:

Create this class.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Widget child;
  final double height;

  CustomAppBar({
    required this.child,
    this.height = kToolbarHeight,
  });

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.red,
      child: child,
    );
  }
}

Usage:

Scaffold(
  appBar: CustomAppBar(
    height: 100,
    child: Column(
      children: [
        FlutterLogo(size: 56),
        SizedBox(height: 8),
        Text('Flutter'),
      ],
    ),
  ),
)

Upvotes: 5

Ketan Ramani
Ketan Ramani

Reputation: 5753

widget_appbar.dart

class WidgetAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color? backgroundColor;
  final Color? textIconColor;
  final String? icon;
  final String? title;
  final double? height;
  final List<Widget>? menuItem;
  final bool hideBack;

  WidgetAppBar({
    this.backgroundColor = whiteColor,
    this.textIconColor = headingColor,
    this.icon,
    this.title = '',
    this.menuItem,
    this.height: kToolbarHeight,
    this.hideBack = false,
  });

  @override
  Size get preferredSize => Size.fromHeight(height!);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      actions: menuItem,
      toolbarHeight: preferredSize.height,
      iconTheme: IconThemeData(
        color: textIconColor,
      ),
      leading: hideBack
          ? Container()
          : icon == null
              ? BackButton()
              : IconButton(
                  icon: Image.asset(
                    icon!,
                    height: 18,
                    width: 18,
                  ),
                  onPressed: () {
                    Navigator.pop(context, true);
                  },
                ),
      title: Text(
        title!,
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: textIconColor,
        ),
      ),
      backgroundColor: backgroundColor,
      centerTitle: true,
    );
  }
}

How to use?

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: WidgetAppBar(
      icon: ic_back_black,
      title: 'Toolbar Title',
    ),
    body: SafeArea(
      child: Container(),
    ),
  );
}

Upvotes: 1

Saud Bako
Saud Bako

Reputation: 41

I extended AppBar with my custom widget. Then passed my parameters to the super class.

class CustomAppBar extends AppBar {
  CustomAppBar()
      : super(
          title: Text('MyApp'),
          actions: [
            IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ],
        );
}

Upvotes: 4

Bensal
Bensal

Reputation: 4110

Edit to riftninja's answer :

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
  CustomAppBar({Key key, double height}) : preferredSize = 
       Size.fromHeight(height), super(key: key);

  @override
  //final Size preferredSize; // This didnot work for me.
  Size get preferredSize => preferredSize; //This should work.

  @override
  _CustomAppBarState createState() => _CustomAppBarState();
  }

 class _CustomAppBarState extends State<CustomAppBar>{

  @override
  Widget build(BuildContext context) {
    return AppBar( title: Text("Sample App Bar") );
  }
  }

This also works for stateless widget.

Upvotes: 2

Thaiveng
Thaiveng

Reputation: 381

class AppBars extends AppBar {
  AppBars():super(
    iconTheme: IconThemeData(
      color: Colors.black, //change your color here
    ),
    backgroundColor: Colors.white,
    title: Text(
      "this is app bar",
      style: TextStyle(color: Color(Constant.colorBlack)),
    ),
    elevation: 0.0,
    automaticallyImplyLeading: false,
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.notifications),
        onPressed: () => null,
      ),
      IconButton(
        icon: Icon(Icons.person),
        onPressed: () => null,
      ),
    ],
  );
}

Upvotes: 28

riftninja
riftninja

Reputation: 1709

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

    @override
    final Size preferredSize; // default is 56.0

    @override
    _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>{

    @override
    Widget build(BuildContext context) {
        return AppBar( title: Text("Sample App Bar") );
    }
}

Hopefully this helps

Upvotes: 132

Rafiqul Hasan
Rafiqul Hasan

Reputation: 3602

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: setAppBar(),
    body: new Container() // add rest of the UI
  );
}
Widget setAppBar() {
  return new AppBar(
  //backgroundColor: Colors.blue,
  //automaticallyImplyLeading: true
  elevation: 0.0, // for elevation
  titleSpacing: 0.0, // if you want remove title spacing with back button
  title:  UtilCommonWidget.addTextMedium('About US', Colors.white, 20.0, 1),
  actions: <Widget>[
    addAppBarActionWidgetProfile(icon, 30.0, 30.0, 15.0) // add your custom action widget
  ],//Action icon search as search icon, notification icon
  leading: new Material( //Custom leading icon, such as back icon or other icon
    color: Colors.transparent,
    child: new InkWell(
      onTap: () {
        Navigator.of(context).pop();
      },
      splashColor: UniQueryColors.colorGradientEnd.withOpacity(.5),
      child: new Container(
          padding: const EdgeInsets.fromLTRB(12.0, 16.0, 16.0, 16.0),
          child: UtilCommonWidget.addImage(Constant.iconBack, 19.0, 10.0))
      ),
  )
 );
}

Upvotes: 4

Related Questions