D1APP-99 studio tab buttons & slider
This commit is contained in:
parent
b8dfbc2345
commit
9d58b8a8f6
|
|
@ -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<Studio> createState() => _StudioState();
|
||||
}
|
||||
|
||||
class _StudioState extends State<Studio> {
|
||||
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(),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import 'package:didvan/providers/core_provider.dart';
|
||||
|
||||
class StudioState extends CoreProvier {
|
||||
bool videosSelected = true;
|
||||
}
|
||||
|
|
@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue