webentwicklung-frage-antwort-db.com.de

Untere Navigation mit Flattern

Ich versuche eine App mit Flattern zu erstellen und habe ein Problem mit der Navigation. Ich möchte eine Navigation wie in der aktuellen Version von Youtube App haben. Eine untere Navigationsleiste mit drei Seiten und dann für jede Seite untergeordnete Seiten mit einem eigenen Navigationsstapel. Auf allen Unterseiten sollte es möglich sein, die Hauptansicht zu ändern und die App auf der Unterseite zu speichern. Ist das möglich? Ich habe keine Lösung dafür gefunden. Ich denke, es sollte möglich sein, weil es auf der Beispielseite des Materials Design: https://material.io/design/components/bottom-navigation.html#behavior am Punkt "Bottom navigation action" .Ich wäre so dankbar für Hilfe!

4
Micha

Ich würde einen Blick auf diesen Code-Ausschnitt werfen, um Hilfe zu erhalten.

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