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.
I have tried this solution too but didn't work, any suggestion ?
Try this method once.
drawer: Container(
width: MediaQuery.of(context).size.width * 0.85,
child: Drawer()),
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With