From c3f8c4d471cdbac9443bb8b6b4ba7e48c30c1939 Mon Sep 17 00:00:00 2001 From: MohammadTaha Basiri Date: Sat, 25 Dec 2021 18:19:27 +0330 Subject: [PATCH] D1APP-28 pageview basics --- .../radar/radar_details/radar_details.dart | 13 ++ .../radar_details/radar_details_state.dart | 3 + .../home/radar/widgets/categories_list.dart | 11 +- lib/pages/home/radar/widgets/radar_item.dart | 132 +++++++++--------- lib/routes/route_generator.dart | 9 ++ lib/routes/routes.dart | 1 + lib/widgets/didvan/card.dart | 18 +-- lib/widgets/didvan/page_view.dart | 84 +++++++++++ pubspec.lock | 7 + pubspec.yaml | 1 + 10 files changed, 203 insertions(+), 76 deletions(-) create mode 100644 lib/pages/home/radar/radar_details/radar_details.dart create mode 100644 lib/pages/home/radar/radar_details/radar_details_state.dart create mode 100644 lib/widgets/didvan/page_view.dart diff --git a/lib/pages/home/radar/radar_details/radar_details.dart b/lib/pages/home/radar/radar_details/radar_details.dart new file mode 100644 index 0000000..8e63b8e --- /dev/null +++ b/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(), + ); + } +} diff --git a/lib/pages/home/radar/radar_details/radar_details_state.dart b/lib/pages/home/radar/radar_details/radar_details_state.dart new file mode 100644 index 0000000..c4e2fc5 --- /dev/null +++ b/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 {} diff --git a/lib/pages/home/radar/widgets/categories_list.dart b/lib/pages/home/radar/widgets/categories_list.dart index b55fd88..2cd9e07 100644 --- a/lib/pages/home/radar/widgets/categories_list.dart +++ b/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( - category.title, - fontWeight: FontWeight.w600, - color: Theme.of(context).colorScheme.focusedBorder, + child: FittedBox( + fit: BoxFit.scaleDown, + child: DidvanText( + category.title, + fontWeight: FontWeight.w600, + color: Theme.of(context).colorScheme.focusedBorder, + ), ), decoration: BoxDecoration( border: Border.all( diff --git a/lib/pages/home/radar/widgets/radar_item.dart b/lib/pages/home/radar/widgets/radar_item.dart index 750ca92..8a7a2f6 100644 --- a/lib/pages/home/radar/widgets/radar_item.dart +++ b/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( - margin: const EdgeInsets.only(bottom: 20), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - padding: const EdgeInsets.all(4), - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.secondary, - borderRadius: DesignConfig.highBorderRadius, - ), - child: DidvanText( - 'برای مدیران', - style: Theme.of(context).textTheme.overline, - 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( - 'رادار کسب و کار', + return GestureDetector( + onTap: () => Navigator.of(context).pushNamed(Routes.radarDetails), + child: DidvanCard( + margin: const EdgeInsets.only(bottom: 20), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + padding: const EdgeInsets.all(4), + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary, + borderRadius: DesignConfig.highBorderRadius, + ), + child: DidvanText( + 'برای مدیران', style: Theme.of(context).textTheme.overline, - color: Theme.of(context).colorScheme.caption, + color: Theme.of(context).colorScheme.white, ), - const Spacer(), - DidvanText( - 'هفته پیش | خواندن 5 دقیقه', - style: Theme.of(context).textTheme.overline, - color: Theme.of(context).colorScheme.caption, - ), - ], - ), - 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), - ], - ), - ], + ), + 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, + ), + const Spacer(), + DidvanText( + 'هفته پیش | خواندن 5 دقیقه', + style: Theme.of(context).textTheme.overline, + color: Theme.of(context).colorScheme.caption, + ), + ], + ), + 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), + ], + ), + ], + ), ), ); } diff --git a/lib/routes/route_generator.dart b/lib/routes/route_generator.dart index 7b05f54..761446d 100644 --- a/lib/routes/route_generator.dart +++ b/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( + create: (context) => RadarDetailsState(), + child: const RadarDetails(), + ), + ); default: return _errorRoute(); } diff --git a/lib/routes/routes.dart b/lib/routes/routes.dart index 92fbf3e..752dece 100644 --- a/lib/routes/routes.dart +++ b/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'; } diff --git a/lib/widgets/didvan/card.dart b/lib/widgets/didvan/card.dart index a6ba513..92904a0 100644 --- a/lib/widgets/didvan/card.dart +++ b/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( - {Key? key, - required this.child, - this.padding = const EdgeInsets.all(16), - this.margin}) - : super(key: key); + final bool enableBorder; + const DidvanCard({ + Key? key, + this.child, + this.padding = const EdgeInsets.all(16), + 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, ); diff --git a/lib/widgets/didvan/page_view.dart b/lib/widgets/didvan/page_view.dart new file mode 100644 index 0000000..8d4b8d1 --- /dev/null +++ b/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, + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 7745d71..b15174a 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index 7bd1d72..e84d6af 100644 --- a/pubspec.yaml +++ b/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: