manager-app/lib/Components/segmented_enum_input_container.dart

113 lines
3.5 KiB
Dart

import 'package:flutter/material.dart';
import 'package:manager_app/constants.dart';
class SegmentedEnumInputContainer<T> extends StatefulWidget {
final String label;
final T selected;
final List<T> values;
final Map<T, Map<String, dynamic>> inputValues; // {'label': String, 'icon': IconData}
final ValueChanged<T> onChanged;
final double borderRadius;
final Color selectedColor;
final Color unselectedColor;
final Color textColor;
const SegmentedEnumInputContainer({
Key? key,
required this.label,
required this.selected,
required this.values,
required this.inputValues,
required this.onChanged,
this.borderRadius = 12,
this.selectedColor = kPrimaryColor,
this.unselectedColor = kSecond,
this.textColor = Colors.white,
}) : super(key: key);
@override
_SegmentedEnumInputContainerState<T> createState() =>
_SegmentedEnumInputContainerState<T>();
}
class _SegmentedEnumInputContainerState<T>
extends State<SegmentedEnumInputContainer<T>> {
late T selectedValue;
@override
void initState() {
super.initState();
selectedValue = widget.selected;
}
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
alignment: AlignmentDirectional.centerStart,
child: Text(
widget.label,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
),
const SizedBox(height: 8, width: 10),
Container(
width: 275,
height: 120,
padding: const EdgeInsets.all(4),
/*decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(widget.borderRadius),
border: Border.all(color: Colors.grey.shade400, width: 1.2),
),*/
child: Row(
children: widget.values.map((v) {
bool isSelected = v == selectedValue;
final data = widget.inputValues[v]!;
return Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedValue = v;
});
widget.onChanged(v);
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 250),
margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected ? widget.selectedColor : widget.unselectedColor,
borderRadius: BorderRadius.circular(widget.borderRadius),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(data['icon'], color: widget.textColor),
const SizedBox(width: 4),
Text(
data['label'],
style: TextStyle(
color: widget.textColor,
fontWeight: FontWeight.w400,
),
),
],
),
),
),
);
}).toList(),
),
),
],
);
}
}