Mr.Rahmani
/
didvan-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

D1APP-28 pageview's floating nav bar

This commit is contained in:
MohammadTaha Basiri 2021-12-25 19:18:25 +03:30
parent c3f8c4d471
commit 0c92117205
2 changed files with 142 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
lib/widgets/didvan/page_view.dart
View File

@ -1,8 +1,7 @@
import 'dart:math' as math;
import 'package:carousel_slider/carousel_slider.dart'; import 'package:carousel_slider/carousel_slider.dart';
import 'package:didvan/widgets/didvan/card.dart'; import 'package:didvan/widgets/didvan/card.dart';
import 'package:didvan/widgets/didvan/text.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:didvan/widgets/skeletun_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -12,73 +11,84 @@ class DidvanPageView extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double deviceTopPadding = MediaQuery.of(context).padding.top; final double deviceTopPadding = MediaQuery.of(context).padding.top;
return CarouselSlider.builder( return Stack(
itemCount: 5, children: [
options: CarouselOptions( CarouselSlider.builder(
height: double.infinity, itemCount: 5,
initialPage: 1, options: CarouselOptions(
viewportFraction: 0.94, height: double.infinity,
enableInfiniteScroll: false, initialPage: 1,
), viewportFraction: 0.94,
itemBuilder: (context, index, realIndex) => Padding( enableInfiniteScroll: false,
padding: EdgeInsets.only( ),
left: 4, itemBuilder: (context, index, realIndex) => Padding(
right: 4, padding: EdgeInsets.only(
top: 16 + deviceTopPadding, left: 4,
), right: 4,
child: DidvanCard( top: 16 + deviceTopPadding,
padding: EdgeInsets.zero, ),
enableBorder: false, child: DidvanCard(
child: CustomScrollView( padding: EdgeInsets.zero,
slivers: [ enableBorder: false,
const SliverAppBar( child: CustomScrollView(
automaticallyImplyLeading: false, slivers: [
expandedHeight: 200, const SliverAppBar(
flexibleSpace: SkeletonImage( automaticallyImplyLeading: false,
imageUrl: 'https://wallpapercave.com/wp/wp9373116.jpg', expandedHeight: 200,
width: double.infinity, flexibleSpace: SkeletonImage(
height: double.infinity, 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,
), ),
), 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(),
),
],
); );
} }
} }

67
lib/widgets/floating_navigation_bar.dart Normal file
View File

@ -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,
),
),
],
),
);
}
}