118 lines
4.2 KiB
Dart
118 lines
4.2 KiB
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/models/enums.dart';
|
|
import 'package:didvan/views/home/studio/studio_state.dart';
|
|
import 'package:didvan/views/widgets/didvan/text.dart';
|
|
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
|
|
import 'package:didvan/views/widgets/skeleton_image.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class StudioSlider extends StatefulWidget {
|
|
const StudioSlider({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<StudioSlider> createState() => _StudioSliderState();
|
|
}
|
|
|
|
class _StudioSliderState extends State<StudioSlider> {
|
|
int selectedIndex = 0;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final state = context.watch<StudioState>();
|
|
return Column(
|
|
children: [
|
|
CarouselSlider(
|
|
items: [
|
|
for (var i = 0; i < state.sliders.length; i++)
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
child: state.appState == AppState.busy
|
|
? const ShimmerPlaceholder()
|
|
: Stack(
|
|
children: [
|
|
SkeletonImage(
|
|
borderRadius: DesignConfig.mediumBorderRadius,
|
|
imageUrl: state.sliders[i].image,
|
|
width: double.infinity,
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 4,
|
|
horizontal: 8,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: (state.videosSelected
|
|
? Theme.of(context)
|
|
.colorScheme
|
|
.secondaryDisabled
|
|
: Theme.of(context).colorScheme.focused)
|
|
.withOpacity(0.9),
|
|
borderRadius: const BorderRadius.vertical(
|
|
bottom: Radius.circular(10),
|
|
),
|
|
),
|
|
child: DidvanText(
|
|
state.sliders[i].title,
|
|
color: Theme.of(context).colorScheme.title,
|
|
style: Theme.of(context).textTheme.caption,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
options: CarouselOptions(
|
|
onPageChanged: (index, reason) => setState(
|
|
() => selectedIndex = index,
|
|
),
|
|
viewportFraction: 0.94,
|
|
aspectRatio: 16 / 9,
|
|
autoPlay: true,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
for (var i = 0; i < state.sliders.length; i++)
|
|
_SliderIndicator(isCurrentIndex: selectedIndex == i),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SliderIndicator extends StatelessWidget {
|
|
final bool isCurrentIndex;
|
|
const _SliderIndicator({Key? key, required this.isCurrentIndex})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedContainer(
|
|
duration: DesignConfig.lowAnimationDuration,
|
|
height: 8,
|
|
width: 8,
|
|
margin: const EdgeInsets.only(left: 4),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(
|
|
color: Theme.of(context).colorScheme.focusedBorder,
|
|
),
|
|
shape: BoxShape.circle,
|
|
color:
|
|
isCurrentIndex ? Theme.of(context).colorScheme.focusedBorder : null,
|
|
),
|
|
);
|
|
}
|
|
}
|