Impossible to display BottomNavigationBar in flutter

Question

I have an issue about to display Bottom Navigation Bar. I don't understand why I have no issues in the console.


class MyApp extends StatefulWidget {
  @override

  State<StatefulWidget> createState(){
    return _MyAppState();
  }

}

class _MyAppState extends State<MyApp>  {

  int _selectedPage =0;
  final _pageOptions = [
    HomeScreen(),
    ProfileScreen(),
  ];


  @override
  Widget build(BuildContext context) {
    var localizationDelegate = LocalizedApp.of(context).delegate;
    return  LocalizationProvider(
      state: LocalizationProvider.of(context).state,
      child: MaterialApp(
          localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          localizationDelegate
        ],
        initialRoute: '',
        onGenerateRoute: MyRoutes().getRoute,
        supportedLocales: localizationDelegate.supportedLocales,
//        locale: localizationDelegate.currentLocale,
        theme: ThemeData( primarySwatch: Colors.red),
        home:  Scaffold(
          body: _pageOptions[_selectedPage],
          bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: _selectedPage,
              onTap: (int index){
                setState(() {
                  _selectedPage = index;
                });
              },
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.account_circle),
                  title: Text('Me'),
                ),
              ]
          ),
        ),
      ),
    );

  }
}

I use flutter_translate. I know it's a very simple case but I'm stuck on it. I search in google but I find nothing which can fit my case.

Thank you.

Solved

Delete App from my device (mobile)
Flutter clean in the console
Launch Debug in Android Studio

Here is a link to a tutorial where basic BottomNavigation is implemented [tutorial](https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation) — Juanes30, Feb 18 '20 at 02:25

score 1 · Answer 1 · answered Feb 17 '20 at 23:53

1

Without the location code, works fine, have you made setup of flutter_translate correctly? settings delegate and assets like below:

  var delegate = await LocalizationDelegate.create(
        fallbackLocale: 'en_US',
        supportedLocales: ['en_US', 'es', 'fa']);

  runApp(LocalizedApp(delegate, MyApp()));

https://github.com/bratan/flutter_translate/wiki/1.-Installation,-Configuration-&-Usage

Seens to me that you have missing something in that setup.

Can you describe more what happens exactly? Show some print or gif with behavior?

see ya

answered Feb 17 '20 at 23:53

Renê Guilherme Nucci

1,551
13
17

Hi, in my main.dart I put this informaton `````` void main() async { Stetho.initialize(); var delegate = await LocalizationDelegate.create( fallbackLocale: 'en', // preferences: TranslatePreferences(), supportedLocales: ['fr_DZ', 'ar_DZ', 'en']); runApp(LocalizedApp(delegate, MyApp())); } `````` In fact, I have the HomePage() but the navigationbar isn't displayed. In the beginning, When I added the navigation bar, I have some issue with the route "generator for route route settings...in the _widgetsapp state." – Micipsa Feb 18 '20 at 07:29
I have changed the place for this code ` initialRoute: '', onGenerateRoute: MyRoutes().getRoute,` And I got the HomePage() without the navigation bar – Micipsa Feb 18 '20 at 07:35
Yes you're right without the LocalizationProvider it works fine. I have followed the tuto. – Micipsa Feb 18 '20 at 17:30
Fine, maybe is something missing in setup, or just put your scaffold under a Builder widget to isolate and create a new context, can be a option... if helps you, please up vote the awnser ^^ thanks! – Renê Guilherme Nucci Feb 18 '20 at 17:34

score 1 · Answer 2 · answered Feb 18 '20 at 04:18

You can try this,

Bottom navigationbar is the property of scaffold.

bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 48.0, vertical: 3),
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                color: Colors.white,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.contact_phone),
                color: Colors.white,
                onPressed: () {},
              ),
            ],
          ),
        ),
        color: Colors.blueGrey,
      );

Hi, I will try it in a few hours Thanks – Micipsa Feb 18 '20 at 07:35 — Micipsa, Feb 18 '20 at 07:35
Okay, if it work then please upvote my answer, Thanks. – Muhammad Ali Nizami Feb 18 '20 at 10:27 — Muhammad Ali Nizami, Feb 18 '20 at 10:27

Impossible to display BottomNavigationBar in flutter

Solved

2 Answers2