Why is my bottom navigation bar becoming blank upon push?

Question

When i invoke the loadingDelete method upon deleting a post where the Navigator.push.. takes place, i am directed to the Profile page but with my bottom navigation bar empty (appearing empty where icons(content) are blank).

I keep on encountering this problem when i either upload or delete a post..I tried replacing scaffold with MaterialApp but did't work...

This is where my loadingDelete method resides:

 class PostStateless extends StatelessWidget {
 final Post post2;

 PostStateless(this.post2);

  @override
 Widget build(BuildContext context) {
 print("REACHED HERE BEG "+post2.toString());

 return new Scaffold(
  resizeToAvoidBottomInset: false,
  body:PostPage(post2),
 );
 }
 }

 class PostPage extends StatefulWidget {
 final Post post2;

 PostPage(this.post2);

 @override
 PostPageState createState() => new PostPageState(post2);
 }

 class PostPageState extends State<PostPage> with TickerProviderStateMixin {
  ...
  ..
 loadingDelete()
 {

  if(!loadingDeletePost)
  return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("lib/assets/BackToEarth.jpg"),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(
        child: Row(
            mainAxisSize: MainAxisSize.min, //centered things bil nos
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.black),
              )
            ]),
        /* add child content here */
      ));
     else {
                  Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) =>
                  Profile()), (Route<dynamic> route) => false);
          //Navigator.push alone redirects me to the profile page with blank nav bar plus arrow back  
            visible in my app bar(Worse).
      }

       }
        ....
       }

This is my Profile page structure:

 class Profile extends StatelessWidget {

@override
Widget build(BuildContext context) {


return Scaffold(
  body: ProfilePage(),
);
}
}

class ProfilePage extends StatefulWidget {
@override
_ProfilePageState createState() => new _ProfilePageState();
 }

 class _ProfilePageState extends State<ProfilePage> {

 ...
 ...
 }

This is the structure of my global bottom nav bar which resides in my mainn dart file under MaterialApp Widget:

 void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(

  debugShowCheckedModeBanner: false,
  title: 'Instagram',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(),

 );
 }
 } 


 class MyHomePage extends StatefulWidget {
 @override
_MyHomePageState createState() => _MyHomePageState();
 }
 ManageUserModel user;
class _MyHomePageState extends State<MyHomePage> {

ApiService apiService = ApiService();
List<Widget> pages = [
HomePage(),
SearchPage(),
Post(),
NotificationsPage(),
ProfilePage()
];

 saveVariable(ManageUserModel user) async {
 // save variable
  SharedPreferences sharedUser = await SharedPreferences.getInstance();
String userSt=toJson(user);
print("USERST: "+userSt);
sharedUser.setString('user', userSt);
}

@override
void initState() {
apiService.getUsers("beeso").then((result) {
  setState(() {
    user = result;
    print("USERRRR" +user.toString());
    saveVariable(user);
  });
});
super.initState();
 }

 @override
 Widget build(BuildContext context) {
return DefaultTabController(
  length: 5,
  initialIndex: 0,
  child: Scaffold(
    body: TabBarView(
      children: pages,
    ),
    bottomNavigationBar:

    Container(

      margin: EdgeInsets.only(bottom: 20),
      child: new TabBar(
        tabs: [
          Tab(
            icon: Icon(Icons.home),
          ),
          Tab(
            icon: Icon(Icons.search),
          ),
          Tab(
            icon: Icon(Icons.add),
          ),
          Tab(
            icon: Icon(Icons.favorite),
          ),
          Tab(
            icon: Icon(Icons.perm_identity),
          ),
        ],
        unselectedLabelColor: Colors.black,
        labelColor: Colors.blue,
        indicatorColor: Colors.transparent,
      ),
    ),
    ),
   );
  } 

  }

Any help is appreciated!!

Texv · Answer 1 · 2020-04-04T03:49:50.193

1

Change the navigation to the following code:

Navigator.of(context).popUntil((route) => route.isFirst);

edited Apr 04 '20 at 03:49

answered Apr 03 '20 at 01:34

Texv

1,225
10
14

But how i dont want to navigate to main.dart, i want to view the profile page which has the bottom navigation bar visible in it initially.. i edited my question to clarify the pages variable that represents the children of the TabViewBar. @Texv – DCodes Apr 03 '20 at 01:54
I cannot see any code for a bottom navigation bar in your profile page. All i can see is a scaffold body. Your main page is where the bottom navigation bar is located which then views the profile page as a widget. – Texv Apr 03 '20 at 02:03
it didn't work even when i navigated to my HomePage() where the bottom nav resides.It disappeared.. I edited my main class so that it's fully clear. @Texv – DCodes Apr 03 '20 at 04:57
1

@DCodes would poping the navigation back to first index work? Navigator.of(context).popUntil((route) => route.isFirst); – Texv Apr 03 '20 at 12:00
It worked @Texv! i am also facing this problem somewhere else i moved from main->PostPage1->PostPage2->Profile .. When i want to navigate to profile from postPage2 this problem is also appearing , a bit different from this. Do you suggest an approach? – DCodes Apr 03 '20 at 14:32
@DCodes Try naming your profile page with an ID, then navigate to it using: Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName)) – Texv Apr 03 '20 at 15:07
If it doesnt work, I think the problem might be because the profile page does not contain any navigation bar and is acting as a pageviewer. When navigator.pop worked, it was because it went back to a destination other than the 'Profile'. Ive had a problem like this before and I fixed it by creating a new page that contains just the bottom navigation bar that you can navigate to it; and in your HomePage() return the navigation bar from that new page – Texv Apr 03 '20 at 15:12
I solved this by creating a new stateless materialApp widget with a different initial index @Texv thank you for your support!! – DCodes Apr 04 '20 at 21:53

Why is my bottom navigation bar becoming blank upon push?

1 Answers1