web-dev-qa-db-fra.com

Navigation inférieure avec flottement

J'essaie de construire une application avec le flutter et avoir un problème en construisant la navigation. Je veux avoir une navigation comme dans la version actuelle de l'application youtube. Une barre de navigation inférieure avec trois pages et pour chaque sous-page de page avec une pile de navigation owen. Sur toutes les sous-pages, il devrait être possible de changer la vue principale et l'application devrait être sauvegardée sur la sous-page i où. Est-ce possible? Je n'ai trouvé aucune solution pour ça. Je pense que cela devrait être possible car il se trouve sur la page d’exemple de Material Design: https://material.io/design/components/bottom-navigation.html#behavior au point "Actions de navigation du bas" ..__ Je serais si reconnaissant de l'aide!

dartmaterial-designflutterbottomnavigationview
4
Micha

Je voudrais regarder cet extrait de code pour obtenir de l'aide.

import 'package:firebase_auth/firebase_auth.Dart';
import 'package:my_nit2018/navigarion_drawer.Dart';
import 'package:my_nit2018/pages/app/blog/blog_page.Dart';
import 'package:my_nit2018/pages/app/home/home_page.Dart';
import 'package:my_nit2018/pages/app/library/library_page.Dart';
import 'package:my_nit2018/pages/app/notifications/notifications_page.Dart';

class MainApp extends StatefulWidget {
  FirebaseUser user;

  MainApp(this.user);

  @override
  _MainAppState createState() => new _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int i = 0;
  var pages = [
    new HomePage(),
    new BlogPage(),
    new LibraryPage(),
    new NotificationsPage()
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: pages[i],
      drawer: new AppNavigationDrawer(),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.photo_library),
            title: new Text('Blog'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.book),
            title: new Text('Library'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.notifications),
            title: new Text('Notifications'),
          ),
        ],
        currentIndex: i,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            i = index;
          });
        },
      ),
    );
  }
}

AppNavigationDrawer:

import 'package:flutter/material.Dart';
import 'package:firebase_auth/firebase_auth.Dart';
import 'package:my_nit2018/pages/app/app_state.Dart';
import 'package:my_nit2018/pages/app/main_app.Dart';
import 'package:my_nit2018/pages/app/profile/profile_page.Dart';
import 'package:my_nit2018/pages/auth/login_page.Dart';

class AppNavigationDrawer extends StatefulWidget {
  @override
  _AppNavigationDrawerState createState() => new 
  _AppNavigationDrawerState();
}

class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
  @override
  Widget build(BuildContext context) {
    final appState = AppState.of(context);
    return new Drawer(
      child: new ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          new DrawerHeader(
            child: new Text('MyNiT App'),
             decoration: new BoxDecoration(
             color: Colors.blue,
        ),
      ),
      new ListTile(
        title: new Text('Todo List'),
        leading: new Icon(Icons.list),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Subscriptions'),
        leading: new Icon(Icons.subscriptions),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Activity'),
        leading: new Icon(Icons.timelapse),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Profile'),
        leading: new Icon(Icons.account_circle),
        onTap: () {
          Navigator.pop(context);
          Navigator.Push(
            context,
            new MaterialPageRoute(
              builder: (context) => new AppState(
                    firebaseUser: appState.firebaseUser,
                    user: appState.user,
                    child: new ProfilePage(),
                  ),
            ),
          );
        },
      ),
      new ListTile(
        title: new Text('Logout'),
        leading: new Icon(Icons.exit_to_app),
        onTap: () {
          // Sign out user from app
          FirebaseAuth.instance.signOut();
          Navigator.of(context).pushAndRemoveUntil(
              new MaterialPageRoute(builder: (context) => new LoginPage()),
              ModalRoute.withName(null));
        },
      ),
    ],
  ),
);

} }

1
Christian