Pass Data Between Pages With Bottom Navigation Bar Flutter App

admin_img Posted By Bajarangi soft , Posted On 07-11-2020

I will share how to passing data between pages with bottom navigation bar in flutter. I just commented what it is necessary to get your code works: if the complexity of your system and the relations with external API start growing it could be worth considering a Bloc architecture.

Pass Data Between Pages With Bottom Navigation Bar Flutter App

Pass Data Between Pages With Bottom Navigation Bar 
Complete Code For Pass Data Between Pages With Bottom Navigation Bar  In Flutter
main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  String text = 'Home';
  int _currIndex = 0;

  _onTap(int index) {
    setState(() => _currIndex = index);
    switch (index) {
      case 0:
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return new DataPage(data: 'Home');
        }));
        break;
      case 1:
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return new DataPage(data: 'Favorite');
        }));
        break;
      case 2:
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return new DataPage(data: 'Profile');
        }));
        break;
      case 3:
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return new DataPage(data: 'Settings');
        }));
        break;
      default:
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return new DataPage(data: 'Home');
        }));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red[900],
        title: Text("Bottom Nav Bar"),
      ),
      body: Center(
        child: Text(text,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            )),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Favorite"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("Settings"),
          ),
        ],
        onTap: _onTap,
      ),
    );
  }
}

class DataPage extends StatelessWidget {
  final String data;

  const DataPage({Key key, this.data}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red[900],
          title: Text("Data Page")),
      body: Center(
          child: Text(data,
              style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold))),
    );
  }
}

Related Post