Mobile Screen 31

README.md

@@ -17,12 +17,12 @@ A Simple UI Kit.
 
 Flutter gen : ```flutter packages pub run build_runner build```
 
-
-
 ## Contributing
+
 [To contribute, read short guidelines](https://github.com/bukunmialuko/flutter_ui_kit_obkm/blob/main/CONTRIBUTING.md)
 
 ## Build apk
+
 flutter build apk
 
 ## 📸 Banner
@@ -67,8 +67,8 @@ flutter build apk
 | <img src="art/screenshots/page_25.png" width="200"/> | <img src="art/screenshots/page_26.png" width="200"/> | <img src="art/screenshots/page_27.png" width="200"/> | <img src="art/screenshots/page_28.png" width="200"/> |
 
 | Page 29  | Page 30 | Page 31 | Page 32 |
-| ------------- | ------------- | ------------- | ------------- |
-| <img src="art/screenshots/page_29.png" width="200"/> |<img src="art/screenshots/page_30.png" width="200"/> | | <img src="art/screenshots/page_32.png" width="200"/> |
+| ------------- |------------------------------------------------------|------------------------------------------------------| ------------- |
+| <img src="art/screenshots/page_29.png" width="200"/> | <img src="art/screenshots/page_30.png" width="200"/> | <img src="art/screenshots/page_31.png" width="200"/> | <img src="art/screenshots/page_32.png" width="200"/> |
 
 | Page 33  | Page 34 | Page 35 | Page 36 |
 | ------------- | ------------- | ------------- | ------------- |
@@ -187,16 +187,15 @@ flutter build apk
 | ------------- | ------------- | ------------- | ------------- |
 |  | | | |
 
-| Page 173  | Page 174 | Page 175 | Page 176 |
-| ------------- | ------------- | <img src="art/screenshots/page_175.png" width="200"/> | ------------- |
-|  | | | |
+| Page 173 | Page 174 | Page 175 | Page 176 |
+| ------------- | ------------- | <img src="art/screenshots/page_175.png" width="200"/> |
+------------- |
+| | | | |
 
 | Page 177  | Page 178 | Page 179 | Page 180 |
 | ------------- | ------------- | ------------- | ------------- |
 |  | | | |
 
-
-
 <br />
 Web Page 7
 <img src="art/screenshots/web_page_7.png" alt="Web page 7"/> 
@@ -219,4 +218,5 @@ Leave a 🌟
 Follow for update. 😃
 
 ## Development version :hammer:
+
 - [APK (direct download)](https://github.com/bukunmialuko/flutter_ui_kit_obkm/releases/download/v1.0.2/app-release.apk)

lib/src/mobile_ui/31/page_31.dart

@@ -0,0 +1,209 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_ui_kit_obkm/gen/assets.gen.dart';
+
+class Page31 extends StatefulWidget {
+  const Page31({Key? key}) : super(key: key);
+
+  @override
+  State<Page31> createState() => _Page31State();
+}
+
+class _Page31State extends State<Page31> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: Container(
+          margin: EdgeInsets.only(top: 8.h, left: 24.w, right: 24.w),
+          child: CustomScrollView(
+            slivers: <Widget>[
+              SliverToBoxAdapter(
+                child: Container(
+                  margin: EdgeInsets.only(bottom: 48.h),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Icon(Icons.menu_open, color: Color(0xff161616)),
+                      Text(
+                        'Home',
+                        style: TextStyle(
+                          color: Colors.black,
+                          fontWeight: FontWeight.w600,
+                          fontSize: 20.0.sp,
+                        ),
+                      ),
+                      Icon(Icons.settings_rounded, color: Color(0xff000000)),
+                    ],
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Container(
+                  decoration: BoxDecoration(
+                      color: Color(0xffF4F4F4), borderRadius: BorderRadius.circular(8.r)),
+                  margin: EdgeInsets.only(bottom: 24.h),
+                  child: Assets.png.m31.banner.image(
+                    height: 253.0.h,
+                    width: double.infinity,
+                    fit: BoxFit.fitWidth,
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Container(
+                  height: 42.0.h,
+                  width: 290.0.w,
+                  decoration: BoxDecoration(
+                    color: Color(0xffF4F4F4),
+                    border: Border.all(
+                      color: Colors.grey.withOpacity(0.2),
+                    ),
+                    borderRadius: BorderRadius.circular(6.0.r),
+                  ),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      SizedBox(width: 27.0.w),
+                      Center(
+                        child: Icon(Icons.search),
+                      ),
+                      SizedBox(width: 10.0.w),
+                      Flexible(
+                        child: Center(
+                          child: TextFormField(
+                            decoration: InputDecoration.collapsed(
+                              hintText: 'Search...',
+                              hintStyle: TextStyle(
+                                color: Colors.black,
+                              ),
+                            ),
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Container(
+                  margin: EdgeInsets.only(top: 35.h, bottom: 16.h),
+                  child: Text(
+                    'Popular Stations',
+                    style: TextStyle(
+                      color: Colors.black,
+                      fontWeight: FontWeight.w600,
+                      fontSize: 20.0.sp,
+                    ),
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: GridView.builder(
+                  shrinkWrap: true,
+                  physics: NeverScrollableScrollPhysics(),
+                  itemCount: 9,
+                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 3,
+                    mainAxisSpacing: 14.h,
+                    crossAxisSpacing: 12.w,
+                    mainAxisExtent: 127.h,
+                  ),
+                  itemBuilder: (c, i) {
+                    return SizedBox(
+                      // height: 127.h,
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Flexible(
+                            child: Container(
+                              height: 110.h,
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8.r),
+                                image: DecorationImage(
+                                  image: AssetImage('assets/png/m31/img${i + 1}.jpeg'),
+                                  fit: BoxFit.cover,
+                                ),
+                              ),
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(top: 6.h),
+                            child: Text(
+                              "Station #${i + 1}",
+                              style: TextStyle(
+                                color: Colors.black,
+                                fontWeight: FontWeight.w500,
+                                fontSize: 10.0.sp,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    );
+                  },
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+      bottomNavigationBar: _bottomNavBar(),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      extendBody: true,
+      floatingActionButton: Container(
+        width: 76.w,
+        height: 76.w,
+        decoration: BoxDecoration(
+          color: Color(0xfff4f4f4),
+          borderRadius: BorderRadius.circular(76.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.25),
+              blurRadius: 8,
+              offset: const Offset(0, 2),
+            ),
+          ],
+        ),
+        child: Center(
+          child: Icon(
+            Icons.play_arrow,
+            size: 36.r,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Container _bottomNavBar() {
+    return Container(
+      height: 90.h,
+      decoration: BoxDecoration(
+        color: Colors.white,
+        border: Border.all(
+          color: const Color(0xffE0E0E0),
+        ),
+      ),
+      child: Center(
+        child: Padding(
+          padding: EdgeInsets.only(left: 33.w, right: 34.w),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Icon(Icons.control_point_duplicate),
+              SizedBox(width: 41.w),
+              Icon(Icons.cast_connected, color: Color(0xffA8A8A8)),
+              Spacer(),
+              Icon(Icons.horizontal_split, color: Color(0xffA8A8A8)),
+              SizedBox(width: 41.w),
+              Icon(Icons.perm_contact_calendar, color: Color(0xffA8A8A8)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/mobile_ui/root/root.dart

@@ -207,6 +207,12 @@ class RootWidget extends StatelessWidget {
                   context.push("/${MobileRoutes.pg30}");
                 },
               ),
+              PageButtonWidget(
+                page: 31,
+                onPressed: () {
+                  context.push("/${MobileRoutes.pg31}");
+                },
+              ),
               PageButtonWidget(
                 page: 32,
                 onPressed: () {

lib/src/mobile_ui/routes/routes.dart

@@ -34,8 +34,9 @@ class MobileRoutes {
   static const pg28 = "pg28";
   static const pg29 = "pg29";
   static const pg30 = "pg30";
-  static const pg33 = "pg33";
+  static const pg31 = "pg31";
   static const pg32 = "pg32";
+  static const pg33 = "pg33";
   static const pg34 = "pg34";
   static const pg37 = "pg37";
   static const pg36 = "pg36";

lib/src/navigation/new_routes.dart

@@ -19,6 +19,7 @@ import 'package:flutter_ui_kit_obkm/src/mobile_ui/28/page_28.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/29/page_29.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/3/page3.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/30/page_30.dart';
+import 'package:flutter_ui_kit_obkm/src/mobile_ui/31/page_31.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/4/page4.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/49/page_49.dart';
 import 'package:flutter_ui_kit_obkm/src/mobile_ui/5/page5.dart';
@@ -192,6 +193,10 @@ var newRoutesConfig = GoRouter(
           path: MobileRoutes.pg30,
           builder: (BuildContext context, GoRouterState state) => const Page30(),
         ),
+        GoRoute(
+          path: MobileRoutes.pg31,
+          builder: (BuildContext context, GoRouterState state) => const Page31(),
+        ),
         GoRoute(
           path: MobileRoutes.pg32,
           builder: (BuildContext context, GoRouterState state) => const Page32(),

pubspec.yaml

@@ -103,6 +103,7 @@ flutter:
     - assets/png/m27/
     - assets/png/m28/
     - assets/png/m29/
+    - assets/png/m31/
     - assets/png/m37/
 
     # SVGs