I want the navbar inner container to take 80% of screen width... is that possible with the AppBar Widget? This means that i want the hamburger icon on the right (generated by endDrawer) to move 10% to the left
import 'package:flutter/material.dart';
class Navbar extends StatefulWidget {
const Navbar({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
State<Navbar> createState() => _NavbarState();
}
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
backgroundColor: kYellowColor,
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: AppBar(
backgroundColor: kYellowColor,
iconTheme: const IconThemeData(color: kBlackColor),
automaticallyImplyLeading: false,
),
body: widget.child,
);
}
}
You can create custom appbar with PreferredSizeWidget
.
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
final Size size;
const MyAppBar({
Key? key,
required this.size,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
child: Container(
color: Colors.cyanAccent,
width: size.width,
height: size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Icon(Icons.menu)],
),
),
);
}
@override
Size get preferredSize => size;// mainly align is handling constraints
}
And pass size
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, constraints) => Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: MyAppBar(size: Size(constraints.maxWidth * .8, kToolbarHeight)),
body: widget.child,
),
);
}
}