How is it that "http://lorempixel.com/300/300/" returns the same image for all the grid tiles in the following example?
Widget build(BuildContext context) {
return GridView.builder(
itemCount: 100,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 2,
mainAxisSpacing: 2,
),
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.grey,
child: Center(child: Image.network("http://lorempixel.com/300/300/")),
);
},
);
}
It seems that the result of the first request to "http://lorempixel.com/300/300" is used for all images. Why?
It's due to the structure of Image widget and its Image.network constructor which caches all Images loaded through it. They mention that in the Image widget documentation :
All network images are cached regardless of HTTP headers.
Related
I have used GridView.builder to show API data with below code.
GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: snapshot.data!.items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1 / .3,
),
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: CategoryItem(categoryItem: snapshot.data!.items[index],
),
);
},
),
Here Now my data length is 4 only. when it increases then data will be scrollable. And that working fine But thing is, I want to get resizable height with data length. It takes a default height which is not compatible.
Is there any way to reduce default height or customize it?
Thanks in advance.
Getting below output :
I'm trying to use show images using by Image.file(File(path)) in gridview. When I scrolling it down and then up it's reloading images. This caused showing them in white. When I'm looking for this issue there is mentions "lazy loading list" but I don't think it's related with this. Also I tried caching Image widget with LruCache but it's still same. How can I prevent this reloading?
Here is my code snippet:
child: GridView.builder(
itemCount: paths.length,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 0.5,
crossAxisSpacing: 6,
mainAxisSpacing: 6,
crossAxisCount: 5,
),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => {remove(paths[index])},
child: Image.file(File(paths[index])),
);
},
),
This is an error: stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY flutter
GridView(gridDelegate: gridDelegate, cacheExtent: 9999,)
I have a GridView.builder with shrinkWrap to true. It fills dynamically, but the problem that at start it empty but takes place, like it has elements (sort of reserving place) depends on the size of maxCrossAxisExtent.
Is it possible change this? Empty space not very good..
I looked docs and google but didnt find any answer.
This is the code
class _PhotosState extends State<Photos> {
List<File> photos = [];
final ImagePicker _picker = ImagePicker();
Widget getGrid() {
return Container(
child: GridView.builder(
padding: EdgeInsets.all(0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
//childAspectRatio: 3 / 2,
// crossAxisSpacing: 10,
// mainAxisSpacing: 10,
//mainAxisExtent: 200,
),
itemCount: photos.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
color: Colors.blueGrey,
);
},
),
);
}
The empty GridView with empty space
One element added to GridView
try
Widget getGrid() {
return photos.length<1?SizedBox():
Container(
child: GridView.builder(
I am fairly new in Flutter, I am fetching data from api and displaying it in a listview. I have following demo code.
/*Other codes*/
return ListView.builder(
//Other Codes
physics: const AlwaysScrollableScrollPhysics(),
itemCount: item.length,
padding: new EdgeInsets.only(top: 5.0),
itemBuilder: (context, index) {
});
My requirement is to show data in Two Rows, such that if the item in index is even show it in first row and if its odd, show it in another row? More like in the Image below.
Update: There could be many items and can be scrolled horizontally to reveal more items.
Can we achieve this without manipulating the data received from API? From API the data comes in date-wise sorted in descending order.
Thanks
GridView.builder is probably what you are looking for.
Just give it scrollDirection: Axis.horizontal to make it horizontal.
Then give it gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2) to make sure you have only 2 rows.
Then use SizedBox to restrict the height of the GridView to 90 + 90.
Finally, use the childAspectRatio property of the SliverGridDelegateWithFixedCrossAxisCount to specify that you want your aspect ratio to be 90 / 256.
Color randomColor() => Color.fromARGB(255, Random().nextInt(255), Random().nextInt(100), Random().nextInt(200));
class MyApp extends StatelessWidget {
List<String> array = ["0", "1", "2", "3"];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Example')),
body: SizedBox(
height: 90 + 90,
child: GridView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 90 / 256,
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return Container(
color: randomColor(), child: Text(array[index])
);
}
),
),
),
);
}
}
I am working with the following code and got struck. I wanted to set the height to the container so that the images which are displayed inside it will be fitted well. In the present condition the image gets fitted inside the container and it does not look good. I have used a grid view to display images from firebase.
class Catview extends StatefulWidget {
#override
_CatviewState createState() => _CatviewState();
}
class _CatviewState extends State<Catview> {
StreamSubscription<QuerySnapshot> subscription;
List<DocumentSnapshot> wallpaperList;
final CollectionReference collectionReference =
Firestore.instance.collection("pubg");
#override
void initState() {
super.initState();
subscription = collectionReference.snapshots().listen((datasnapshot) {
setState(() {
wallpaperList = datasnapshot.documents;
});
});
}
#override
void dispose() {
super.dispose();
subscription?.cancel();
}
#override
Widget build(BuildContext context) {
return (SafeArea(
child: Scaffold(
body: wallpaperList != null
? GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2,
mainAxisSpacing: 4,
),
itemCount: wallpaperList.length,
itemBuilder: (context, index) {
String image = wallpaperList[index].data['image'];
return Container(
color: Colors.red,
child: Image.network(
image,
),
);
},
)
: Center(
child: CircularProgressIndicator(),
),
),
));
}
}
thank you!
You need to add preperty childAspectRatio in SliverGridDelegateWithFixedCrossAxisCount. childAspectRatio as aspectRatio, because in gridview can't support height dan width. Unless you use this library Staggered Grid View . https://pub.dev/packages/flutter_staggered_grid_view.
this is example if you use gridview without library.
Example:
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2,
mainAxisSpacing: 4,
childAspectRatio: 0.7,
),
....
You'll have to use the childAspectRatio property present in the GridView.builder class
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
childAspectRatio: 2/3,
),
....
I like to use the popular aspect ratios present in photography which are the 2/3 (2:3) or the 3/4 (3:4) to get the kind of look I normally like.
If you want a wider width in relation to the height, use the aspect ratio in reverse (i.e. 3/2 or 4/3) depending on your need.
Hope it helps! :)