Create AppBar as a class flutter - flutter

Question

i'm trying to make an appbar as a class for one of my page of my app (only used on 1 page).
I'd like to have addStoryAppBar for my code to be easier to read. How do I do this ? I've tried to create a widget, but it remove the leading back icon
class StoryAddPage extends StatefulWidget {
const StoryAddPage({Key key}) : super(key: key);
#override
_StoryAddPageState createState() => _StoryAddPageState();
}
class _StoryAddPageState extends State<StoryAddPage> {
#override
Widget build(BuildContext context) {
AppBar addStoryAppBar = AppBar(
backgroundColor: Colors.white,
title: Text(
AppLocalizations.of(context).add_story,
style: TextStyle(
color: AppColors.Black,
fontWeight: FontWeight.w700,
fontSize: 16),
),
leading: SvgPicture.asset(
"lib/assets/images/back.svg",
semanticsLabel: 'Back icon',
fit: BoxFit.none,
height: 10,
),
actions: [
GestureDetector(
child: Image.asset('lib/assets/images/select_picture.png'),
onTap: () => {},
),
Padding(
padding: const EdgeInsets.all(10.0),
child: ElevatedButton(
style: kOrangeButton,
onPressed: () => {},
child: Container(
child: Text(
AppLocalizations.of(context).publier,
style: TextStyle(color: AppColors.Black),
),
),
),
),
],
);
return SafeArea(
child: Scaffold(
appBar: addStoryAppBar,
body: Container(
child: Text('Add story'),
),
),
);
}
}
Also tried to extends the AppBar, but how do I pass the context ? Is this the more adapted thing to do ?
class StoryAppBar extends AppBar {
StoryAppBar()
: super(
iconTheme: IconThemeData(
color: Colors.black, //change your color here
),
backgroundColor: Colors.white,
title: Text(
AppLocalizations.of(context).add_story,
style: TextStyle(
color: AppColors.Black,
fontWeight: FontWeight.w700,
fontSize: 16),
),
elevation: 0.0,
automaticallyImplyLeading: false,
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () => null,
),
IconButton(
icon: Icon(Icons.person),
onPressed: () => null,
),
],
);
}

Answer 1

You can extract the AppBar widget to a statefull or stateless widget.

Answer 2

Create your own leading back icon. Just create Text Button, like this:
TextButton.icon(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_rounded),
label: Text(''),
),

Answer 3

Create a separate method that returns AppBar to your screen widget. Add the below method in a new class and call this method from anywhere you want to show AppBar
AppBar getApplicationAppBar(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
title: Text(
AppLocalizations
.of(context)
.add_story,
style: TextStyle(
color: AppColors.Black,
fontWeight: FontWeight.w700,
fontSize: 16),
),
leading: SvgPicture.asset(
"lib/assets/images/back.svg",
semanticsLabel: 'Back icon',
fit: BoxFit.none,
height: 10,
),
actions: [
GestureDetector(
child: Image.asset('lib/assets/images/select_picture.png'),
onTap: () => {},
),
Padding(
padding: const EdgeInsets.all(10.0),
child: ElevatedButton(
style: kOrangeButton,
onPressed: () => {},
child: Container(
child: Text(
AppLocalizations
.of(context)
.publier,
style: TextStyle(color: AppColors.Black),
),
),
),
),
],
);
}
If back button functionality not works, then use GestureDetector on Back Button
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: SvgPicture.asset(
"lib/assets/images/back.svg",
semanticsLabel: 'Back icon',
fit: BoxFit.none,
height: 10,
),
),

Answer 4

if you have stateless widget you can Easily implement PreferredSizeWidget
this example show you how do that :
class CustomAppbar extends StatelessWidget implements
PreferredSizeWidget{
const CustomAppbar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container();
}
#override
Size get preferredSize => Size(15.h, 100.w);
}
if you are using StatefulWidget you can copy paste this code
class CustomAppbar extends StatefulWidget implements PreferredSizeWidget {
final bool? isBack;
final TextEditingController? controller;
const CustomAppbar({Key? key, this.isBack, this.controller})
: super(key: key);
#override
State<CustomAppbar> createState() => _CustomAppbarState();
#override
Size get preferredSize => Size(15.h, 100.w);
}
class _CustomAppbarState extends State<CustomAppbar> {
#override
Widget build(BuildContext context) {
return Container()
}
}
and now you can use class on appbar
Scaffold(
appBar: CustomAppbar(
);
the rason for that if you enter to appbar you will see
/// An app bar to display at the top of the scaffold.
final PreferredSizeWidget? appBar;
the app bar is PreferredSizeWidget
and PreferredSizeWidget implement Widget Class
which contain get method
Size get preferredSize;