Search code examples
firebaseflutterdartdart-pubflutter-test

How i can pass Data from one widget to another widget in flutter?


I want to pass Data from one widget to another widget. I'm getting data from firebase and I want the pass that data across the widgets. How to pass Data from one screen to another screen. this is how my code looks like.

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _currentindex = 0;
  final List<Widget> _children = [
    Dashboard(),
    Search(),

  ];

  void onTappedBar(int index) {
    setState(() {
      _currentindex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<User>(context);
    return StreamBuilder<UserData>(
        stream: DatabaseService(uid: user.uid).userData,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            UserData userData = snapshot.data;
            return return Scaffold(
      backgroundColor: Color(0xFFf6f5fb),
      body: _children[_currentindex],
      bottomNavigationBar: CurvedNavigationBar(
        onTap: onTappedBar,
        index: _currentindex,
        items: <Widget>[
          Icon(
            Icons.home,
          ),
          Icon(
            Icons.search,     
        ],
      ),
    );
        });
  }
}

From this widget, Data get loaded from firebase. Now I want pass snapshot.data to Dashboard() widget and Search() widget.

i want show the username Dashboard(). this how my ```Dashboard()`` Widget for exmaple

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Here i want display the data')
      ),
    );
  }
}

Here is the model class:

class User {
  final String uid;

  User({this.uid});
}

class UserData {

  final String uid;
  final String username;
  final String phonenumber;

  UserData({ this.uid, this.username, this.phonenumber });
}



Solution

  • pass it through constructor if it is simple scenario like yours:

    class Dashboard extends StatefulWidget {
      final UserData userData;
    
      // userData is not optional-named parameter
      const Dashboard(this.userData, {Key key}) : super(key: key);
      @override
      _DashboardState createState() => _DashboardState();
    }
    
    class _DashboardState extends State<Dashboard> {
      @override
      Widget build(BuildContext context) {
        final UserData userData = widget.userData;//do something with user
        return Center(
            child: Text('user is ${user.username}')
        ),
        );
      }
    }
    

    and the HomeState (don't save widgets as fields of the class, create them on the fly):

    class _HomeState extends State<Home> {
      int _currentindex = 0;
    
      void onTappedBar(int index) {
        setState(() {
          _currentindex = index;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        final user = Provider.of<User>(context);
        return StreamBuilder<UserData>(
            stream: DatabaseService(uid: user.uid).userData,
        builder: (context, snapshot) {
        if (snapshot.hasData) {
        UserData userData = snapshot.data;
        return  Scaffold(
        backgroundColor: Color(0xFFf6f5fb),
        body: Column(
                   children: [
                     Dashboard(userData),
                     Search(userData),
                     ],
        ),
        bottomNavigationBar: CurvedNavigationBar(
        onTap: onTappedBar,
        index: _currentindex,
        items: <Widget>[
        Icon(
        Icons.home,
        ),
        Icon(
        Icons.search,
        ],
        ),
        );
        });
        }
      }