Home shimmer

KOSSHOH · Jan 20, 2021 · 0c0fc61 · 0c0fc61
1 parent f9deeae
commit 0c0fc61
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/lib/src/app_theme.dart b/lib/src/app_theme.dart
@@ -25,6 +25,8 @@ class AppTheme {
   static const Color white80 = Color.fromRGBO(255, 255, 255, 0.8);
   static const Color white30 = Color.fromRGBO(255, 255, 255, 0.6);
   static const Color screen = Color(0xFFFAFAFA);
+  static const Color shimmerBase = Color(0xFFE5E5E5);
+  static const Color shimmerHighlight = Color(0xFFFCF9F9);
 
   ///fonts
   static const String fontNunitoSans = 'NunitoSans';

diff --git a/lib/src/ui/menu/home/home_screen.dart b/lib/src/ui/menu/home/home_screen.dart
@@ -10,6 +10,7 @@ import 'package:messenger/src/ui/menu/home/notification_screen.dart';
 import 'package:messenger/src/ui/menu/main_screen.dart';
 import 'package:messenger/src/ui/profile/profile_friend_screen.dart';
 import 'package:messenger/src/utils/styles.dart';
+import 'package:shimmer/shimmer.dart';
 
 class HomeScreen extends StatefulWidget {
   @override
@@ -418,7 +419,83 @@ class _HomeScreenState extends State<HomeScreen>
                       ],
                     );
                   }
-                  return Container();
+                  return Shimmer.fromColors(
+                    baseColor: AppTheme.shimmerBase,
+                    highlightColor: AppTheme.shimmerHighlight,
+                    child: ListView(
+                      padding: EdgeInsets.only(
+                        top: 0,
+                        bottom: 24,
+                      ),
+                      children: [
+                        Container(
+                          margin: EdgeInsets.only(
+                            top: 25,
+                          ),
+                          height: 92,
+                          child: ListView.builder(
+                            itemCount: 15,
+                            scrollDirection: Axis.horizontal,
+                            padding: EdgeInsets.only(left: 25),
+                            itemBuilder: (context, index) {
+                              return Column(
+                                children: [
+                                  Container(
+                                    margin: EdgeInsets.only(
+                                      right: 25,
+                                      bottom: 6,
+                                    ),
+                                    height: 57,
+                                    width: 57,
+                                    decoration: BoxDecoration(
+                                      borderRadius: BorderRadius.circular(9),
+                                      color: AppTheme.white,
+                                    ),
+                                  ),
+                                  Container(
+                                    margin: EdgeInsets.only(
+                                      right: 25,
+                                    ),
+                                    height: 12,
+                                    width: 57,
+                                    decoration: BoxDecoration(
+                                      borderRadius: BorderRadius.circular(9),
+                                      color: AppTheme.white,
+                                    ),
+                                  )
+                                ],
+                              );
+                            },
+                          ),
+                        ),
+                        ListView.builder(
+                          shrinkWrap: true,
+                          physics: NeverScrollableScrollPhysics(),
+                          itemCount: 20,
+                          padding: EdgeInsets.only(
+                            top: 0,
+                            bottom: 24,
+                          ),
+                          itemBuilder: (BuildContext context, int index) {
+                            return Container(
+                              margin: EdgeInsets.only(
+                                top: 30,
+                                left: 25,
+                                right: 25,
+                              ),
+                              decoration: BoxDecoration(
+                                color: AppTheme.white,
+                                borderRadius: BorderRadius.circular(
+                                  15,
+                                ),
+                              ),
+                              height: index % 2 == 0 ? 220 : 275,
+                            );
+                          },
+                        )
+                      ],
+                    ),
+                  );
                 },
               ),
             ),