颤振 - 底部导航栏不显示当前选项卡视图

Question

I am learning about flutter. I want to make app with bottom navigation bar. I have built bottom nav bar with 5 tab. one of them is profile tab. my scenario is when I tap on profile tab, my app will check whether User has logged in or not. if user did not login, my app will redirect to LoginPage using Navigator.push() and from LoginPage, it will redirect back with value true if login success and false if login failed or user tap back button on app bar.

after that in ProfilePage, it check true will display profile and false will redirect to the previous page.

I am using rxdart and BehaviourSubject to change index page. I success to change the tab index and the tab body. but my app does not display the current body (the previous tab before tap profile tab)

Main.dart

import 'package:flutter/material.dart';
import 'package:usahaku_flutter/pages/HomePage.dart';
import 'package:usahaku_flutter/pages/ChatPage.dart';
import 'package:usahaku_flutter/pages/TransactionPage.dart';
import 'package:usahaku_flutter/pages/ProfilePage.dart';
import 'package:usahaku_flutter/pages/ShopPage.dart';
import './services/locator_service.dart';
import './blocs/NavTab.dart';

void main() {
  setup();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final _pageOption = [
    HomePage(),
    ChatPage(),
    UserProfile(),
    TransactionPage(),
    ShopPage(),
  ];
  int _currentTabIndex = 0;
  var _currentPage;
  @override
  initState() {
    super.initState();
    _currentPage = _pageOption[_currentTabIndex];
    sl.get<NavTab>().subject_currentTab.listen((data) {
      _currentTabIndex = data;
      _currentPage = _pageOption[_currentTabIndex];
      print(_currentPage);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'UsahaKu',
        theme: ThemeData(primarySwatch: Colors.brown),
        home: SafeArea(
          child: Scaffold(
            body: _currentPage,
            bottomNavigationBar: BottomNavigationBar(
                fixedColor: Colors.black87,
                currentIndex: _currentTabIndex,
                type: BottomNavigationBarType.fixed,
                items: [
                  BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text('Home'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.chat),
                    title: Text('Chat'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.person),
                    title: Text('Profile'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.transform),
                    title: Text('Transaksi'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.business_center),
                    title: Text('Toko'),
                  ),
                ],
                onTap: (index) {
                  setState(() {
                    sl.get<NavTab>().changeTab(index);
                  });
                }),
          ),
        ));
  }
}

NavTab.dart

import 'package:rxdart/rxdart.dart';

class NavTab {
  BehaviorSubject<int> subject_currentTab = new BehaviorSubject<int>();
  BehaviorSubject<int> subject_previousTab = new BehaviorSubject<int>();

  // Observable<int> currentTab;
  // Observable<int> previousTab;

  NavTab() {
    // currentTab = new Observable(subject_currentTab);
    // previousTab = new Observable(subject_previousTab);
    subject_currentTab.add(0);
    subject_previousTab.add(null);
  }

  void changeTab(int c) {
    var cr = subject_currentTab.value;
    var pr = subject_previousTab.value;
    if (cr != pr) {
      subject_previousTab.add(cr);
      subject_currentTab.add(c);
    }else{
      subject_currentTab.add(c);
    }
  }

  void backToPreviousTab() {
    var r = subject_previousTab.value;
    subject_currentTab.add(r);
  }
}

ProfilePage.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:usahaku_flutter/services/Auth.dart';
import 'package:usahaku_flutter/services/locator_service.dart';
import './LoginPage.dart';
import '../blocs/NavTab.dart';

class UserProfile extends StatefulWidget {
  @override
  UserProfileState createState() => UserProfileState();
}

class UserProfileState extends State<UserProfile> {
  Map<String, dynamic> _profile;
  StreamSubscription _profileSubs = null;

  @override
  initState() {
    super.initState();
    print('constructor');
    print('profile page');
    _profileSubs = sl.get<AuthService>().profile.listen((state) => setState(() {
          print('constructor');
          print('state');
          print(state);
          if (state == null) {
            print('navigate to loginpage');
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => LoginPage())).then((t) {
              if (t == false) {
                sl.get<NavTab>().backToPreviousTab();
              }
            });
          } else {
            _profile = state;
          }
        }));
  }

  @override
  void dispose() {
    _profileSubs.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Column(
        children: <Widget>[
          Text(_profile.toString()),
          MaterialButton(
            onPressed: () => sl.get<AuthService>().signOut(),
            child: Text('Logout'),
          )
        ],
      ),
    );
  }
}

LoginPage.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'package:usahaku_flutter/services/Auth.dart';
import '../services/locator_service.dart';

class LoginPage extends StatefulWidget {
  @override
  LoginPageState createState() => LoginPageState();
}

class LoginPageState extends State<LoginPage> {
  Observable _profileSubs = null;

  @override
  initState() {
    super.initState();
    _profileSubs = sl.get<AuthService>().user.switchMap((u) {
      if (u != null) {
        Navigator.pop(context, true);
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.chevron_left),
            onPressed: () => Navigator.pop(context, false),
          ),
          title: Text('Login'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              onPressed: () {
                sl.get<AuthService>().googleSignIn().then((value) {
                  if (value != null) {
                    Navigator.pop(context, true);
                  }
                });
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[Icon(Icons.get_app), Text('Login')],
              ),
            )
          ],
        ));
  }
}

Answer 1

I have solved this accidentally by changing code

from

 sl.get<NavTab>().subject_currentTab.listen((data) {
      _currentTabIndex = data;
      _currentPage = _pageOption[_currentTabIndex];
      print(_currentPage);
    });

to

 sl.get<NavTab>().subject_currentTab.listen((data) {
      setState(() {
        _currentTabIndex = data;
        _currentPage = _pageOption[_currentTabIndex];
      });
    });