0

He creado una pantalla donde tengo 5 widgets ya creados y que funcionan corrctamente , ahora e añadido una bottomNavigationBar que se posiciona y funciona y se ve visualmente correctamente , el problema es que nose como enlazarle a los botones que ya tine las otras paginas que tengo creadas , e probado mucas cosas pero con mi codigo alctual nose como hacerlo. Solo me falta hacerle las llamadas a las otras paginas . Un saludo.

introducir la descripción de la imagen aquí

int _selectedIndex = 0;
    class MyAppState extends State<Myappdos> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp( 
          debugShowCheckedModeBanner: false,
          home: Scaffold( 
          bottomNavigationBar:
           BottomNavigationBar(
              backgroundColor: Colors.white,
              selectedFontSize: 17.4,
              currentIndex: _selectedIndex,
              onTap: (int index){
                setState(() {
                  _selectedIndex = index;
                });
              },
              fixedColor: Colors.blue,//cuando clikamos el color k se vera
              type: BottomNavigationBarType.fixed,
              items: < BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Image.asset('assets/images/icons/ic_home.png', width: 26),
                  activeIcon: Image.asset('assets/images/icons/ic_home_active.png', width: 26),
                  title: Text('Inicio')
                ),
                BottomNavigationBarItem(
                  icon: Image.asset('assets/images/icons/ic_search.png', width: 26),
                  activeIcon: Image.asset('assets/images/icons/ic_search_active.png', width: 26),
                  title: Text('Buscar')
                ),
                 BottomNavigationBarItem(
                  icon: Image.asset('assets/images/icons/ic_camera.png', width: 26),
                  activeIcon: Image.asset('assets/images/icons/ic_camera_active.png', width: 26),
                  title: Text('Publicar')
                ),
                 BottomNavigationBarItem(
                  icon: Image.asset('assets/images/icons/ic_notifications.png', width: 26),
                  activeIcon: Image.asset('assets/images/icons/ic_notifications_active.png', width: 26),
                  title: Text('Notificaciones')
                ),
                 BottomNavigationBarItem(
                  icon: Image.asset('assets/images/icons/ic_user.png', width: 26),
                  activeIcon: Image.asset('assets/images/icons/ic_user_active.png', width: 26),
                  title: Text('Perfil',)
              ),
            ]
          ),
            body:Container(
          child:Column( 
            children:<Widget>[
              Padding(
                padding: const EdgeInsets.only(
                  bottom: 5,
                ),
                child: renderAppBar(),
              ),
              renderPata(),
              renderFoto(),
              renderIconos(),
              renderTexto(),
            ]
          ),
          ),
        )
        );
      }
}   
1
  • Podrías compartir algo mas que indique lo que necesitas mas específicamente por favor
    – Richard
    el 7 may. 2020 a las 3:51

1 respuesta 1

0

Esto se puede realizar de diferentes maneras, una manera fácil seria la siguiente

1. Creamos el home

Para este caso seria la primera pantalla a mostrar en tu app, que supongo es lo que tienes en estos momentos en el código.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(
            bottom: 5,
          ),
          child: renderAppBar(),
        ),
        renderPata(),
        renderFoto(),
        renderIconos(),
        renderTexto(),
      ]),
    );
  }
}

2. Creamos una segunda página para cuestiones de ejemplo.

class PaginaDos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child:Text('Pagina dos')
      ),
    );
  }
}

3. Con lo que ya tiene se hace referencia a las 2 páginas

final _pages = [Home(),PaginaDos()];

Esto se lo asignamos al body del Scaffold que es el que contiene nuestro BottomNavigationBar

body: _pages[_selectedIndex],

Código Final

class MyAppState extends State<Myappdos> {
  int _selectedIndex = 0;

  final _pages = [Home(),PaginaDos()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          bottomNavigationBar: BottomNavigationBar(
              backgroundColor: Colors.white,
              selectedFontSize: 17.4,
              currentIndex: _selectedIndex,
              onTap: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              fixedColor: Colors.blue, //cuando clikamos el color k se vera
              type: BottomNavigationBarType.fixed,
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                    icon: Image.asset('assets/images/icons/ic_home.png',
                        width: 26),
                    activeIcon: Image.asset(
                        'assets/images/icons/ic_home_active.png',
                        width: 26),
                    title: Text('Inicio')),
                BottomNavigationBarItem(
                    icon: Image.asset('assets/images/icons/ic_search.png',
                        width: 26),
                    activeIcon: Image.asset(
                        'assets/images/icons/ic_search_active.png',
                        width: 26),
                    title: Text('Buscar')),
                BottomNavigationBarItem(
                    icon: Image.asset('assets/images/icons/ic_camera.png',
                        width: 26),
                    activeIcon: Image.asset(
                        'assets/images/icons/ic_camera_active.png',
                        width: 26),
                    title: Text('Publicar')),
                BottomNavigationBarItem(
                    icon: Image.asset(
                        'assets/images/icons/ic_notifications.png',
                        width: 26),
                    activeIcon: Image.asset(
                        'assets/images/icons/ic_notifications_active.png',
                        width: 26),
                    title: Text('Notificaciones')),
                BottomNavigationBarItem(
                    icon: Image.asset('assets/images/icons/ic_user.png',
                        width: 26),
                    activeIcon: Image.asset(
                        'assets/images/icons/ic_user_active.png',
                        width: 26),
                    title: Text(
                      'Perfil',
                    )),
              ]),
          body:  _pages[_selectedIndex],
        ));
  }
}

Navegación mediante rutas

Lo siguiente es a modo de ejemplo para navegar de una pagina a otra.

Definé las rutas

MaterialApp(
  // Inicie la aplicación con la ruta con nombre "/". En nuestro caso, la aplicación comenzará
  // en el Widget FirstScreen
  initialRoute: '/',
  routes: {
    // Cuando naveguemos hacia la ruta "/", crearemos el Widget FirstScreen
    '/': (context) => FirstScreen(),
    // Cuando naveguemos hacia la ruta "/second", crearemos el Widget SecondScreen
    '/second': (context) => SecondScreen(),
  },
);

Navega a la segunda pantalla

// Dentro del Widget `FirstScreen` con el uso de un button
onPressed: () {
  // Navega a la segunda pantalla usando una ruta con nombre
  Navigator.pushNamed(context, '/second');
}

Regresa a la primera pantalla

// Dentro del widget SecondScreen
onPressed: () {
  // Navega de regreso a la primera pantalla haciendo clic en la ruta actual
  // fuera de la pila
  Navigator.pop(context);
}

Puedes encontrar mas información sobre las rutas con nombre en la pagina oficial.

6
  • Hola richard , tengo otra pagina que es la que se muestra namas arrancar la app que es un login , claro la question es que donde pones el codigo de creamos la home no es la home sino que es la 2 pantalla de la app la que debe de tener los dos condigos juntos , hay la question como implementar los 5 widgest mas la botomnavigation bary desde ya la 2 pantalla llamar a otras . el 5 may. 2020 a las 16:22
  • añadi una imagen. el 5 may. 2020 a las 16:33
  • @joelcollado cuando me refiero a Home no es la primera página de tu app si no la primera página que se muestra al llegar a a la pagina del BottomNavigationBar, podrías especificar un poco mas cual es el problema en tu pregunta por favor. La imagen solo me da a entender que Perfil es un contenido mas de tu menu
    – Richard
    el 5 may. 2020 a las 19:43
  • nono eso esta bien richar mi problema es que no puedo fusionar en una misma pagina el codigo de los widgets y el codigo de la botonnavigationbar , osea o instancio la botonnavigationbar como tu me as dicho o instancio los widgets pero no encuentro un codigo donde los dos esten en la misma pagina .ose que se vea como en la foto porque el problmea surge cuando tengo k meterle esto _pages[_selectedIndex] al body que no puedo porque esta ocupado ya. el 6 may. 2020 a las 15:01
  • @joelcollado, Si entiendo bien tu tienes todos los Widgets en un solo archivo? que es tu archivo main.dart que es también donde esta el BottomNavigationBar?. si es correcto lo que digo, coloca lo puse en el paso 1 en otro archivo .dart tal cual esta y lo mandas a llamar como te puse el ejemplo
    – Richard
    el 7 may. 2020 a las 1:25

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.