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

View File

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

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