Flutter add a card widget on another screen on button tap - flutter

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),
),
),
);
});
}
}