D1APP-99 studio tab buttons & slider

This commit is contained in:
MohammadTaha Basiri 2022-02-23 18:42:29 +03:30
parent b8dfbc2345
commit 9d58b8a8f6
4 changed files with 197 additions and 12 deletions

View File

@ -1,20 +1,32 @@
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<Studio> createState() => _StudioState();
}
class _StudioState extends State<Studio> {
final FocusNode _focusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Row(
children: [
const Expanded(child: LogoAppBar(type: 'studio')),
Padding(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
padding:
EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: DidvanIconButton(
icon: DidvanIcons.bookmark_regular,
onPressed: () {},
@ -22,6 +34,23 @@ class Studio extends StatelessWidget {
),
],
),
),
const SliverToBoxAdapter(
child: StudioTabBar(),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SearchField(
title: 'جستجو در استودیو',
onChanged: (value) {},
focusNode: _focusNode,
),
),
),
const SliverToBoxAdapter(
child: StudioSlider(),
),
],
);
}

View File

@ -0,0 +1,5 @@
import 'package:didvan/providers/core_provider.dart';
class StudioState extends CoreProvier {
bool videosSelected = true;
}

View File

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

View File

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