CODEWITHSUNDEEP
flutterdart
Bnd10706
Bnd10706

Reputation: 2373

Flutter custom Drawer size

I am looking to size my Drawer in Flutter. I dont want the drawer to block the AppBar and I dont want it to go over 50%, looking for something like this.

enter image description here

this is it currently.

enter image description here

My code currently, is a basic endDrawer

I have seen where people have put a 2nd scaffold in, or where people put a appbar into the drawer, but I think it looks cheap.

I would rather have it so the drawer opens ONLY in the main area, and sized to maybe open only 50% of the screen width.

Can I do this?

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: Drawer(
        child: Container(
          color: Colors.grey,
          child: Column(
            children: <Widget>[],
          ),
        ),
      ),
      backgroundColor: Colors.white,
      appBar: AppBar(
        actions: [
          Builder(
            builder: (context) => IconButton(
              icon: Icon(FontAwesomeIcons.ellipsisV),
              onPressed: () => Scaffold.of(context).openEndDrawer(),
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
        ],
        backgroundColor: Color(0xfff11b7c),
        title: Row(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Text("Group", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontWeight: FontWeight.w700, foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeWidth = 5
                ..color = Colors.white
                )),
                Text(
                  "Group",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontWeight: FontWeight.w700,
                      color: Color(0xff383838)),
                ),
              ],
            ),
            Stack(
              children: <Widget>[
                Text("Post!", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontStyle: FontStyle.italic ,fontWeight: FontWeight.w700, foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 5
                  ..color = Colors.white
                )),
                Text(
                  "Post!",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w700,
                      color: Color(0xfff11b7c)),
                ),
              ],
            ),
            Padding(padding: EdgeInsets.fromLTRB(15, 0, 0, 0),),
            Icon(FontAwesomeIcons.solidComments, color: Colors.white,)
          ],
        ),
      ),
      body: Container(),
    );
  }
}

Upvotes: 3

Views: 3915

Answers (2)

raf
raf

Reputation: 31

You can use the width parameter to set the width of a Drawer or EndDrawer.

Drawer(
  width: 220,
  backgroundColor: ColorConfig.white,
  child: SingleChildScrollView(
    child: Column(...

Upvotes: 3

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27147

swap your Drawer and Container widget and provide width to your container to do so.

...
Scaffold(
  endDrawer: Container(
    width: MediaQuery.of(context).size.width / 2,
    color: Colors.grey,
    child: Drawer(
      child: Column(
       ...

Upvotes: 5

Related Questions