91 lines
2.9 KiB
Dart
91 lines
2.9 KiB
Dart
import 'package:didvan/config/design_config.dart';
|
|
import 'package:didvan/config/theme_data.dart';
|
|
import 'package:didvan/models/category.dart';
|
|
import 'package:didvan/views/widgets/animated_visibility.dart';
|
|
import 'package:didvan/views/widgets/didvan/text.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
|
|
class CategoryItem extends StatelessWidget {
|
|
final CategoryData category;
|
|
final bool isColapsed;
|
|
final VoidCallback onSelected;
|
|
|
|
const CategoryItem({
|
|
Key? key,
|
|
required this.isColapsed,
|
|
required this.category,
|
|
required this.onSelected,
|
|
}) : super(key: key);
|
|
|
|
double _width(context) {
|
|
final Size ds = MediaQuery.of(context).size;
|
|
if (kIsWeb) {
|
|
if (!_useWebMobileLayout(context)) {
|
|
return ds.height / 16 * 9 / 3;
|
|
}
|
|
}
|
|
return ds.width / 3;
|
|
}
|
|
|
|
bool _useWebMobileLayout(context) {
|
|
final shortestSide = MediaQuery.of(context).size.shortestSide;
|
|
final bool useMobileLayout = shortestSide < 600;
|
|
return kIsWeb && useMobileLayout;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final Size ds = MediaQuery.of(context).size;
|
|
return Center(
|
|
child: GestureDetector(
|
|
onTap: onSelected,
|
|
child: AnimatedContainer(
|
|
duration: DesignConfig.mediumAnimationDuration,
|
|
padding: isColapsed ? const EdgeInsets.all(4) : EdgeInsets.zero,
|
|
width: isColapsed ? 100 : _width(context),
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
borderRadius: DesignConfig.lowBorderRadius,
|
|
border: isColapsed
|
|
? Border.all(color: Theme.of(context).colorScheme.focusedBorder)
|
|
: null,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
AnimatedVisibility(
|
|
duration: DesignConfig.mediumAnimationDuration,
|
|
isVisible: !isColapsed,
|
|
child: Container(
|
|
width: !_useWebMobileLayout(context)
|
|
? _width(context) / 2
|
|
: ds.width / 7,
|
|
height: !_useWebMobileLayout(context)
|
|
? _width(context) / 2
|
|
: ds.width / 7,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
boxShadow: DesignConfig.defaultShadow,
|
|
borderRadius: DesignConfig.mediumBorderRadius,
|
|
),
|
|
padding: const EdgeInsets.all(8),
|
|
child: SvgPicture.asset(category.asset!),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 8,
|
|
),
|
|
DidvanText(
|
|
category.label,
|
|
style: Theme.of(context).textTheme.titleSmall,
|
|
color: Theme.of(context).colorScheme.title,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|