132 lines
4.9 KiB
Dart
132 lines
4.9 KiB
Dart
import 'package:didvan/config/theme_data.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
|
|
class CustomMediaTabBar extends StatefulWidget {
|
|
final int currentIndex;
|
|
final ValueChanged<int> onTap;
|
|
final List<String> categories;
|
|
final List<String> iconPaths;
|
|
final String? customIndicatorPath;
|
|
|
|
const CustomMediaTabBar({
|
|
super.key,
|
|
required this.currentIndex,
|
|
required this.onTap,
|
|
required this.categories,
|
|
required this.iconPaths,
|
|
this.customIndicatorPath,
|
|
});
|
|
|
|
@override
|
|
State<CustomMediaTabBar> createState() => _CustomMediaTabBarState();
|
|
}
|
|
|
|
class _CustomMediaTabBarState extends State<CustomMediaTabBar> {
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
height: 80,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Row(
|
|
children: List.generate(widget.categories.length, (index) {
|
|
final isSelected = index == widget.currentIndex;
|
|
return Expanded(
|
|
child: GestureDetector(
|
|
onTap: () => widget.onTap(index),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
height: 80,
|
|
color: Colors.transparent,
|
|
transform: Matrix4.translationValues(0, isSelected ? -8.0 : 0.0, 0),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.all(8),
|
|
child: SvgPicture.asset(
|
|
widget.iconPaths[index],
|
|
width: 24,
|
|
height: 24,
|
|
colorFilter: ColorFilter.mode(
|
|
isSelected
|
|
? Theme.of(context).colorScheme.primary
|
|
: Theme.of(context).colorScheme.caption,
|
|
BlendMode.srcIn,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
child: Text(
|
|
widget.categories[index],
|
|
textAlign: TextAlign.center,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: Theme.of(context).textTheme.bodySmall!.copyWith(
|
|
color: isSelected
|
|
? Theme.of(context).colorScheme.primary
|
|
: Theme.of(context).colorScheme.caption,
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
|
|
Positioned(
|
|
bottom: -1,
|
|
left: 0,
|
|
right: 0,
|
|
height: 12,
|
|
child: Row(
|
|
children: List.generate(widget.categories.length, (index) {
|
|
return Expanded(
|
|
child: Center(
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
child: index == widget.currentIndex
|
|
? (widget.customIndicatorPath != null
|
|
? SvgPicture.asset(
|
|
"lib/assets/icons/Union.svg",
|
|
width: 100,
|
|
height: 12,
|
|
colorFilter: ColorFilter.mode(
|
|
Theme.of(context).colorScheme.primary,
|
|
BlendMode.srcIn,
|
|
),
|
|
)
|
|
: Container(
|
|
width: 100,
|
|
height: 12,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.primary,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
))
|
|
: null,
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |