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,
),
),
);
}
},
Related
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
is it possible to put the GridView into Carousel in flutter like this??
i don't understand about the carousel but i learn it and i get the Carousel more useful then grid-view if i follow my design?
this is my GridView Code
Container(
margin: EdgeInsets.all(2),
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius:
BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(12)),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageList[index],
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (index) {
return new StaggeredTile.count(
1, index.isEven ? 1 : 2);
}),
)
Yes you can simply use StaggeredGridView inside CarouselSlider. About the UI you are trying to archive, the first image(index=0) will be the large one. If we try to simplify the UI by dividing the pattern, we can see there are three GridItem can think as single bloc, and to get the left one larger we need to use StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);. In this case staggeredTileBuilder will be
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
Widget
return Scaffold(
body: CarouselSlider(
items: [
Container(
margin: EdgeInsets.all(2),
child: StaggeredGridView.countBuilder(
// physics: NeverScrollableScrollPhysics(), // it can use scollable if upper widget dont cause any issue
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(12)),
child: Container(
color: Colors.amber,
alignment: Alignment.center,
child: Text(index.toString()),
)
// FadeInImage.memoryNetwork(
// // placeholder: kTransparentImage,
// image: imageList[index],
// fit: BoxFit.cover,
// ),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
),
Container(
color: Colors.deepPurple,
),
Container(
color: Colors.deepOrange,
),
],
options: CarouselOptions(aspectRatio: 1, viewportFraction: 1),
),
);
I would say practice with Text Widget with viewing index to understand what and how widget is changing and set the logic inside staggeredTileBuilder to get the outcome. And about the imagePath you aren't passing string value on that, debug/print the path to verify it.
For more about
carousel_slider
flutter_staggered_grid_view
Staggered Grid View on yt you can find many by searching
I have an image grid "StaggeredImageGrid" and what I want is that when I tap on one of those images, that image should show up at the top of the screen. To put it in other words, you all know Instagram posts, right. When you go to your profile page and click one of the images from the grid view, exactly that image pops up on the top of your screen and you can scroll up and down to see the other images as well.
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 4,
mainAxisSpacing: 3,
crossAxisSpacing: 3,
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
itemCount: _posts.length,
itemBuilder: (BuildContext context, int index) {
Post post = _posts[index];
List<PostView> postViews = [];
_posts.forEach((post) {
postViews.add(PostView(
currentUserId: widget.currentUserId,
post: post,
author: _profileUser,
));
});
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SingleChildScrollView(
child: ListView.builder(
padding: EdgeInsets.only(top: 0),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: postViews.length,
itemBuilder:
(BuildContext context, int index) {
return Column(children: postViews);
},
),
),
),
),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(7)),
child: Image(
image:
CachedNetworkImageProvider(post.imageUrl),
fit: BoxFit.cover,
),
),
),
);
},
),
When I am clicking on one of the images, I am getting the list of images starting from beginning instead of that exact image.
Try to implement scroll_to_index listview in your second page when pressing the image of your grid, when you press image, pass index to second page and jump to that index image after build:
ListView(
scrollDirection: scrollDirection,
controller: controller,
children: randomList.map<Widget>((data) {
final index = data[0];
final height = data[1];
return AutoScrollTag(
key: ValueKey(index),
controller: controller,
index: index,
child: Text('index: $index, height: $height'),
highlightColor: Colors.black.withOpacity(0.1),
);
}).toList(),
)
om/cFMse.png
why images get weird size when i use stack widget inside StaggeredGridView.. When i remove the stack from the grid view the layout seems perfectly fine . am i using the layout in a wrong way?
new StaggeredGridView.countBuilder(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
itemCount:model.hit.length,
itemBuilder: (context, index) {
return
Stack(
children: [
Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(35))),
child:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(35)),
child:FadeInImage.memoryNetwork(
placeholder: kTransparentImage, image: model.hit[index]['largeImageURL'],fit: BoxFit.cover,)
),
)
],
);
},
staggeredTileBuilder: (index) {
return new StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
})
try passing a StackFit.expand argument to the Stack
return
Stack(
fit: StackFit.expand, /// <-- expand to the size of the parent constraint
children: [
Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(35))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(35)),
child:FadeInImage.memoryNetwork(
placeholder: kTransparentImage, image: model.hit[index]['largeImageURL'],fit: BoxFit.cover,)
),
)
],
);
i got a GridView with some Images. I want the images to apply the ColorFilter if the GestureDetector detects an onTap event. I got this for the whole imageList but i want only the clicked images to apply the ColorFilter. Is there a way?
ColorFilter getColorFilter (index) {
if(activeImages[index]) {
return ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop);
}
return null;
}
GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: imageList.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: 1.32, mainAxisSpacing: 5.0),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {_onTap(index);},
child: Container(
height:MediaQuery.of(context).size.width * 0.3,
width: MediaQuery.of(context).size.width * 0.6,
margin: const EdgeInsets.only(bottom: 10.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage(imageList[index]),
colorFilter: getColorFilter(index),
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.all(
Radius.circular(15)
),
),
),
);
},
)
edit:
void _onTap(index) {
setState(() {
activeImages[index] = !activeImages[index];
});
}