Флаттер боковой ящик как виджет - PullRequest
Новая
       17

Флаттер боковой ящик как виджет

0 голосов
/ 27 августа 2018

Я пытаюсь внедрить боковой ящик в качестве виджета в мое приложение флаттера

home.dart 

import '../widgets/navigation_drawer_widget.dart'; //imported the nav drawer class from widgets directory

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(length: 2,
        child: Scaffold(
          drawer: DrawerWidget(),
          appBar: AppBar(
            title: Text('Home'),
            bottom: TabBar(tabs: <Widget>[
              Tab(
                icon: Icon(Icons.access_time),
                text: 'Tab 1',
              ),
              Tab(
                icon: Icon(Icons.calendar_today),
                text: 'Tab 2',
              )
            ]),
          ),
          body: TabBarView(children: <Widget>[
            Tab1(),
            Tab2()
          ]),
        )
    );
  }
}

виджет моего ящика ** navigation_drawer_widget.dart ** file 

import 'package:flutter/material.dart';

class DrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AppBar(
          automaticallyImplyLeading: false,
          title: Text('Menu'),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/home');
          },
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text('My Profile'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/profile');
          },
        ),
        ListTile(
          leading: Icon(Icons.school),
          title: Text('My Education'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/education');
          },
        ),
      ],
    );
  }
}

Но когда я щелкаю по значку навигационного гамбургера, он показывает мне что-то вроде этого

enter image description here

Как вы можете видеть, навигационная панель становится прозрачной и распространяется на всю ширину страницы. Если я переместу код ящика на домашнюю страницу (вместо DrawerWidget ()), он покажет обычный хороший старый ящик.

Есть идеи, что здесь происходит?

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Вы можете объявить свой Drawer как Widget вместо Class, а затем импортировать его в свой файл. 

Widget myDrawer = Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(...),
      ListTile(...)
    ],
  ),
);

, а затем просто: 

import 'mydrawer.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      body: Container(...),
      drawer: myDrawer
    );
  }
}
0 голосов
/ 27 августа 2018

Вам нужно обернуть Column в DrawerWidget с Drawer, если вы хотите ящик для дизайна материалов по умолчанию.

Из документа:

Ящикможет быть любым виджетом, но часто лучше использовать виджет Drawer из библиотеки материалов, который соответствует спецификации Material Design.

https://flutter.io/cookbook/design/drawer/

...