Flutter Instagram Desktop (rev 8)

main.dart

class WidgetStories extends StatelessWidget {
  final listStories = <ItemStory>[
    ItemStory('Hello Ditta', 'assets/images/photo_profile.jpg'),
    ItemStory('Grissham', 'assets/images/photo_profile_user_11.jpg'),
    ItemStory('Agatha', 'assets/images/photo_profile_user_2.jpg'),
    ItemStory('Emily', 'assets/images/photo_profile_user_10.jpg'),
    ItemStory('Amanda', 'assets/images/photo_profile_user_3.jpg'),
    ItemStory('Elizabeth', 'assets/images/photo_profile_user_9.jpg'),
    ItemStory('Aland', 'assets/images/photo_profile_user_13.jpg'),
    ItemStory('Daroll', 'assets/images/photo_profile_user_16.jpg'),
    ItemStory('Amelia', 'assets/images/photo_profile_user_4.jpg'),
    ItemStory('Belinda', 'assets/images/photo_profile_user_5.jpg'),
    ItemStory('Caroline', 'assets/images/photo_profile_user_6.jpg'),
    ItemStory('Chloe', 'assets/images/photo_profile_user_7.jpg'),
    ItemStory('Hamilton', 'assets/images/photo_profile_user_19.jpg'),
    ItemStory('Davidson', 'assets/images/photo_profile_user_17.jpg'),
    ItemStory('Chayton', 'assets/images/photo_profile_user_12.jpg'),
    ItemStory('Elena', 'assets/images/photo_profile_user_8.jpg'),
    ItemStory('Alison', 'assets/images/photo_profile_user_14.jpg'),
    ItemStory('Alice', 'assets/images/photo_profile_user_1.jpg'),
    ItemStory('Ashton', 'assets/images/photo_profile_user_15.jpg'),
    ItemStory('Hugo', 'assets/images/photo_profile_user_18.jpg'),
    ItemStory('Jeremy', 'assets/images/photo_profile_user_20.jpg'),
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 117,
      child: ListView.builder(
        itemCount: listStories.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          var itemStory = listStories[index];
          return Padding(
            padding: EdgeInsets.only(
              left: index == 0 ? 0 : 8,
              right: index == 19 ? 0 : 8,
            ),
            child: Column(
              children: [
                Stack(
                  children: [
                    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(2),
                      child: Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: color2,
                        ),
                        padding: EdgeInsets.all(4),
                        child: Stack(
                          children: [
                            ClipOval(
                              child: Image.asset(
                                itemStory.photoProfile,
                                width: 72,
                                height: 72,
                                fit: BoxFit.cover,
                              ),
                            ),
                            index == 0
                                ? Container(
                                    width: 72,
                                    height: 72,
                                    decoration: BoxDecoration(
                                      color: Color(0xFF4C6AF9).withOpacity(.7),
                                      shape: BoxShape.circle,
                                    ),
                                    child: Center(
                                      child: Icon(
                                        Icons.add,
                                        color: Colors.white,
                                      ),
                                    ),
                                  )
                                : Container(),
                          ],
                        ),
                      ),
                    ),
                    index == 0
                        ? Container(
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: Color(0xFF4C6AF9),
                                width: 2,
                              ),
                            ),
                            width: 84,
                            height: 84,
                          )
                        : Container(),
                  ],
                ),
                SizedBox(height: 16),
                SizedBox(
                  width: 84,
                  child: Text(
                    itemStory.name,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: fontFamilyAvenir,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class ItemStory {
  final String name;
  final String photoProfile;

  ItemStory(this.name, this.photoProfile);
}