How to create a custom AppBar widget?
29,583
Solution 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
Solution 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,
),
],
);
}
Solution 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))
),
)
);
}
Solution 4
AppBar implements the class PreferredSizeWidget
which means that AppBar must have a preferred size.
preferredSize
variable is overridden as it is implemented from PreferredSizeWidget, here you can set the height of your wish.
class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
CustomAppBar({Key key}) : preferredSize = Size.fromHeight(60.0), super(key: key);
@override
final Size preferredSize;
@override
_CustomAppBarState createState() => _CustomAppBarState();
}
class _CustomAppBarState extends State<CustomAppBar>{
@override
Widget build(BuildContext context) {
return AppBar(
title: Text('App Bar'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add, color: Colors.white,),
),
],
);
}
}
And use like this
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: CustomAppBar()
);
}
Solution 5
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: () {}),
],
);
}
![KURRU HEM](https://lh4.googleusercontent.com/-NIz0p4rH6RE/AAAAAAAAAAI/AAAAAAAABGk/-TdC1UHKFB4/photo.jpg?sz=256)
Author by
KURRU HEM
Updated on July 23, 2021Comments
-
KURRU HEM almost 3 years
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: () {} ), ], );
} }'