D1APP-28 pageview basics

lib/pages/home/radar/radar_details/radar_details.dart

@@ -0,0 +1,13 @@
+import 'package:didvan/widgets/didvan/page_view.dart';
+import 'package:flutter/material.dart';
+
+class RadarDetails extends StatelessWidget {
+  const RadarDetails({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: DidvanPageView(),
+    );
+  }
+}

lib/pages/home/radar/radar_details/radar_details_state.dart

@@ -0,0 +1,3 @@
+import 'package:didvan/providers/core_provider.dart';
+
+class RadarDetailsState extends CoreProvier {}

lib/pages/home/radar/widgets/categories_list.dart

@@ -67,10 +67,13 @@ class CategoriesList extends StatelessWidget {
       width: 100,
       padding: const EdgeInsets.all(4),
       alignment: Alignment.center,
-      child: DidvanText(
+      child: FittedBox(
-        category.title,
+        fit: BoxFit.scaleDown,
-        fontWeight: FontWeight.w600,
+        child: DidvanText(
-        color: Theme.of(context).colorScheme.focusedBorder,
+          category.title,
+          fontWeight: FontWeight.w600,
+          color: Theme.of(context).colorScheme.focusedBorder,
+        ),
       ),
       decoration: BoxDecoration(
         border: Border.all(

lib/pages/home/radar/widgets/radar_item.dart

@@ -1,6 +1,7 @@
 import 'package:didvan/config/design_config.dart';
 import 'package:didvan/config/theme_data.dart';
 import 'package:didvan/constants/app_icons.dart';
+import 'package:didvan/routes/routes.dart';
 import 'package:didvan/widgets/didvan/card.dart';
 import 'package:didvan/widgets/didvan/divider.dart';
 import 'package:didvan/widgets/didvan/text.dart';
@@ -12,72 +13,75 @@ class RadarItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DidvanCard(
+    return GestureDetector(
-      margin: const EdgeInsets.only(bottom: 20),
+      onTap: () => Navigator.of(context).pushNamed(Routes.radarDetails),
-      child: Column(
+      child: DidvanCard(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        margin: const EdgeInsets.only(bottom: 20),
-        children: [
+        child: Column(
-          Container(
+          crossAxisAlignment: CrossAxisAlignment.start,
-            padding: const EdgeInsets.all(4),
+          children: [
-            decoration: BoxDecoration(
+            Container(
-              color: Theme.of(context).colorScheme.secondary,
+              padding: const EdgeInsets.all(4),
-              borderRadius: DesignConfig.highBorderRadius,
+              decoration: BoxDecoration(
-            ),
+                color: Theme.of(context).colorScheme.secondary,
-            child: DidvanText(
+                borderRadius: DesignConfig.highBorderRadius,
-              'برای مدیران',
+              ),
-              style: Theme.of(context).textTheme.overline,
+              child: DidvanText(
-              color: Theme.of(context).colorScheme.white,
+                'برای مدیران',
-            ),
-          ),
-          const SizedBox(height: 8),
-          const DidvanText(
-            'نقش مهم فولاد در اقتصاد جهانی',
-            fontWeight: FontWeight.w600,
-          ),
-          const SizedBox(height: 8),
-          const SkeletonImage(
-            imageUrl: 'https://wallpapercave.com/wp/wp9373116.jpg',
-            width: double.infinity,
-            height: 140,
-          ),
-          const SizedBox(height: 8),
-          Row(
-            children: [
-              DidvanText(
-                'رادار کسب و کار',
                 style: Theme.of(context).textTheme.overline,
-                color: Theme.of(context).colorScheme.caption,
+                color: Theme.of(context).colorScheme.white,
               ),
-              const Spacer(),
+            ),
-              DidvanText(
+            const SizedBox(height: 8),
-                'هفته پیش | خواندن 5 دقیقه',
+            const DidvanText(
-                style: Theme.of(context).textTheme.overline,
+              'نقش مهم فولاد در اقتصاد جهانی',
-                color: Theme.of(context).colorScheme.caption,
+              fontWeight: FontWeight.w600,
-              ),
+            ),
-            ],
+            const SizedBox(height: 8),
-          ),
+            const SkeletonImage(
-          const SizedBox(height: 8),
+              imageUrl: 'https://wallpapercave.com/wp/wp9373116.jpg',
-          const DidvanText(
+              width: double.infinity,
-            'صنعت فولاد جوادی مجد سلیمی است پس باید به آن توجه زیادی شود تا بازار به انفجار نرسد. پس جواد مهربانگو باشیم...',
+              height: 140,
-            maxLine: 3,
+            ),
-          ),
+            const SizedBox(height: 8),
-          const DidvanDivider(),
+            Row(
-          Row(
+              children: [
-            children: const [
+                DidvanText(
-              Icon(
+                  'رادار کسب و کار',
-                DidvanIcons.bookmark_regular,
+                  style: Theme.of(context).textTheme.overline,
-              ),
+                  color: Theme.of(context).colorScheme.caption,
-              Spacer(),
+                ),
-              DidvanText('2'),
+                const Spacer(),
-              SizedBox(width: 4),
+                DidvanText(
-              Icon(DidvanIcons.chats_regular),
+                  'هفته پیش | خواندن 5 دقیقه',
-              SizedBox(width: 16),
+                  style: Theme.of(context).textTheme.overline,
-              DidvanText('10'),
+                  color: Theme.of(context).colorScheme.caption,
-              SizedBox(width: 4),
+                ),
-              Icon(DidvanIcons.evaluation_regular),
+              ],
-            ],
+            ),
-          ),
+            const SizedBox(height: 8),
-        ],
+            const DidvanText(
+              'صنعت فولاد جوادی مجد سلیمی است پس باید به آن توجه زیادی شود تا بازار به انفجار نرسد. پس جواد مهربانگو باشیم...',
+              maxLine: 3,
+            ),
+            const DidvanDivider(),
+            Row(
+              children: const [
+                Icon(
+                  DidvanIcons.bookmark_regular,
+                ),
+                Spacer(),
+                DidvanText('2'),
+                SizedBox(width: 4),
+                Icon(DidvanIcons.chats_regular),
+                SizedBox(width: 16),
+                DidvanText('10'),
+                SizedBox(width: 4),
+                Icon(DidvanIcons.evaluation_regular),
+              ],
+            ),
+          ],
+        ),
       ),
     );
   }

lib/routes/route_generator.dart

@@ -5,6 +5,8 @@ import 'package:didvan/pages/home/home_state.dart';
 import 'package:didvan/pages/home/profile/edit_profile/edit_profile.dart';
 import 'package:didvan/pages/home/profile/settings/settings.dart';
 import 'package:didvan/pages/home/profile/settings/settings_state.dart';
+import 'package:didvan/pages/home/radar/radar_details/radar_details.dart';
+import 'package:didvan/pages/home/radar/radar_details/radar_details_state.dart';
 import 'package:didvan/pages/splash/splash.dart';
 import 'package:didvan/pages/splash/splash_state.dart';
 import 'package:didvan/routes/routes.dart';
@@ -46,6 +48,13 @@ class RouteGenerator {
             child: const Settings(),
           ),
         );
+      case Routes.radarDetails:
+        return _createRoute(
+          ChangeNotifierProvider<RadarDetailsState>(
+            create: (context) => RadarDetailsState(),
+            child: const RadarDetails(),
+          ),
+        );
       default:
         return _errorRoute();
     }

lib/routes/routes.dart

@@ -5,4 +5,5 @@ class Routes {
   static const String profile = '/profile';
   static const String editProfile = '/edit-profile';
   static const String settings = '/settings';
+  static const String radarDetails = '/radar-details';
 }

lib/widgets/didvan/card.dart

@@ -2,15 +2,17 @@ import 'package:didvan/config/design_config.dart';
 import 'package:flutter/material.dart';
 
 class DidvanCard extends StatelessWidget {
-  final Widget child;
+  final Widget? child;
   final EdgeInsets? padding;
   final EdgeInsets? margin;
-  const DidvanCard(
+  final bool enableBorder;
-      {Key? key,
+  const DidvanCard({
-      required this.child,
+    Key? key,
-      this.padding = const EdgeInsets.all(16),
+    this.child,
-      this.margin})
+    this.padding = const EdgeInsets.all(16),
-      : super(key: key);
+    this.margin,
+    this.enableBorder = true,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -20,7 +22,7 @@ class DidvanCard extends StatelessWidget {
       decoration: BoxDecoration(
         borderRadius: DesignConfig.lowBorderRadius,
         color: Theme.of(context).colorScheme.surface,
-        border: DesignConfig.cardBorder,
+        border: enableBorder ? DesignConfig.cardBorder : null,
       ),
       child: child,
     );

lib/widgets/didvan/page_view.dart

@@ -0,0 +1,84 @@
+import 'dart:math' as math;
+
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:didvan/widgets/didvan/card.dart';
+import 'package:didvan/widgets/didvan/text.dart';
+import 'package:didvan/widgets/skeletun_image.dart';
+import 'package:flutter/material.dart';
+
+class DidvanPageView extends StatelessWidget {
+  const DidvanPageView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final double deviceTopPadding = MediaQuery.of(context).padding.top;
+    return CarouselSlider.builder(
+      itemCount: 5,
+      options: CarouselOptions(
+        height: double.infinity,
+        initialPage: 1,
+        viewportFraction: 0.94,
+        enableInfiniteScroll: false,
+      ),
+      itemBuilder: (context, index, realIndex) => Padding(
+        padding: EdgeInsets.only(
+          left: 4,
+          right: 4,
+          top: 16 + deviceTopPadding,
+        ),
+        child: DidvanCard(
+          padding: EdgeInsets.zero,
+          enableBorder: false,
+          child: CustomScrollView(
+            slivers: [
+              const SliverAppBar(
+                automaticallyImplyLeading: false,
+                expandedHeight: 200,
+                flexibleSpace: SkeletonImage(
+                  imageUrl: 'https://wallpapercave.com/wp/wp9373116.jpg',
+                  width: double.infinity,
+                  height: double.infinity,
+                ),
+              ),
+              SliverPadding(
+                padding:
+                    const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+                sliver: SliverList(
+                  delegate: SliverChildBuilderDelegate(
+                    (_, index) {
+                      switch (index) {
+                        case 0:
+                          return Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              DidvanText(
+                                'تحلیل شکاف فناوری صنعت فولاد ایران',
+                                style: Theme.of(context).textTheme.bodyText1,
+                              ),
+                              const SizedBox(height: 8),
+                              const DidvanText(
+                                'پایگاه خبری معدن نیوز - 2 ساعت پیش',
+                              ),
+                              const SizedBox(height: 8),
+                            ],
+                          );
+                        default:
+                          return const Padding(
+                            padding: EdgeInsets.only(bottom: 8),
+                            child: DidvanText(
+                              'این سایت امروز (شنبه) تیم منتخب قاره آسیا در سال ۲۰۲۱ میلادی را معرفی کرد که از ایران، سردار آزمون و محمد حسین کنعانی‌زادگان در ترکیب اصلی و مهدی طارمی و سیدمجید حسینی در جمع بازیکنان ذخیره دیده می‌شوند.',
+                            ),
+                          );
+                      }
+                    },
+                    childCount: 10,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -36,6 +36,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.1"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.0"
   characters:
     dependency: transitive
     description:

pubspec.yaml

@@ -47,6 +47,7 @@ dependencies:
   flutter_svg: ^1.0.0
   cached_network_image: ^3.2.0
   skeleton_text: ^3.0.0
+  carousel_slider: ^4.0.0
 
 dev_dependencies:
   flutter_test: