Flutter - How to update single item in pagination list - flutter

https://github.com/vedartm/pagination_view
I use the above library for pagination in a flutter.
I want to update single item on tap on heart sign.(without refreshing all items.)
I used paginatio_view library it's work perfect. but i want change pericualr item on tap on heart icon without refresh all list.
https://i.stack.imgur.com/BVof0.png
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: PaginationView < ProductList > (
key: key,
paginationViewType: PaginationViewType.gridView,
scrollDirection: Axis.vertical,
pageFetch: (page) => pageFetch(page),
pullToRefresh: true,
itemBuilder:
(BuildContext context, ProductList user, int index) {
return GridTile(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () => {
controller.addToWishList({
"ProductId": user.productId
}),
key
},
child: Image.asset(
height: 20,
width: 20,
user.flag ?
"assets/images/ic_like_heart.png" :
"assets/images/ic_unlike_heart.png")),
),
),
Expanded(
flex: 1,
child: CachedNetworkImage(
imageUrl: user.image,
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.contain,
),
),
),
progressIndicatorBuilder:
(context, url, progress) => Center(
child: CircularProgressIndicator(
value: progress.progress,
),
),
errorWidget: (context, url, error) =>
const Icon(Icons.warning_amber_rounded),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(user.productName),
)
],
),
),
);
},
onError: (dynamic error) =>
const Center(
child: Text(
'Some error occurred',
style: TextStyle(fontSize: 18),
),
),
onEmpty: const Center(
child: Text(
'Sorry! This is empty',
style: TextStyle(fontSize: 18),
),
),
bottomLoader: const Center( // optional
child: CircularProgressIndicator(),
),
initialLoader: const Padding(
padding: EdgeInsets.all(8.0),
child: Center(
child: CircularProgressIndicator(
backgroundColor: Colors.transparent),
),
),
),
),
)
Here is the method to get list.
Future < List < ProductList >> pageFetch(int offset) async {
page = (offset / 10).round() + 1;
_logger.d("Offset number::$offset Page number::$page");
var data = {
'Category': '',
'Search': _search,
'PageNumber': page,
'PageCount': 10
};
return await controller.getProductsList(data, page);
}

Related

Passing data from page to page firebase flutter

I am trying to pass firebase snapshot data from first page to second page in flutter using GET. I'm able to pass data from one screen to another in debug mode but not in release mode.
I have used a streambuilder on the page and a Future on second . Please where am i going wrong ?
here is code..
first page:
Container(
child: Expanded(
child: StreamBuilder(
stream: FirebaseFirestore.instance
.collection('Songs')
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return Container(
color: Colors.white24,
padding: EdgeInsets.all(10),
child: ListView(
children: snapshot.data!.docs.map((document) {
return Container(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
side: BorderSide(
color: Colors.purple, width: 2)),
elevation: 4,
child: ListTile(
title: Text(document['title'],
style: TextStyle(fontSize: 16)),
subtitle: Text(
document['artist'],
style: TextStyle(color: Colors.purple),
),
onTap: () {
Get.to(() => DetailsPage(
piss: document,
post: document.id,
));
},
contentPadding: EdgeInsets.all(20),
leading: Image.asset('assets/logo.png'),
trailing: document['isNew'] == true
? Image.asset(
'assets/new.gif',
)
: null),
),
);
}).toList(),
),
);
}),
),
),
_banner == null
? Container()
: Container(
margin: const EdgeInsets.only(bottom: 12),
height: 52,
child: AdWidget(
ad: _banner!,
),
),
],
),
),
);
}
}
second page
FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return Expanded(
child: ListView.builder(
itemCount: widget.piss['tileHeaders'].length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {
_index = index;
counter = counter + 1;
print('COUNTER: $counter');
if (counter == 3) {
_showRewardedAd();
_controller.play();
print("Counter is $counter");
counter = 0;
_createRewardedAd();
}
});
index > 0
? playIt(index)
: _controller
.load(widget.piss['videos'][index]);
},
child: Card(
elevation: 5,
child: Column(
children: [
Container(
height: 100,
child: Row(
children: [
Center(
child: Padding(
padding: EdgeInsets.all(10),
child: Expanded(
child: Image.asset(
"assets/logo.png"),
flex: 2,
// flex: 2,),
),
)),
Expanded(
child: Container(
alignment:
Alignment.topLeft,
child: Column(
children: [
Expanded(
flex: 5,
child: ListTile(
title: Text(
widget.piss[
'tileHeaders']
[index],
style: TextStyle(
fontSize:
26)),
),
),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.end,
children: [
Container(
child: widget
.piss[
'videos']
[
index]
.toString()
.contains(
'PL')
? Center(
child:
Container(child: playlist()),
)
: Center(
child:
Container(
child:
notPlaylist(),
),
),
),
],
))
],
)),
)
],
))
],
)),
);
}),
);
}
})
Please help

How to switch images in the list?

I am getting a list with images. I receive several images, when I click on the image, the _showImageDialog method works for me and an image with buttons for scrolling is displayed (I attached a screenshot below). station.photos![index]. How can I switch to the next image when I click on the button? I tried to change the index but it didn't work for me why?
void _showImageDialog(
BuildContext context, PublicChargingStationModel station) {
int index = 0;
showGeneralDialog(
context: context,
pageBuilder: (context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
color: Colors.black.withOpacity(0.6),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () => Navigator.pop(context),
child: SvgPicture.asset(
constants.Assets.closeBold,
color: constants.Colors.greyLight,
height: 26,
),
),
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
constants.Assets.arrowLeft,
color: constants.Colors.greyLight,
height: 48,
),
),
const SizedBox(width: 20),
SizedBox(
width: MediaQuery.of(context).size.width / 1.6,
height: MediaQuery.of(context).size.width / 1.1,
child: station.photos!.isNotEmpty
? CachedNetworkImage(
imageUrl: station.photos![index].url,
imageBuilder: (context, imageProvider) =>
Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
placeholder: (context, url) => Center(
child: Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
alignment: Alignment.center,
child: const CircularProgressIndicator(
color: constants.Colors.purpleMain,
),
),
),
errorWidget: (context, url, error) => const Icon(
Icons.error,
color: constants.Colors.purpleMain,
),
)
: Image.asset(
constants.Assets.publicStation,
fit: BoxFit.cover,
),
),
const SizedBox(width: 20),
GestureDetector(
onTap: () {
if (index < station.photos!.length) {
setState(() {
index++;
});
station.photos![index].url;
}
},
child: SvgPicture.asset(
constants.Assets.arrowRight,
color: constants.Colors.greyLight,
height: 48,
),
),
],
),
],
),
),
);
},
);
}
i am also facing same issue in mobile development then i know we have to rebuild the whole dialog and then it will work well
Reference for solve this same
int selectedRadio = 0; // Declare your variable outside the builder
return AlertDialog(
content: StatefulBuilder( // You need this, notice the parameters below:
builder: (BuildContext context, StateSetter setState) {
return Column( // Then, the content of your dialog.
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
// Whenever you need, call setState on your variable
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
When you call setState then it call the build method and a dialog is not a part of this context.so the simple solution is **wrap your dialog with statefulbuilder widget and then you will get a setstate method for dialog. **
You can checkout this video for solution
https://www.google.com/search?q=setstate+in+dialog+johannes+milki&oq=setstate+in+dialog+johannes+milki&aqs=chrome..69i57j33i160l5.11920j0j7&client=ms-android-samsung&sourceid=chrome-mobile&ie=UTF-8#

I want to get a download URL from firebase Storage

here is my build code for getting the URL from firebase storage and showing the image. The image name is save on my firestore as array. So i need to get the list of the image name and turn it into list of URL from firestorage.
#override
Widget build(BuildContext context){
return Container(
child: Stack(
children: [
FutureBuilder<QuerySnapshot>(
future: ref.get(),
builder: (context, snapshot) {
if(snapshot.hasError){
return Scaffold(
body: Center(
child: Text("Error: ${snapshot.error}"),
),
);
}
if(snapshot.connectionState == ConnectionState.done){
return Scaffold(
appBar: AppBar(title: Text("Home"),
centerTitle: true,
),
body: GridView(gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 2/3,
crossAxisSpacing: 15,
mainAxisSpacing: 15),
children: snapshot.data!.docs.map((document){
DateTime dt = (document['endDateTime'] as Timestamp).toDate();
List im = DownloadURL(document['imageURL']);// this are the call method
return Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child:Column(
children: [
Stack(
alignment: Alignment.center,
children: [
Ink.image(
image: NetworkImage(im[0]),
child: InkWell(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>DetailScreen(productId: document.id,)));
},
),
height: 170,
fit: BoxFit.cover,
),
],
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Padding(padding: EdgeInsets.all(4).copyWith(bottom: 0),
child: Text("${document['nameP']}",
style: TextStyle(fontSize: 16),
),
),
),
),
// SizedBox(height: 3),
Expanded(
child: Container(
alignment: Alignment.center,
child: Padding(padding: EdgeInsets.all(6).copyWith(bottom: 0),
child: Text("RM ${document['startPrice']}",
style: TextStyle(fontSize: 16),
),
),
),
),
SizedBox(height: 6),
Expanded(child: CountDownText(due: dt,
finishedText: "The Auction has End",
showLabel: true,
daysTextShort: "D ",
hoursTextShort: "H ",
minutesTextShort: "M ",
secondsTextShort: "S ",
style: TextStyle(fontSize: 16,color: Colors.deepPurpleAccent),
),
),
SizedBox(height: 2),
],
),
);
}).toList(),
),
);
}
//loading State
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
),
],
),
);
}
and here is my method for getting the download URL from firebase storage
DownloadURL(List images) async{
List url = [];
for(int i = 0; i<images.length; i++){
url.add(await st.ref('products/${images[i]}').getDownloadURL());
}
return url;
}
it will show error, type 'Future' is not a subtype of type 'List' when run the code.
DownloadURL should return List.
Future<List<String>> DownloadURL(List images) async {
...
}
See Asynchronous programming

How can I insert an initial element into Listview.builder

I want to show the defaultUserContainer() in case the stream is empty but also in case it's not, as an initial element of the list.
Currently. I can't seem to make either scenarios work. How can I design this better?
Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 16.0, top: 8.0),
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"users",
style: TextStyle(fontSize: 20.0, color: Colors.black87),
)
),
),
),
],
),
SizedBox(
height: 120,
child: FutureBuilder(
builder: (context, snapshot) {
return StreamBuilder(
stream: _firestore.collection('ts').where('userid', isEqualTo: widget.user.id).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
defaultUserContainer(); //If there's no users. tried returning it, or doing like it is here. never shows
return Text("");
} else {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
DocumentSnapshot userDoc = snapshot.data.documents[index];
if(index < snapshot.data.documents.length){
return Padding(
padding: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
child: GestureDetector(
onTap: () => {},
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 4.0,
borderRadius: BorderRadius.circular(8.0),
shadowColor: Colors.grey,
child: Row(
children: <Widget>[
Container(
child: myDetailsContainer(userDoc), //This guy works. it's just a more complicated defaultuserContainer()
),
],
),
)
)
),
),
);
}
return ListTile(leading:defaultuserContainer()); //Doesn't show when there's users users (my goal is to always have this as an initial item)
}
);
}
},
);
},
),
)
]
);
Widget defaultUserContainer() {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
height: 120,
width: 120,
color: myColors.blue,
child: Center(
child: Icon(Icons.add, size: 65, color: Colors.white),
),
),
);
}
You can define it as the first/last element of your ListView/GridView/Column/etc.
Here is a simple example with a GridView:
Full source code
import 'dart:math' show Random;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Random Generator',
home: RandomGeneratorPage(),
),
);
}
class RandomGeneratorPage extends HookWidget {
final int max;
final random = Random();
RandomGeneratorPage({Key key, this.max = 20}) : super(key: key);
#override
Widget build(BuildContext context) {
final numbers = useState<List<int>>([]);
return Scaffold(
appBar: AppBar(title: Text('Random Generator')),
body: GridView.count(
crossAxisCount: 5,
childAspectRatio: 1,
children: [
InkWell(
onTap: () =>
numbers.value = [...numbers.value, random.nextInt(max)],
child: Card(
color: Colors.blue.shade100,
child: Icon(Icons.add),
),
),
...numbers.value
.map(
(number) => InkWell(
onTap: () => numbers.value =
numbers.value.where((x) => x != number).toList(),
child: Card(
child: Center(child: Text(number.toString())),
),
),
)
.toList(),
],
),
);
}
}
In your case:
For your particular case, it would probably look like this: [NOT TESTED]
FutureBuilder(
builder: (context, snapshot) {
return StreamBuilder(
stream: _firestore
.collection('ts')
.where('userid', isEqualTo: widget.user.id)
.snapshots(),
builder: (context, snapshot) => ListView(
scrollDirection: Axis.horizontal,
children: [
InkWell(
onTap: () {},
child: Card(
color: Colors.blue.shade100,
child: Icon(Icons.add),
),
),
...snapshot.data.documents.map(
(doc) => Padding(
padding:
const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
child: GestureDetector(
onTap: () => {},
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 4.0,
borderRadius: BorderRadius.circular(8.0),
shadowColor: Colors.grey,
child: Row(
children: <Widget>[
Container(
child: myDetailsContainer(
doc), //This guy works. it's just a more complicated defaultuserContainer()
),
],
),
),
),
),
),
),
)
],
),
);
},
)

Flutter UI List Item

I am using the below code but not able to achieve the desired result, I am new to the flutter world so let me know where to improve to get the desired result. Here is the source code of what I have done.
return Expanded(
child: GridView.builder(
controller: _scrollController,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: albumList.length,
itemBuilder: (BuildContext context, int index) {
return buildRow(index);
},
),
);
Widget buildRow(int index) {
return AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
);
}
This the Album Tile
class AlbumTile extends StatelessWidget {
AlbumTile(
{Key key,
#required this.index,
#required this.albumList,
#required this.deleteAlbum})
: super(key: key);
final int index;
final List<Album> albumList;
final Function deleteAlbum;
#override
build(BuildContext context) {
String thumb;
if (albumList.elementAt(index).thumbUrl != "") {
thumb = WEBSERVICE_IMAGES +
albumList.elementAt(index).userId.toString() +
'/' +
albumList.elementAt(index).id.toString() +
'/' +
albumList.elementAt(index).thumbUrl;
} else {
thumb = "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg";
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage(thumb),
),
borderRadius: BorderRadius.circular(12.0)),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text(albumList.elementAt(index).name,
style: TextStyle(
fontSize: 18.5,
color: Colors.white,
fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text(albumList.elementAt(index).photos.toString() +' photos',
style: TextStyle(
fontSize: 12.5,
color: Colors.white,
fontWeight: FontWeight.w500))
],
),
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
},
),
],
),
),
),
),
);
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Stack(
fit: StackFit.loose,
children: <Widget>[
ClipRRect(
borderRadius: new BorderRadius.circular(8.0),
child: FadeInImage.assetNetwork(
height: 1000,
placeholder: kPlaceHolderImage,
image: thumb,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Text(
albumList.elementAt(index).name,
style: TextStyle(
color: Colors.white,
fontSize: 18.5,
),
textAlign: TextAlign.left,
),
),
),
PopupMenuButton(
icon: ImageIcon(
AssetImage("graphics/horizontal_dots.png"),
color: Colors.white,
),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
}),
],
),
),
],
),
),
);
}
}
Thank you in advance.
Welcome to the flutter. Amazing platform to start you career on building cross-platform mobile applications.
My code will look a bit different to you, but trust me, this will work out for you.
Please note: You need to change some parts, like changing the image url for NetworkImage(), onTap function, Text() content etc. But not much changes in the Whole Widget code. So please look for those, and make changes accordingly. You will get there :)
GestureDetector(
onTap: () => print('Works!'), // <-- onTap change, I have used print()
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg')
),
borderRadius: BorderRadius.circular(12.0)
),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text('Potraits', style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text('150 photos', style: TextStyle(fontSize: 17.0, color: Colors.white, fontWeight: FontWeight.w500))
]
)
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
//your function
}
)
]
)
)
)
)
)
Result
EDITS FOR WHOLE UI
So, the change required is in your buildRow Widget. You just need to give some paddings on your sides, and you are pretty much solid. Let me know
Widget buildRow(int index) {
return Padding(
padding: EdgeInsets.all(10.0),
child: AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
)
);
}
And if you are unsatisfied with the spacings, just keep playing with the EdgeInsets painting class. I hope that helps. Please let me know. :)