Flutter Instagram Desktop (rev 9)

main.dart

class WidgetFeed extends StatelessWidget {
  final listFeeds = <ItemFeed>[
    ItemFeed('Grissham', 'assets/images/photo_profile_user_11.jpg', 'assets/images/photo_profile_user_11.jpg', 500179, 2013),
    ItemFeed('Agatha', 'assets/images/photo_profile_user_2.jpg', 'assets/images/photo_profile_user_2.jpg', 22, 17),
    ItemFeed('Emily', 'assets/images/photo_profile_user_10.jpg', 'assets/images/photo_profile_user_10.jpg', 311, 5),
    ItemFeed('Amanda', 'assets/images/photo_profile_user_3.jpg', 'assets/images/photo_profile_user_3.jpg', 17, 1),
    ItemFeed('Elizabeth', 'assets/images/photo_profile_user_9.jpg', 'assets/images/photo_profile_user_9.jpg', 41, 0),
    ItemFeed('Aland', 'assets/images/photo_profile_user_13.jpg', 'assets/images/photo_profile_user_13.jpg', 9, 122),
    ItemFeed('Daroll', 'assets/images/photo_profile_user_16.jpg', 'assets/images/photo_profile_user_16.jpg', 98, 15),
    ItemFeed('Amelia', 'assets/images/photo_profile_user_4.jpg', 'assets/images/photo_profile_user_4.jpg', 29, 0),
    ItemFeed('Belinda', 'assets/images/photo_profile_user_5.jpg', 'assets/images/photo_profile_user_5.jpg', 45, 1),
    ItemFeed('Caroline', 'assets/images/photo_profile_user_6.jpg', 'assets/images/photo_profile_user_6.jpg', 101, 1820),
    ItemFeed('Chloe', 'assets/images/photo_profile_user_7.jpg', 'assets/images/photo_profile_user_7.jpg', 4107, 121),
    ItemFeed('Hamilton', 'assets/images/photo_profile_user_19.jpg', 'assets/images/photo_profile_user_19.jpg', 129, 1),
    ItemFeed('Davidson', 'assets/images/photo_profile_user_17.jpg', 'assets/images/photo_profile_user_17.jpg', 10798, 2),
    ItemFeed('Chayton', 'assets/images/photo_profile_user_12.jpg', 'assets/images/photo_profile_user_12.jpg', 771, 9),
    ItemFeed('Elena', 'assets/images/photo_profile_user_8.jpg', 'assets/images/photo_profile_user_8.jpg', 51, 991),
    ItemFeed('Alison', 'assets/images/photo_profile_user_14.jpg', 'assets/images/photo_profile_user_14.jpg', 37, 777),
    ItemFeed('Alice', 'assets/images/photo_profile_user_1.jpg', 'assets/images/photo_profile_user_1.jpg', 1075, 1024),
    ItemFeed('Ashton', 'assets/images/photo_profile_user_15.jpg', 'assets/images/photo_profile_user_15.jpg', 87, 0),
    ItemFeed('Hugo', 'assets/images/photo_profile_user_18.jpg', 'assets/images/photo_profile_user_18.jpg', 991, 17),
    ItemFeed('Jeremy', 'assets/images/photo_profile_user_20.jpg', 'assets/images/photo_profile_user_20.jpg', 451, 0),
  ];

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: StaggeredGridView.countBuilder(
        crossAxisCount: 3,
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          var itemFeed = listFeeds[index];
          var numberFormat = NumberFormat('#,##0');
          var strCountLike = numberFormat.format(itemFeed.countLike);
          var strCountComment = numberFormat.format(itemFeed.countComment);
          return Column(
            children: [
              _buildWidgetPhotoPost(itemFeed),
              SizedBox(height: 8),
              Row(
                children: [
                  _buildWidgetPhotoProfileFeed(itemFeed),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      itemFeed.name,
                      style: TextStyle(
                        color: Colors.white,
                        fontFamily: fontFamilyAvenir,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Icon(
                    itemFeed.countLike % 3 != 0 ? CupertinoIcons.heart : CupertinoIcons.heart_fill,
                    color: Colors.white60,
                  ),
                  SizedBox(width: 4),
                  Text(
                    strCountLike,
                    style: TextStyle(
                      color: Colors.white60,
                      fontFamily: fontFamilyAvenir,
                    ),
                  ),
                  SizedBox(width: 16),
                  Icon(
                    CupertinoIcons.chat_bubble,
                    color: Colors.white60,
                  ),
                  SizedBox(width: 4),
                  Text(
                    strCountComment,
                    style: TextStyle(
                      color: Colors.white60,
                      fontFamily: fontFamilyAvenir,
                    ),
                  ),
                ],
              ),
            ],
          );
        },
        staggeredTileBuilder: (int index) {
          return StaggeredTile.count(1, 1);
        },
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
      ),
    );
  }

  Widget _buildWidgetPhotoProfileFeed(ItemFeed itemFeed) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [
            color3,
            color4,
          ],
          stops: [
            0.1,
            0.9,
          ],
        ),
      ),
      padding: EdgeInsets.all(1),
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: color2,
        ),
        padding: EdgeInsets.all(4),
        child: ClipOval(
          child: Image.asset(
            itemFeed.photoProfile,
            width: 24,
            height: 24,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  Widget _buildWidgetPhotoPost(ItemFeed itemFeed) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          image: DecorationImage(
            image: AssetImage(itemFeed.photoPost),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

class ItemFeed {
  final String name;
  final String photoProfile;
  final String photoPost;
  final int countLike;
  final int countComment;

  ItemFeed(
    this.name,
    this.photoProfile,
    this.photoPost,
    this.countLike,
    this.countComment,
  );
}