How to make custom appbar like this in flutter? - flutter

Question

I design my own and trying to use this design too
so it's can be like my design??
but i don't understand how to put this button to appbar[action] cuz when i fill that button take full height
my code here i write by use it as Widget ,then i call for use at appbar
AppBar _profileAppbar(
context,
) {
return AppBar(
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"state.username",
style: TextStyle(
color: Colors.black, fontSize: 24, fontFamily: 'SukumvitSetBold'),
),
],
),
actions: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: HexColor("7225FF"),
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(18.0),
),
child: Text(
"Edit",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
height: 5,
width: 5,
),
],
iconTheme: IconThemeData(
color: Colors.black,
),
// leading: Icon(Icons.menu),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
);
}

Answer 1

One Idea is to make eveything custom without using AppBar().
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
const SizedBox(width: 10),
Icon(Icons.message, color: Colors.black),
const SizedBox(width: 10),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
child: Text('Edit', style: TextStyle(color: Colors.white))
),
],
),
height: kToolbarHeight,
decoration: const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
offset: Offset(0.0, 2),
blurRadius: 14,
spreadRadius: 2,
)
]),
),
));
}
}