Flutter Drawer as separate widget doesn't allow width modification

user_1299388 0
Viewed 11701

Trying to implement a side drawer in a new app, I could render it but it covers the whole screen, here is how I set it:

the home page:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: SideDrawer(),
      body: Center(
        child: Text('Home page'),
      ),
    );
  }
}

the drawer widget in a separate file:

class SideDrawer extends StatelessWidget {
  const SideDrawer({Key key, this.user}) : super(key: key);
  final FirebaseUser user;

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: MediaQuery.of(context).size.width * 0.85,
      child: Drawer(
          child: new ListView(
        children: <Widget>[
          new DrawerHeader(
            child: new Text("DRAWER HEADER.."),
            decoration: new BoxDecoration(color: Colors.orange),
          ),
          new ListTile(
            title: new Text("Item => 1"),
            onTap: () {
              Navigator.pop(context);
              Navigator.push(context,
                  new MaterialPageRoute(builder: (context) => new HomePage()));
            },
          ),
        ],
      )),
    );
  }
}

Update: The drawer should get user details from the login page, and I guess that the issue here is related to the fact that the drawer is called from a separate home scaffold, that's why at the beginning it covers its whole area despite 85% of the screen area is set in the code.

enter image description here

I have tried this solution too but didn't work, any suggestion ?

material-design dart flutter
2 Answers

Most of your code is ok. However you should just make a Widget side(BuildContext context) instead of making a SideDrawer class extends StatelessWidget

Here is the complete main.dart

import 'package:flutter/material.dart';
import 'side.dart';
import 'user.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  User user = new User("name","firstname","adress","username");

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: new SideDrawer(user:user),
      body: Center(
        child: Text('Home page'),
      ),
    );
  }
}

And here is the other file containing the sideDrawer

import 'package:flutter/material.dart';
import 'main.dart';
import 'user.dart';

class SideDrawer extends StatelessWidget {

  const SideDrawer({Key key, this.user}) : super(key: key);
  final User user;

  @override
  Widget build(BuildContext context) {
      return new SizedBox(
        width: MediaQuery.of(context).size.width * 0.85,//20.0, 
        child: Drawer(
            child: new ListView(
          children: <Widget>[
            new DrawerHeader(
              child: new Text("DRAWER HEADER.."),
              decoration: new BoxDecoration(color: Colors.orange),
            ),
            new ListTile(
              title: new Text(user.name),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.firstname),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.adress),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.username),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
          ],
        )),
      );
    }
}

And here is how it show in the end:

App Screen Capture

Hopping this helps you.

Regards

EDIT:

I've updated code and picture to meet your needs.Also I made a fake User class for demonstration purposes only.

user_79398910

Try this method once.

drawer: Container(
    width: MediaQuery.of(context).size.width * 0.85,
    child: Drawer()),
user_61915910
Related