How to create a custom AppBar widget? - flutter

Question

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: () {}
),
],
);
}
}'

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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: () {}),
],
);
}

Answer 5

Screenshot (Null Safe):
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'),
],
),
),
)

Answer 6

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.

Answer 7

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