Search code examples
flutterdartlayoutnavbardrawer

NavBar and Drawer Flutter


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

Here is the current navbar enter image description here


Solution

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