From 9d58b8a8f6726cd215bb22f8e6ce9cf201c330ee Mon Sep 17 00:00:00 2001 From: MohammadTaha Basiri Date: Wed, 23 Feb 2022 18:42:29 +0330 Subject: [PATCH] D1APP-99 studio tab buttons & slider --- lib/pages/home/studio/studio.dart | 53 ++++++++--- lib/pages/home/studio/studio_state.dart | 5 ++ lib/pages/home/studio/widgets/slider.dart | 51 +++++++++++ lib/pages/home/studio/widgets/tab_bar.dart | 100 +++++++++++++++++++++ 4 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 lib/pages/home/studio/studio_state.dart create mode 100644 lib/pages/home/studio/widgets/slider.dart create mode 100644 lib/pages/home/studio/widgets/tab_bar.dart diff --git a/lib/pages/home/studio/studio.dart b/lib/pages/home/studio/studio.dart index 148fbf2..2655767 100644 --- a/lib/pages/home/studio/studio.dart +++ b/lib/pages/home/studio/studio.dart @@ -1,26 +1,55 @@ import 'package:didvan/constants/app_icons.dart'; +import 'package:didvan/pages/home/studio/widgets/slider.dart'; +import 'package:didvan/pages/home/studio/widgets/tab_bar.dart'; import 'package:didvan/pages/home/widgets/logo_app_bar.dart'; +import 'package:didvan/pages/home/widgets/search_field.dart'; import 'package:didvan/widgets/didvan/icon_button.dart'; import 'package:flutter/material.dart'; -class Studio extends StatelessWidget { +class Studio extends StatefulWidget { const Studio({Key? key}) : super(key: key); + @override + State createState() => _StudioState(); +} + +class _StudioState extends State { + final FocusNode _focusNode = FocusNode(); + @override Widget build(BuildContext context) { - return Column( - children: [ - Row( - children: [ - const Expanded(child: LogoAppBar(type: 'studio')), - Padding( - padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), - child: DidvanIconButton( - icon: DidvanIcons.bookmark_regular, - onPressed: () {}, + return CustomScrollView( + slivers: [ + SliverToBoxAdapter( + child: Row( + children: [ + const Expanded(child: LogoAppBar(type: 'studio')), + Padding( + padding: + EdgeInsets.only(top: MediaQuery.of(context).padding.top), + child: DidvanIconButton( + icon: DidvanIcons.bookmark_regular, + onPressed: () {}, + ), ), + ], + ), + ), + const SliverToBoxAdapter( + child: StudioTabBar(), + ), + SliverToBoxAdapter( + child: Padding( + padding: const EdgeInsets.all(16.0), + child: SearchField( + title: 'جستجو در استودیو', + onChanged: (value) {}, + focusNode: _focusNode, ), - ], + ), + ), + const SliverToBoxAdapter( + child: StudioSlider(), ), ], ); diff --git a/lib/pages/home/studio/studio_state.dart b/lib/pages/home/studio/studio_state.dart new file mode 100644 index 0000000..ffa0282 --- /dev/null +++ b/lib/pages/home/studio/studio_state.dart @@ -0,0 +1,5 @@ +import 'package:didvan/providers/core_provider.dart'; + +class StudioState extends CoreProvier { + bool videosSelected = true; +} diff --git a/lib/pages/home/studio/widgets/slider.dart b/lib/pages/home/studio/widgets/slider.dart new file mode 100644 index 0000000..d312b2b --- /dev/null +++ b/lib/pages/home/studio/widgets/slider.dart @@ -0,0 +1,51 @@ +import 'package:carousel_slider/carousel_slider.dart'; +import 'package:didvan/config/theme_data.dart'; +import 'package:flutter/material.dart'; + +class StudioSlider extends StatelessWidget { + const StudioSlider({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + CarouselSlider( + items: [ + Image.network('https://wallpapercave.com/wp/wp10731650.jpg'), + Image.network('https://wallpapercave.com/wp/wp10731650.jpg'), + Image.network('https://wallpapercave.com/wp/wp10731650.jpg'), + Image.network('https://wallpapercave.com/wp/wp10731650.jpg'), + ], + options: CarouselOptions( + viewportFraction: 0.94, + aspectRatio: 16 / 9, + autoPlay: true, + ), + ), + Row(), + ], + ); + } +} + +class _SliderIndicator extends StatelessWidget { + final bool isCurrentIndex; + const _SliderIndicator({Key? key, required this.isCurrentIndex}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + height: 8, + width: 8, + decoration: BoxDecoration( + border: Border.all( + color: Theme.of(context).colorScheme.focusedBorder, + ), + shape: BoxShape.circle, + color: + isCurrentIndex ? Theme.of(context).colorScheme.focusedBorder : null, + ), + ); + } +} diff --git a/lib/pages/home/studio/widgets/tab_bar.dart b/lib/pages/home/studio/widgets/tab_bar.dart new file mode 100644 index 0000000..61483bc --- /dev/null +++ b/lib/pages/home/studio/widgets/tab_bar.dart @@ -0,0 +1,100 @@ +import 'package:didvan/config/design_config.dart'; +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 StudioTabBar extends StatelessWidget { + const StudioTabBar({ + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + margin: const EdgeInsets.symmetric(horizontal: 16), + padding: const EdgeInsets.all(4), + decoration: BoxDecoration( + border: Border.all(color: Theme.of(context).colorScheme.border), + borderRadius: DesignConfig.lowBorderRadius, + ), + child: Row( + children: [ + Expanded( + child: _StudioTypeButton( + icon: DidvanIcons.video_solid, + selectedColor: Theme.of(context).colorScheme.secondary, + title: 'ویدئو', + onTap: () {}, + isSelected: true, + ), + ), + Container( + width: 1, + height: 32, + color: Theme.of(context).colorScheme.border, + ), + Expanded( + child: _StudioTypeButton( + icon: DidvanIcons.podcast_solid, + selectedColor: Theme.of(context).colorScheme.focusedBorder, + title: 'پادکست', + onTap: () {}, + isSelected: true, + ), + ), + ], + ), + ); + } +} + +class _StudioTypeButton extends StatelessWidget { + final IconData icon; + final String title; + final VoidCallback onTap; + final bool isSelected; + final Color selectedColor; + const _StudioTypeButton({ + Key? key, + required this.icon, + required this.selectedColor, + required this.title, + required this.onTap, + required this.isSelected, + }) : super(key: key); + + Color? get _color => isSelected ? selectedColor : null; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Container( + color: Colors.transparent, + child: Column( + children: [ + Icon( + icon, + size: 32, + color: _color, + ), + if (!isSelected) const SizedBox(height: 18), + if (isSelected) + Container( + width: 88, + height: 1, + color: _color, + ), + if (isSelected) + DidvanText( + title, + style: Theme.of(context).textTheme.overline, + color: _color, + ) + ], + ), + ), + ); + } +}