StreamBuilder(
stream: data.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
const Center(child: CircularProgressIndicator(color: Colors.blue));
}
if (snapshot.hasData) {
return ListView.builder(
physics: const BouncingScrollPhysics(parent: BouncingScrollPhysics()),
padding: EdgeInsets.zero,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data?.docs.length,
itemBuilder: (context, index) {
final DocumentSnapshot records = snapshot.data!.docs[index];
return Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10, left: 10),
child: SizedBox(
width: 188,
child: Stack(
children: [
// IMAGE 2D
Container(
height: 135,
width: 135,
decoration: const BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
),
child: DropShadowImage(
image: Image.network(
records["image2D"],
fit: BoxFit.fitHeight,
),
offset: Offset(10, 10),
scale: 1,
blurRadius: 12,
borderRadius: 20,
),
),
],
)),
);
},
);
}
return Container();
}),
I have a list of pictures of planets. And what I need to do is set shadows for these images. I used DropShadowImage to do this. However I have a problem, that the first element of this list seems to be under a shadow layer, the rest of the list elements are working fine.
How can I fix this.
Thanks a lot.
enter image description here
Related
I have an edit view which contains an image list.I'm using image picker to upload multiple images and created the image list.When the edit view comes I have displayed the previous uploaded images from the API and I need to edit this images(remove/add).I have done thee display and remove part but I can't use the image picker to upload more images in the edit view.Can someone please give me a solution to this.
This is the images I'm getting for edit view,
_imageGridEdit() {
return ChangeNotifierProvider.value(
value: _postGetNotifier,
child: Consumer<PostGetNotifier>(builder: (context, imgNtfr, child) {
if (imgNtfr.isLoading == true) {
return Container();
} else {
return imgNtfr.post?.images?.length == 0
? Container()
: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: imgNtfr.post?.images?.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 8,
mainAxisSpacing: 8),
itemBuilder: (BuildContext context, int index) {
return imgNtfr.post?.images?.length == 0
? Container()
: Stack(children: [
Container(
height: 150,
width: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.network(
'${Config.API_URL}/file/${imgNtfr.post?.images?[index].id}',
height: 150,
width: 200,
fit: BoxFit.cover,
)),
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 20,
width: 20,
child: FloatingActionButton(
heroTag: 'rem1',
backgroundColor: const Color(0xffED104D),
onPressed: () {
setState(() => imgNtfr.post?.images
?.removeAt(index));
},
child: const Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
),
)
]);
});
}
}));
}
This is how I'm displaying the images getting from image picker
_imageGrid() {
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _imageFileList == null
? 0
: (_imageFileList!.length > 5 ? 5 : _imageFileList!.length),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8),
itemBuilder: (BuildContext context, int index) {
return _imageFileList!.length == 0
? Container()
: Stack(children: [
Container(
height: 150,
width: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.file(
File(_imageFileList![index].path),
fit: BoxFit.cover,
)),
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 20,
width: 20,
child: FloatingActionButton(
heroTag: 'rem1',
backgroundColor: const Color(0xffED104D),
onPressed: () {
setState(() => _imageFileList?.removeAt(index));
},
child: const Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
),
)
]);
});
}
what I need is to use the image picker images and the edit displaying images from the API to show at the same time.
I have a StreamBuilder in order to build a Chat App, but there's an issue that it unexpectedly reloads with some events. At the time it reloads, the snapshot still got the same data in it, therefore some messages are repeatedly added to the List 'messages'.
How can I prevent the StreamBuilder from doing this repetition?
Here is my StreamBuilder code:
body: SingleChildScrollView(
reverse: true,
child: Center(
child: StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
addText(snapshot.data.toString(), 1); // adds to messages
}
return ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.only(top: 10, bottom: 10),
physics: NeverScrollableScrollPhysics(),
itemCount: messages.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.only(
left: 14, right: 14, top: 10, bottom: 10),
child: Align(
alignment: (messages[index].messageType == 'receiver'
? Alignment.topLeft
: Alignment.topRight),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: (messages[index].messageType == 'receiver'
? Colors.grey.shade200
: Colors.blue[200]),
),
padding: EdgeInsets.all(16),
child: Text(
messages[index].messageContent,
style: TextStyle(fontSize: 15),
),
),
),
);
},
);
},
),
),
),
create a List in your state class andif(snapshot.hasData){ List = snapshot.data; }
then use the items in your list instead of your snapshot;
I got this problem to my ui at the bottom where users see their reviews. It appears this overflowed thing and I don't know what I should add to make this disappear . I don't have a scaffold to use resizeToAvoidBottomInset: false . The app is made with flutter , what I should change?
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return Container(
width: 200,
margin: EdgeInsets.only(
top: 8, bottom: 8, right: 12),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 2,
spreadRadius: 1)
], borderRadius: BorderRadius.circular(4)),
child: Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data.documents[index]
.data["avatarUrl"]),
),
SizedBox(width: 8),
Text(snapshot.data.documents[index]
.data["name"],style: TextStyle(fontWeight: FontWeight.bold))
],
),
_buildRatingStars(snapshot.data
.documents[index].data["rating"]),
Text(snapshot
.data.documents[index].data["text"])
],
),
);
});
Your problem is not with the ListView.builder but with the fixed width of your Container.
Try to remove the width: 200:
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return Container(
width: 200,
I need help replacing the first element of the StaggeredGridView with other Widget, say, Container. I have been trying to change it for hours but couldn't find a way.
Padding(
padding: const EdgeInsets.all(5.0),
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 4,
mainAxisSpacing: 3,
crossAxisSpacing: 3,
itemCount: posts.length,
itemBuilder: (BuildContext context, int index) {
Post post = posts[index];
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(7)),
child: Image(
image: AssetImage(post.imageUrl),
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 3 : 2),
),
),
Above is the code for the grid I am using.
Thank you.
itemBuilder will generate a widget with the function provided, thus you could just add an if statement to build one or other widget:
itemCount: posts.length + 1, // added one item on the beginning
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Container(
child: // your widget
);
} else {
Post post = posts[index - 1]; // remember that you have +1 on your index
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(7)),
child: Image(
image: AssetImage(post.imageUrl),
fit: BoxFit.cover,
),
),
);
}
},
I m using firestore for data and firestorage for files and images, so i m using StreamBuilder to load list as per firestore data and i want to download images as per firestore file name, but its not happening
I tried is, created a new method there I did code to get download url , but it is not working
child: StreamBuilder(
stream: Firestore.instance.collection('data').snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData)
return Container(
child: Center(child: CircularProgressIndicator()));
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
imageLoader(snapshot.data.documents[index].data['flie_ref'].toString()),
fit: BoxFit.fill,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
elevation: 0,
margin: EdgeInsets.all(10),
),
Padding(
padding: EdgeInsets.only(left: 6, right: 6),
child: Card(
elevation: 0,
child: ExpansionTile(
leading: CircleAvatar(
child: Text(snapshot
.data.documents[index].data['amount']
.toString()),
),
title: Text(
snapshot
.data.documents[index].data['desc']
.toString(),
overflow: TextOverflow.ellipsis,
),
children: <Widget>[
Text(snapshot
.data.documents[index].data['desc']
.toString()),
SizedBox(
height: 10,
),
],
),
),
),
],
),
);
});
},
),
Future imageLoader(String string) async {
var url =
await FirebaseStorage.instance.ref().child(string).getDownloadURL();
setState(() {
return url;
});
}
I expect output load respective image but the output is Error: The argument type 'Future' can't be assigned to the parameter type 'Widget'