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

D1APP-93 floating back button added to pageview

This commit is contained in:
MohammadTaha Basiri 2022-02-05 18:41:57 +03:30
parent 34ac592524
commit 84af011e4f
1 changed files with 190 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,14 @@
import 'package:carousel_slider/carousel_slider.dart'; import 'package:carousel_slider/carousel_slider.dart';
import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/pages/home/widgets/multitype_overview.dart'; import 'package:didvan/pages/home/widgets/multitype_overview.dart';
import 'package:didvan/utils/date_time.dart'; import 'package:didvan/utils/date_time.dart';
import 'package:didvan/widgets/animated_visibility.dart';
import 'package:didvan/widgets/didvan/card.dart'; import 'package:didvan/widgets/didvan/card.dart';
import 'package:didvan/widgets/didvan/divider.dart'; import 'package:didvan/widgets/didvan/divider.dart';
import 'package:didvan/widgets/didvan/text.dart'; import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/ink_wrapper.dart';
import 'package:didvan/widgets/item_title.dart'; import 'package:didvan/widgets/item_title.dart';
import 'package:didvan/widgets/skeleton_image.dart'; import 'package:didvan/widgets/skeleton_image.dart';
import 'package:didvan/pages/home/widgets/tag_item.dart'; import 'package:didvan/pages/home/widgets/tag_item.dart';
@ -36,124 +41,140 @@ class _DidvanPageViewState extends State<DidvanPageView> {
@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 Directionality( return Stack(
textDirection: TextDirection.ltr, children: [
child: CarouselSlider.builder( Directionality(
itemCount: widget.items.length, textDirection: TextDirection.ltr,
options: CarouselOptions( child: CarouselSlider.builder(
onPageChanged: (index, reason) => widget.onPageChanged(index), itemCount: widget.items.length,
height: double.infinity, options: CarouselOptions(
initialPage: widget.initialIndex, onPageChanged: (index, reason) => widget.onPageChanged(index),
viewportFraction: 0.94, height: double.infinity,
enableInfiniteScroll: false, initialPage: widget.initialIndex,
), viewportFraction: 0.94,
itemBuilder: (context, index, realIndex) => Directionality( enableInfiniteScroll: false,
textDirection: TextDirection.rtl, ),
child: SizedBox( itemBuilder: (context, index, realIndex) => Directionality(
height: MediaQuery.of(context).size.height, textDirection: TextDirection.rtl,
child: SingleChildScrollView( child: SizedBox(
controller: height: MediaQuery.of(context).size.height,
index == widget.currentIndex ? widget.scrollController : null, child: SingleChildScrollView(
physics: const BouncingScrollPhysics(), controller: index == widget.currentIndex
padding: EdgeInsets.only( ? widget.scrollController
left: 4, : null,
right: 4, physics: const BouncingScrollPhysics(),
top: 16 + deviceTopPadding, padding: EdgeInsets.only(
bottom: 92, left: 4,
), right: 4,
child: DidvanCard( top: 16 + deviceTopPadding,
padding: EdgeInsets.zero, bottom: 92,
enableBorder: false, ),
child: Builder( child: DidvanCard(
builder: (context) { padding: EdgeInsets.zero,
final item = widget.items[index]; enableBorder: false,
if (item == null) { child: Builder(
return const SizedBox(); builder: (context) {
} final item = widget.items[index];
return Column( if (item == null) {
crossAxisAlignment: CrossAxisAlignment.start, return const SizedBox();
children: [ }
SkeletonImage( return Column(
imageUrl: item.image, crossAxisAlignment: CrossAxisAlignment.start,
aspectRatio: 16 / 9, children: [
), SkeletonImage(
const SizedBox(height: 20), imageUrl: item.image,
Padding( aspectRatio: 16 / 9,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: DidvanText(
item.title,
style: Theme.of(context).textTheme.subtitle1,
),
),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: _subtitle(item),
),
for (var i = 0; i < item.contents.length; i++)
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 4,
), ),
child: _contentBuilder(item, i), const SizedBox(height: 20),
),
if (item.tags.isNotEmpty) const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (var i = 0; i < item.tags.length; i++)
TagItem(label: item.tags[i].label),
],
),
),
const Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 16,
),
child: DidvanDivider(verticalPadding: 0),
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: ItemTitle(title: 'مطالب مشابه'),
),
if (item.relatedContents.isEmpty)
for (var i = 0; i < 3; i++)
Padding( Padding(
padding: const EdgeInsets.only( padding:
bottom: 8, const EdgeInsets.symmetric(horizontal: 16),
child: DidvanText(
item.title,
style: Theme.of(context).textTheme.subtitle1,
),
),
const SizedBox(height: 8),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: _subtitle(item),
),
for (var i = 0; i < item.contents.length; i++)
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 4,
),
child: _contentBuilder(item, i),
),
if (item.tags.isNotEmpty)
const SizedBox(height: 20),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (var i = 0; i < item.tags.length; i++)
TagItem(label: item.tags[i].label),
],
),
),
const Padding(
padding: EdgeInsets.only(
left: 16, left: 16,
right: 16, right: 16,
top: 16,
), ),
child: MultitypeOverview.placeholder, child: DidvanDivider(verticalPadding: 0),
), ),
for (var i = 0; i < item.relatedContents.length; i++) const Padding(
Padding( padding: EdgeInsets.symmetric(horizontal: 16.0),
padding: const EdgeInsets.only( child: ItemTitle(title: 'مطالب مشابه'),
bottom: 8,
left: 16,
right: 16,
), ),
child: MultitypeOverview( if (item.relatedContents.isEmpty)
item: item.relatedContents[i], for (var i = 0; i < 3; i++)
onMarkChanged: (id, value) {}, Padding(
), padding: const EdgeInsets.only(
), bottom: 8,
const SizedBox(height: 8), left: 16,
], right: 16,
); ),
}, child: MultitypeOverview.placeholder,
),
for (var i = 0;
i < item.relatedContents.length;
i++)
Padding(
padding: const EdgeInsets.only(
bottom: 8,
left: 16,
right: 16,
),
child: MultitypeOverview(
item: item.relatedContents[i],
onMarkChanged: (id, value) {},
),
),
const SizedBox(height: 8),
],
);
},
),
),
), ),
), ),
), ),
), ),
), ),
), Positioned(
child: _BackButton(scrollController: widget.scrollController),
right: 24,
top: 24 + deviceTopPadding,
),
],
); );
} }
@ -219,3 +240,66 @@ class _DidvanPageViewState extends State<DidvanPageView> {
} }
} }
} }
class _BackButton extends StatefulWidget {
final ScrollController scrollController;
const _BackButton({Key? key, required this.scrollController})
: super(key: key);
@override
__BackButtonState createState() => __BackButtonState();
}
class __BackButtonState extends State<_BackButton> {
bool _isVisible = false;
@override
void didUpdateWidget(covariant _BackButton oldWidget) {
_isVisible = false;
_handleScroll();
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
_handleScroll();
super.initState();
}
void _handleScroll() {
widget.scrollController.addListener(() {
final position = widget.scrollController.position.pixels;
final size = MediaQuery.of(context).size.height * 0.3;
if (position > size && _isVisible == false) {
setState(() {
_isVisible = true;
});
}
if (position < size && _isVisible == true) {
setState(() {
_isVisible = false;
});
}
});
}
@override
Widget build(BuildContext context) {
return AnimatedVisibility(
duration: DesignConfig.lowAnimationDuration,
isVisible: _isVisible,
child: InkWrapper(
borderRadius: DesignConfig.lowBorderRadius,
onPressed: Navigator.of(context).pop,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.splash,
border: Border.all(color: Theme.of(context).colorScheme.border),
borderRadius: DesignConfig.lowBorderRadius,
),
child: const Icon(DidvanIcons.back_regular, size: 32),
),
),
);
}
}