From 0c92117205a3b948c78fd8d616dc53e889912f70 Mon Sep 17 00:00:00 2001 From: MohammadTaha Basiri Date: Sat, 25 Dec 2021 19:18:25 +0330 Subject: [PATCH] D1APP-28 pageview's floating nav bar --- lib/widgets/didvan/page_view.dart | 140 ++++++++++++----------- lib/widgets/floating_navigation_bar.dart | 67 +++++++++++ 2 files changed, 142 insertions(+), 65 deletions(-) create mode 100644 lib/widgets/floating_navigation_bar.dart diff --git a/lib/widgets/didvan/page_view.dart b/lib/widgets/didvan/page_view.dart index 8d4b8d1..8499b9f 100644 --- a/lib/widgets/didvan/page_view.dart +++ b/lib/widgets/didvan/page_view.dart @@ -1,8 +1,7 @@ -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/floating_navigation_bar.dart'; import 'package:didvan/widgets/skeletun_image.dart'; import 'package:flutter/material.dart'; @@ -12,73 +11,84 @@ class DidvanPageView extends StatelessWidget { @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, + return Stack( + children: [ + 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, + ), + ), + ), + ], ), - ], + ), ), ), - ), + const Positioned( + left: 0, + right: 0, + bottom: 0, + child: FloatingNavigationBar(), + ), + ], ); } } diff --git a/lib/widgets/floating_navigation_bar.dart b/lib/widgets/floating_navigation_bar.dart new file mode 100644 index 0000000..54a1cf7 --- /dev/null +++ b/lib/widgets/floating_navigation_bar.dart @@ -0,0 +1,67 @@ +import 'package:didvan/config/theme_data.dart'; +import 'package:didvan/constants/app_icons.dart'; +import 'package:didvan/widgets/didvan/text.dart'; +import 'package:flutter/material.dart'; + +class FloatingNavigationBar extends StatelessWidget { + const FloatingNavigationBar({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + margin: const EdgeInsets.symmetric(horizontal: 32, vertical: 20), + width: double.infinity, + height: 48, + padding: const EdgeInsets.symmetric(horizontal: 12), + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.surface, + borderRadius: BorderRadius.circular(24), + border: Border.all( + color: Theme.of(context).colorScheme.cardBorder, + ), + ), + child: Row( + children: [ + IconButton( + onPressed: () => Navigator.of(context).pop(), + icon: const Icon( + Icons.arrow_back, + ), + ), + const Spacer(), + IconButton( + onPressed: () {}, + icon: const Icon( + DidvanIcons.bookmark_regular, + ), + ), + IconButton( + onPressed: () {}, + icon: const Icon( + DidvanIcons.evaluation_regular, + ), + ), + SizedBox( + width: 48, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + DidvanText('2'), + SizedBox(width: 4), + Icon( + DidvanIcons.chats_regular, + ), + ], + ), + ), + IconButton( + onPressed: () {}, + icon: const Icon( + Icons.more_horiz, + ), + ), + ], + ), + ); + } +}