Flutter add a card widget on another screen on button tap

Question

I am working on an app in which I want to add some card widgets on the home screen when a user selects the cards on the explore screen. Since I am new to flutter I need some assistance with code.

It is like it would be adding a favourite or bookmark feature. If you want to check the full code here is the link to the github : https://github.com/Ankitkj1999/study_lpu/tree/mark_feature explore.dart

import 'package:flutter/material.dart';

class ExploreScreen extends StatelessWidget {
  const ExploreScreen({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ListViewHome();
  }
}

class ListViewHome extends StatelessWidget {
  final titles = ["List 1", "List 2", "List 3", "List 4"];
  final subtitles = [
    "Here is list 1 subtitle",
    "Here is list 2 subtitle",
    "Here is list 3 subtitle",
    "Here is list 4 subtitle"
  ];
  // final icons = [
  //   // IconButton(onPressed: () {}, icon: const Icon(Icons.add)),
  //   // Icons.access_alarm,
  //   // Icons.access_time,
  //   Icons.add
  // ];

  ListViewHome({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: titles.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(titles[index]),
              subtitle: Text(subtitles[index]),
              leading: const CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1547721064-da6cfb341d50")),
              trailing: IconButton(
                onPressed: () {},
                icon: const Icon(Icons.add),
              ),
            ),
          );
        });
  }
}

class pushAdd extends StatelessWidget {
  const pushAdd({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    showWidget() {
      return const Scaffold(
        body: Center(
          child: Text('Home'),
        ),
      );
    }

    return showWidget();
  }
}

home.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:study_lpu/explore.dart';
import 'package:study_lpu/fav.dart';
import 'login.dart';
import 'explore.dart';

// bottom navigation tutorial https://blog.logrocket.com/how-to-build-a-bottom-navigation-bar-in-flutter/
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late String uid;
  int _selectedIndex = 0;

  static const List<Widget> _pages = <Widget>[
    // Scaffold(
    //   body: Center(
    //     child: Text('Hot'),
    //   ),
    // ),
    pushAdd(),
    ExploreScreen(),
    RandWords(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
          actions: [
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const LoginScreen()),
                    (route) => false);
              },
            )
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book_outlined),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outlined),
              label: 'Profile',
            )
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
        body:
            // Center(
            //   // child: Text(uid),
            //   child: _pages.elementAt(_selectedIndex),
            // ),
            IndexedStack(
          index: _selectedIndex,
          children: _pages,
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    uid = FirebaseAuth.instance.currentUser!.uid;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

Answer 1

Here is how you can do that in a basic way without using any provider. Firstly you need to put your data in a model to access the variable properly. second, in home page I defined a list of model that is empty and also defined a function that adds card to the list executed in explore page. Also you need to make a view in home page to show added card to the list

class MyCardModel {
  String? title;
  String? subTitle;
  String? leadingImage;

  MyCardModel(String title, String subTitle, String leadingImage) {
    this.title = title;
    this.subTitle = subTitle;
    this.leadingImage = leadingImage;
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late String uid;
  int _selectedIndex = 0;
  List<MyCardModel> listOfCard = [];

  void addCardToListMethod(MyCardModel card) {
    setState(() {
      listOfCard.add(card);
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _pages = <Widget>[
      Scaffold(
        body: Center(
            child: ListView.builder(
                itemCount: listOfCard.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(listOfCard[index].title!),
                      subtitle: Text(listOfCard[index].subTitle!),
                      leading: CircleAvatar(
                          backgroundImage:
                              NetworkImage(listOfCard[index].leadingImage!)),
                    ),
                  );
                })),
      ),
      pushAdd(),
      ExploreScreen(addCardToListMethod: addCardToListMethod),
      RandWords(),
    ];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
          actions: [
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const LoginScreen()),
                    (route) => false);
              },
            )
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book_outlined),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outlined),
              label: 'Profile',
            )
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
        body:
            // Center(
            //   // child: Text(uid),
            //   child: _pages.elementAt(_selectedIndex),
            // ),
            IndexedStack(
          index: _selectedIndex,
          children: _pages,
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    uid = FirebaseAuth.instance.currentUser!.uid;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

class ExploreScreen extends StatelessWidget {
  Function? addCardToListMethod;
  ExploreScreen({Key? key, this.addCardToListMethod}) : super(key: key);

  List<MyCardModel> myCardList = [
    MyCardModel("List1", "here is list 1 subtitle",
        "https://images.unsplash.com/photo-1547721064-da6cfb341d50"),
    MyCardModel("List1", "here is list 1 subtitle",
        "https://images.unsplash.com/photo-1547721064-da6cfb341d50")
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: myCardList.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(myCardList[index].title!),
              subtitle: Text(myCardList[index].subTitle!),
              leading: CircleAvatar(
                  backgroundImage:
                      NetworkImage(myCardList[index].leadingImage!)),
              trailing: IconButton(
                onPressed: () {
                  addCardToListMethod!(myCardList[index]);
                },
                icon: const Icon(Icons.add),
              ),
            ),
          );
        });
  }
}