D1APP-99 studio tab buttons & slider

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<Studio> createState() => _StudioState();
+}
+
+class _StudioState extends State<Studio> {
+  final FocusNode _focusNode = FocusNode();
+
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return CustomScrollView(
-      children: [
+      slivers: [
-        Row(
+        SliverToBoxAdapter(
-          children: [
+          child: Row(
-            const Expanded(child: LogoAppBar(type: 'studio')),
+            children: [
-            Padding(
+              const Expanded(child: LogoAppBar(type: 'studio')),
-              padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
+              Padding(
-              child: DidvanIconButton(
+                padding:
-                icon: DidvanIcons.bookmark_regular,
+                    EdgeInsets.only(top: MediaQuery.of(context).padding.top),
-                onPressed: () {},
+                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(),
         ),
       ],
     );

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;
+}

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

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