Hide icons before authorization and display after using BottomNavigationBar in flatter

Viewed 77

I have a navigation menu that I made for the test application, there are some tabs as I want to hide if I have not logged in to the application. Once I log in, these tabs should appear. Here is my code for the navigation menu.

import 'package:flutter/material.dart';
import 'package:flutter_app_seals/Status.dart';
import 'package:flutter_app_seals/Seals_List.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_app_seals/auth_page.dart';
import 'package:flutter_app_seals/Setting_glob.dart';
import 'package:sentry_flutter/sentry_flutter.dart';
import 'package:flutter_app_seals/model/add_seals/JsonAddSeals.dart';
import 'package:flutter_app_seals/model/user_page/page.dart';
import  'package:flutter_app_seals/model/setting/globalvar.dart' as global;




class Main_Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new LoginPage());
  }
}

class LoginPage extends StatefulWidget {

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

class _LoginPageState extends State<LoginPage> {

 


  int _pageIndex = 0;
  PageController _pageController;

  List<Widget> tabPages = [
    Login(),
    Setting(),
    UserPage(),
    Status_Obj(),
    Status_seals(),
    JsonParseAddSeals(),
  ];

  @override
  void initState(){
    super.initState();
    _pageController = PageController(initialPage: _pageIndex);
  }

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




  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: new Scaffold(
          resizeToAvoidBottomInset: false,
              bottomNavigationBar: BottomNavigationBar(
                showSelectedLabels: true,   // <-- HERE
                showUnselectedLabels: true, // <-- AND
                currentIndex: _pageIndex,
                onTap: onTabTapped,
                backgroundColor: Colors.blue,
                items: <BottomNavigationBarItem>[
                  new BottomNavigationBarItem( icon: Icon(Icons.admin_panel_settings_outlined), title: Text(" Вхід"),backgroundColor: Colors.lightBlue),
                  new BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("Налаштування"),backgroundColor: Colors.lightBlue),
                   if(global.nameUser ?.isNotEmpty == true)...[
                    new BottomNavigationBarItem(icon: Icon(Icons.person_pin), title: Text("Користувач"),backgroundColor: Colors.lightBlue),
                    new BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Пломбування"),backgroundColor: Colors.lightBlue),
                    new BottomNavigationBarItem(icon: Icon(Icons.qr_code), title: Text("Пломби"),backgroundColor: Colors.lightBlue),
                    new BottomNavigationBarItem(icon: Icon(Icons.add_outlined), title: Text("Акт приймання"),backgroundColor: Colors.lightBlue),
                  ]

                ],

              ),
            body: PageView(
              children: tabPages,
              onPageChanged: onPageChanged,
              controller: _pageController,
            ),
          ),
    );



  }
  void onPageChanged(int page) {
    setState(() {
      this._pageIndex = page;
    });
  }

  void onTabTapped(int index) {
    this._pageController.animateToPage(index,duration: const Duration(milliseconds: 500),curve: Curves.easeInOut);
  }
}

The problem is that when I log in I go to the desired page, I do not see all the icons of the navigation menu. In order for them to appear, I need to click on one of the icons that are available (only 2 icons are available for authorization) and only then the navigation menu will be updated and everything will be as it should be. All 6 icons will be visible! Here is my auto authorization code:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'Status.dart';
import 'dart:io';
import  'package:flutter_app_seals/model/setting/globalvar.dart' as global;
import 'package:flutter_aes_ecb_pkcs5/flutter_aes_ecb_pkcs5.dart';
import 'package:flutter/widgets.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/foundation.dart';
import  'package:flutter_app_seals/model/user_page/page.dart' ;
void main() => runApp(Login());


class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new LoginPage(
            storage: Storage()
        )
    );
  }
}

class LoginPage extends StatefulWidget {

  final Storage storage;

  LoginPage({Key key, @required this.storage}) : super(key: key);

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

class _LoginPageState extends State<LoginPage> {
  //Info about users
  String state;

  @override
  void initState() {
    super.initState();
    widget.storage.readData().then((String value) {
      setState(() {
        global.urlVar = value;
      });
    });
  }

  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.transparent));
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.blue, Colors.white],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter),
        ),
        child: _isLoading ? Center(child: CircularProgressIndicator()) : ListView(
          children: <Widget>[
            headerSection(),
            textSection(),
            buttonSection(),

          ],
        ),
      ),
    );
  }


  signIn(String login, pass) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();

    var AESLogin = login;
    var AESpass = pass;
    //generate a 16-byte random key
    var key = '123111111111111111121212';

    print(key);
    //encrypt
    var encryptLogin = await FlutterAesEcbPkcs5.encryptString(AESLogin, key);
    var encryptPass = await FlutterAesEcbPkcs5.encryptString(AESpass, key);




    HttpClient client = new HttpClient();
    client.badCertificateCallback = ((X509Certificate cert, String host, int port) => true);


    String url = 'testUrl';

    Map map = {
      "login": encryptLogin,
      "pass": encryptPass
    };

    HttpClientRequest request = await client.postUrl(Uri.parse(url));

    request.headers.set('content-type', 'application/json');

    request.add(utf8.encode(json.encode(map)));

    HttpClientResponse response = await request.close();


    var responseBody = await response.transform(utf8.decoder).join();

    Map jsonResponse = json.decode(responseBody);

    print(jsonResponse);

    if (response.statusCode == 200) {
      if (jsonResponse['message'] ==
          '200') { //if( jsonResponse['message'] == '200') {
        setState(() {
          _isLoading = false;
        });

        global.nameUser = jsonResponse['name'];
        global.dataArea = jsonResponse['data_area'];

        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => UserPage()),
        );
      }
      else {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => Error_Auth()),
        );
      }
    }

    else   {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Container buttonSection() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 40.0,
      padding: EdgeInsets.symmetric(horizontal: 15.0),
      margin: EdgeInsets.only(top: 15.0),
      child: RaisedButton(
        onPressed: emailController.text == "" || passwordController.text == "" ? null : () {
          setState(() {
            _isLoading = true;
          });
          signIn(emailController.text, passwordController.text);
        },
        elevation: 0.0,
        color: Colors.purple,
        child: Text("Log in", style: TextStyle(color: Colors.white70)),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
      ),
    );
  }

  final TextEditingController emailController = new TextEditingController();
  final TextEditingController passwordController = new TextEditingController();

  Container textSection() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: emailController,
            cursorColor: Colors.white,

            style: TextStyle(color: Colors.white70),
            decoration: InputDecoration(
              icon: Icon(Icons.login, color: Colors.white70),
              hintText: "Name",
              border: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white70)),
              hintStyle: TextStyle(color: Colors.white70),
            ),
          ),
          SizedBox(height: 30.0),
          TextFormField(
            controller: passwordController,
            cursorColor: Colors.white,
            obscureText: true,
            style: TextStyle(color: Colors.white70),
            decoration: InputDecoration(
              icon: Icon(Icons.lock, color: Colors.white70),
              hintText: "Pass",
              border: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white70)),
              hintStyle: TextStyle(color: Colors.white70),
            ),
          ),

        ],
      ),

    );
  }

  Container headerSection() {
    return Container(
      alignment: Alignment.topCenter,
      margin: EdgeInsets.only(top: 50.0),
      child: Text("Пломби",
          style: TextStyle(
              color: Colors.white70,
              fontSize: 40.0,
              fontWeight: FontWeight.bold)),
    );
  }
}
class Error_Auth extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final AlertDialog dialog = AlertDialog(
      title: Text('Помилка при авторизації'),
      content:
      Text('Повторити спробу авторизації'),
      actions: [
        FlatButton(
          textColor: Color(0xFF6200EE),
          onPressed: () => SystemNavigator.pop(),
          child: Text('Ні'),
        ),
        FlatButton(
          textColor: Color(0xFF6200EE),
          onPressed: () {  Navigator.push(
            context,MaterialPageRoute(builder: (context) => Login()),
          );
          },
          child: Text('Так'),
        ),
      ],
    );
    return Scaffold(
        body:dialog
    );
  }
}

class Storage {
  Future<String> get localPath async {
    final dir = await getApplicationDocumentsDirectory();
    return dir.path;
  }

  Future<File> get localFile async {
    final path = await localPath;
    return File('$path/db.txt');
  }

  Future<String> readData() async {
    try {
      final file = await localFile;
      String body = await file.readAsString();

      return body;
    } catch (e) {
      return e.toString();
    }
  }

  Future<File> writeData(String data) async {
    final file = await localFile;
    return file.writeAsString("$data");
  }
}

After I log in to the application and go to the user page, the navigation menu is not updated and only 2 icons are available.

1 Answers

Solution 1: Pass the controller to the Login page

 List<Widget> tabPages = [];

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _pageIndex);
    tabPages = [
      Login(_pageController),
      Setting(),
      UserPage(),
      Status_Obj(),
      Status_seals(),
      JsonParseAddSeals(),
    ];
  }

And instead of

   Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => UserPage()),
        );

use

   widget.pageController?.animateToPage(2,
        duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);

Solution 2: Put your controller in your global dart.

Cool login page by the way :-)

Related