How to get ordered StaggeredGridView - flutter

Question

I have been developing a social media app and have an issue with profile page.
Here is the picture of what I need:
And here is the image that I am getting:
As you can see I want that the image sizes be the same for all images in the gallery. However, after I customize the first element of my GridView to contain info about user, I am getting images of different sizes.
Here you can see my code for the Grid:
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 + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.all(2),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: whiteColor,
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 2.0),
blurRadius: 6.0,
),
],
),
padding: EdgeInsets.all(10),
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 15,
backgroundImage:
user.profileImageUrl.isEmpty
? AssetImage(
'assets/images/user.png')
: CachedNetworkImageProvider(
user.profileImageUrl)),
SizedBox(width: 10),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
user.name,
style: TextStyle(
color:
Colors.black.withOpacity(0.75),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
SizedBox(height: 5),
_buildStatRow(
'Followers', followerCount.toString()),
_buildStatRow(
'Following', followingCount.toString()),
_buildStatRow(
'Posts', _posts.length.toString()),
_displayButton(user)
],
),
),
);
} else {
Post post = _posts[index - 1];
List<PostView> postViews = [];
postViews.add(PostView(
currentUserId: widget.currentUserId,
post: post,
author: _profileUser,
));
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(
//height: double.infinity,
color: whiteColor,
child: SingleChildScrollView(
child: 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,
),
),
),
);
}
},
),
By the way, the very first item of the grid should be of different size (smaller size) so that other images do not align in one line.

Answer 1

I think you want to modify:
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
into
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index == 0 ? 2 : 3),
In the first case, all the photos in the first column are 2x2 squares, while the ones in the second column are 2x3 rectangles.
In the second case, only the first item, i.e. the header with name/followers/following/post is a square.
Result: