在 Flutter 的底部导航栏上显示抽屉

时间:2020-12-23 04:43:33

标签: flutter dart

我在应用栏中有一个抽屉,需要将它显示在底部导航栏上,但不能将两者放在同一个视图中,我不知道如何做到这一点。 This is what it looks like nowthis is what it needs to look like.

这是appbar所在视图的一部分代码

class ContactsPage extends StatefulWidget {
  final String title;
  final String token;
  final String qr;
  String code;
  final String name;

  ContactsPage({this.name, this.token, this.qr, this.code, Key key, this.title})
      : super(key: key);

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

class _ContactsPageState extends State<ContactsPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  List<Contact> contactList;
  bool showHorizontalBar = false;
  bool ready = false;

  @override
  void initState() {
    super.initState();
    var userService = new UserService();
    userService.getContacts(widget.token).then((value) => {
          print(value),
          if (value == '0')
            {
              Navigator.pushReplacement(
                  context, MaterialPageRoute(builder: (context) => LoginPage()))
            }
          else if (value == '3')
            {
              Navigator.pushReplacement(
                  context, MaterialPageRoute(builder: (context) => LoginPage()))
            }
          else
            {
              setState(() {
                contactList = value;
                ready = true;
              })
            },

          print(contactList),
        });
  }

  void showMessage(String message, [MaterialColor color = Colors.red]) {
    _scaffoldKey.currentState..removeCurrentSnackBar();
    _scaffoldKey.currentState.showSnackBar(
        new SnackBar(backgroundColor: color, content: new Text(message)));
  }

  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => Scanner(
                qr: widget.qr,
                token: widget.token,
              )),
    );

    if (result != null) {
      showMessage('$result', Colors.red);
    }
  }

  Widget _addPerson() {
    return FloatingActionButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Icon(Icons.group_add),
      backgroundColor: Color(0xff83bb37),
    );
  }

  Widget buildMenuIcon() {
    return IconButton(
      icon: Icon(showHorizontalBar ? Icons.close : Icons.more_horiz),
      onPressed: () {
        setState(() {
          showHorizontalBar = !showHorizontalBar;
        });
      },
    );
  }

  Widget _simplePopup() => PopupMenuButton<int>(
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(
                    Icons.delete,
                    color: Color(0xff83bb37),
                  ),
                  onPressed: () => {},
                ),
                IconButton(
                  icon: Icon(
                    Icons.favorite,
                    color: Color(0xff83bb37),
                  ),
                  onPressed: () => {},
                ),
                IconButton(
                  icon: Icon(
                    Icons.mail,
                    color: Color(0xff83bb37),
                  ),
                  onPressed: () => {},
                ),
                IconButton(
                  icon: Icon(
                    Icons.calendar_today,
                    color: Color(0xff83bb37),
                  ),
                  onPressed: () => {},
                ),
                IconButton(
                  icon: Icon(
                    Icons.call,
                    color: Color(0xff83bb37),
                  ),
                  onPressed: () => {},
                ),
              ],
            ),
          )
        ],
        icon: Icon(
          Icons.more_horiz,
          size: 20,
          color: Color(0xff4d4c48),
        ),
      );

  Widget _card(String first_name, String last_name, String email) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: [
          SizedBox(
            height: 5.0,
          ),
          ListTile(
            leading: ClipRRect(
              borderRadius: BorderRadius.circular(13.0),
              child: Image.asset(
                'assets/images/mujer.jpg',
                width: 60.0,
                height: 70.0,
                fit: BoxFit.cover,
              ),
            ),
            title: Row(
              children: [
                Text(
                  first_name,
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Color(0xff4d4c48)),
                ),
                SizedBox(width: 5.0),
                Text(
                  last_name,
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Color(0xff4d4c48)),
                )
              ],
            ),
            subtitle: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    email,
                    style: TextStyle(color: Color(0xff4d4c48)),
                  ),
                  SizedBox(
                    height: 5.0,
                  ),
                  Text(
                    'Prowebglobal',
                    style: TextStyle(
                        color: Color(0xff4d4c48), fontWeight: FontWeight.w600),
                  ),
                ],
              ),
            ),
            trailing: _simplePopup(),
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          ContactDetails(token: widget.token, email: email)));
            },
          ),
          SizedBox(
            height: 20.0,
          ),
        ],
      ),
    );
  }

  Widget textContainer(String string, Color color) {
    return new Container(
      child: new Text(
        string,
        style: TextStyle(
            color: color, fontWeight: FontWeight.normal, fontSize: 16.0),
        textAlign: TextAlign.start,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
      margin: EdgeInsets.only(bottom: 10.0),
    );
  }

  Widget _titulo() {
    return new Container(
      alignment: Alignment.topLeft,
      padding: EdgeInsets.only(left: 20.0),
      child: new Text(
        'Contactos',
        style: TextStyle(
            color: Color(0xff83bb37),
            fontWeight: FontWeight.bold,
            fontSize: 25.0),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.white,
      drawer: NavDrawer(
        token: widget.token,
      ),
      appBar: AppBar(
          centerTitle: true,
          backgroundColor: Color(0xfff0f0f0),
          title: Image.asset(
            'assets/images/logo-iso.png',
            height: 50.0,
            fit: BoxFit.contain,
            alignment: Alignment.center,
          ),
          iconTheme: new IconThemeData(color: Color(0xff707070)),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
              },
            ),
          ]),
      body: Column(children: [
        SizedBox(
          height: 20.0,
        ),
        Expanded(
          flex: 2,
          child: _titulo(),
        ),
        Expanded(
          flex: 20,
          child: Container(
            child: ready
                ? ListView(
                    children: contactList
                        .map(
                          (Contact contact) => _card("${contact.first_name}",
                              "${contact.last_name}", "${contact.email}"),
                        )
                        .toList())
                : Center(
                    child: Image.asset(
                      "assets/images/logo-gif.gif",
                      height: 125.0,
                      width: 125.0,
                    ),
                  ),
          ),
        ),
      ]),
      floatingActionButton: _addPerson(),
    );
  }
}

这就是底部导航菜单的位置

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

  final String token;
  final String code;

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

class _HomePageState extends State<HomePage> {
  String currentPage = 'contacts';

  changePage(String pageName) {
    setState(() {
      currentPage = pageName;
    });
  }

  @override
  Widget build(BuildContext context) {
    final Map<String, Widget> pageView = <String, Widget>{
      "contacts": ContactsPage(
        code: widget.code,
        token: widget.token,
      ),
      "profile": ProfilePage(
        token: widget.token,
      ),
    };

    return Scaffold(
      body: pageView[currentPage],
      bottomNavigationBar: new BottomNavigationDot(
        paddingBottomCircle: 21,
        color: Colors.black.withOpacity(0.5),
        backgroundColor: Colors.white,
        activeColor: Colors.black,
        items: [
          new BottomNavigationDotItem(
              icon: Icons.home,
              onTap: () {
                changePage("contacts");
              }),
          new BottomNavigationDotItem(icon: Icons.brush, onTap: () {}),
          new BottomNavigationDotItem(icon: Icons.notifications, onTap: () {}),
          new BottomNavigationDotItem(icon: Icons.favorite, onTap: () {}),
          new BottomNavigationDotItem(
              icon: Icons.person,
              onTap: () {
                changePage("profile");
              }),
        ],
        milliseconds: 400,
      ),
    );
  }
}

编辑: 我曾考虑将 de appbar 放在与底部导航栏相同的级别,但我需要根据视图在 appbar 上放置不同的选项,所以我考虑使用不同的 appbar,这就是为什么我希望它与视图处于同一级别.

0 个答案:

没有答案