try 在一个新应用程序中实现一个侧抽屉,我可以渲染它,但它覆盖了整个屏幕,下面是我设置它的方式:

主页:

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

抽屉小部件位于单独的文件中:

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:抽屉应该从登录页面获取用户详细信息,我猜这里的问题与抽屉是从单独的主页脚手架调用的事实有关,这就是为什么尽管代码中设置了85%的屏幕区域,但它一开始就覆盖了整个区域.

enter image description here

我试了this solution too次,但不管用,有什么建议吗?

推荐答案

你的大部分代码都没问题.然而,你应该只做Widget side(BuildContext context)而不是SideDrawer class extends StatelessWidget

这是完整的Main.省道

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

这是包含side Drawer的另一个文件

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

下面是它最终是如何显示的:

App Screen Capture

跳过这个对你有帮助.

致以问候

EDIT:

我已经更新了代码和图片以满足您的需求.我还做了一个假User class,只是为了演示.

Dart相关问答推荐

Dart 3.3接口字段类型升级不起作用

Dart 列表中的 addAll() 和 followBy() 有什么区别?

polymer.dart 中的@observable 和@published 有什么区别?

禁用 ListView 滚动

Flutter - 单击时渲染新的小部件

Flutter - 为什么滑块不会在 AlertDialog 中更新?

Dart/Flutter判断值是否为整数

Flutter热重新加载和热重启不工作

在 Flutter 中保持响应的同时制作持久的背景图像

如何修复 Flutter 中的Checking Dart SDK version... << was unexpected at this time错误?

在 Dart 中将对象推入数组

在 Dart 中使用带有 Future 的循环

如何在 Dart 中获取数字的长度?

如何在图像内的任意点上旋转图像?

Flutter列表视图底部溢出

如何从 ExpansionTile 的标题中删除默认填充

Flutter DataTable - 点击行

Dart 后期初始化final变量

如何从 Dart 中的 forEach 循环返回?

Dart 脚本会在浏览器中本地运行吗?