Reputation: 13
I am use staggered grid view to solve the above UI. But can't able to fix, anyone can help me to solve the issue.
I have a code that is working fine using StaggeredGridView.count() inside Column.
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class GridViewExample extends StatefulWidget {
@override
_GridViewExampleState createState() => new _GridViewExampleState();
}
class _GridViewExampleState extends State<GridViewExample> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Column(children: [
SafeArea(
child: Container(
height: MediaQuery.of(context).size.height/2,
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration:BoxDecoration(border: Border.all(),
), //
child: Container(
padding: EdgeInsets.all(30),
child: new StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 5,
itemBuilder: (BuildContext context, int index) => new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image:
new NetworkImage("https://i.imgur.com/EVTkpZL.jpg"),
fit: BoxFit.cover))),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
),
)
],)
);
}
}
Upvotes: 0
Views: 38