291 lines
10 KiB
Dart
291 lines
10 KiB
Dart
import 'package:maxdash/controller/forms/custom_option_controller.dart';
|
|
import 'package:maxdash/helpers/theme/app_theme.dart';
|
|
import 'package:maxdash/helpers/utils/mixins/ui_mixin.dart';
|
|
import 'package:maxdash/helpers/utils/my_shadow.dart';
|
|
import 'package:maxdash/helpers/widgets/my_breadcrumb.dart';
|
|
import 'package:maxdash/helpers/widgets/my_breadcrumb_item.dart';
|
|
import 'package:maxdash/helpers/widgets/my_card.dart';
|
|
import 'package:maxdash/helpers/widgets/my_container.dart';
|
|
import 'package:maxdash/helpers/widgets/my_flex.dart';
|
|
import 'package:maxdash/helpers/widgets/my_flex_item.dart';
|
|
import 'package:maxdash/helpers/widgets/my_spacing.dart';
|
|
import 'package:maxdash/helpers/widgets/my_text.dart';
|
|
import 'package:maxdash/images.dart';
|
|
import 'package:maxdash/view/layouts/layout.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get_state_manager/get_state_manager.dart';
|
|
import 'package:get/get_utils/get_utils.dart';
|
|
import 'package:flutter_lucide/flutter_lucide.dart';
|
|
|
|
class CustomOptionScreen extends StatefulWidget {
|
|
const CustomOptionScreen({super.key});
|
|
|
|
@override
|
|
State<CustomOptionScreen> createState() => _CustomOptionScreenState();
|
|
}
|
|
|
|
class _CustomOptionScreenState extends State<CustomOptionScreen> with SingleTickerProviderStateMixin, UIMixin {
|
|
late CustomOptionController controller;
|
|
|
|
@override
|
|
void initState() {
|
|
controller = CustomOptionController();
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Layout(
|
|
child: GetBuilder(
|
|
init: controller,
|
|
builder: (controller) {
|
|
return Column(
|
|
children: [
|
|
Padding(
|
|
padding: MySpacing.x(flexSpacing),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
MyText.titleMedium("Custom Option", fontSize: 18, fontWeight: 600),
|
|
MyBreadcrumb(
|
|
children: [MyBreadcrumbItem(name: 'Form'), MyBreadcrumbItem(name: 'Custom Option', active: true)],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
MySpacing.height(flexSpacing),
|
|
Padding(
|
|
padding: MySpacing.x(flexSpacing / 2),
|
|
child: MyFlex(
|
|
children: [
|
|
MyFlexItem(sizes: 'lg-6', child: _basicRadioButton()),
|
|
MyFlexItem(sizes: 'lg-6', child: _customBasicRadio()),
|
|
MyFlexItem(sizes: 'lg-6', child: _customOptionRadiosWithIcons()),
|
|
MyFlexItem(sizes: 'lg-6', child: _customOptionsRadioWithImages()),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _customOptionsRadioWithImages() {
|
|
Widget imageData(String image, int id) {
|
|
return Stack(
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
alignment: Alignment.topRight,
|
|
children: [
|
|
MyContainer(
|
|
onTap: () => controller.onChangeCustomImageRadioButton(id),
|
|
height: 160,
|
|
paddingAll: 0,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
child: Image.asset(image, fit: BoxFit.cover),
|
|
),
|
|
Positioned(
|
|
top: 12,
|
|
right: 12,
|
|
child: id == controller.customImageRadioButton
|
|
? MyContainer.rounded(
|
|
height: 24,
|
|
width: 24,
|
|
paddingAll: 0,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
child: Icon(LucideIcons.check, size: 16),
|
|
)
|
|
: SizedBox(),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 24,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleMedium("Custom Options Radio With Images", fontWeight: 600),
|
|
MySpacing.height(16),
|
|
Wrap(
|
|
spacing: 20,
|
|
runSpacing: 20,
|
|
children: [
|
|
imageData(Images.dummy[0], 0),
|
|
imageData(Images.dummy[1], 1),
|
|
imageData(Images.dummy[2], 2),
|
|
imageData(Images.dummy[3], 3),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _customOptionRadiosWithIcons() {
|
|
Widget customData(IconData icon, String name, des, int id) {
|
|
return Expanded(
|
|
child: MyContainer.bordered(
|
|
onTap: () => controller.onChangeCustomButton(id),
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
height: 160,
|
|
borderColor: id == controller.customRadioButton ? contentTheme.primary : null,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Icon(icon),
|
|
MyText.bodyMedium(name, fontWeight: 600),
|
|
MyText.bodySmall(des, maxLines: 3, textAlign: TextAlign.center, overflow: TextOverflow.visible),
|
|
MyContainer.roundBordered(
|
|
paddingAll: 4,
|
|
borderColor: id == controller.customRadioButton ? contentTheme.primary : null,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
child: MyContainer.rounded(
|
|
paddingAll: 4,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
color: id == controller.customRadioButton ? contentTheme.primary : null,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 24,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleMedium("Custom Option Radios With Icons", fontWeight: 600),
|
|
MySpacing.height(16),
|
|
Row(
|
|
children: [
|
|
customData(LucideIcons.accessibility, "Basic", controller.dummyTexts[3], 0),
|
|
MySpacing.width(16),
|
|
customData(LucideIcons.activity, "Premium", controller.dummyTexts[4], 1),
|
|
MySpacing.width(16),
|
|
customData(LucideIcons.alarm_clock_check, "Advance", controller.dummyTexts[8], 2),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _basicRadioButton() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 24,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleMedium("Radio Button", fontWeight: 600),
|
|
MySpacing.height(12),
|
|
Row(
|
|
children: [
|
|
MyText.labelLarge("Gender"),
|
|
MySpacing.width(16),
|
|
Expanded(
|
|
child: Wrap(
|
|
spacing: 16,
|
|
children: Gender.values
|
|
.map(
|
|
(gender) => MyContainer.bordered(
|
|
onTap: () => controller.onChangeGender(gender),
|
|
paddingAll: 12,
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Radio<Gender>(
|
|
value: gender,
|
|
activeColor: theme.colorScheme.primary,
|
|
groupValue: controller.selectedGender,
|
|
onChanged: controller.onChangeGender,
|
|
visualDensity: getCompactDensity,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
MySpacing.width(8),
|
|
MyText.labelMedium(gender.name.capitalize!)
|
|
],
|
|
),
|
|
),
|
|
)
|
|
.toList()),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _customBasicRadio() {
|
|
Widget basicRadioButtonData(String title, IconData icon, int id) {
|
|
return Expanded(
|
|
child: MyContainer.bordered(
|
|
splashColor: Colors.cyanAccent,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
onTap: () => controller.onSelectButton(id),
|
|
borderColor: id == controller.selectRadioButton ? contentTheme.primary : null,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
MyContainer.roundBordered(
|
|
paddingAll: 4,
|
|
borderColor: id == controller.selectRadioButton ? contentTheme.primary : null,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
child: MyContainer.rounded(
|
|
paddingAll: 4,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
color: id == controller.selectRadioButton ? contentTheme.primary : null,
|
|
),
|
|
),
|
|
MyText.bodyMedium(title, fontWeight: 600),
|
|
Icon(icon),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 24,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleMedium(
|
|
"Custom Basic Radio Button",
|
|
fontWeight: 600,
|
|
),
|
|
MySpacing.height(12),
|
|
Row(
|
|
children: [
|
|
basicRadioButtonData("Basic", LucideIcons.air_vent, 0),
|
|
MySpacing.width(12),
|
|
basicRadioButtonData("Premium", LucideIcons.air_vent, 1),
|
|
MySpacing.width(12),
|
|
basicRadioButtonData("Advanced", LucideIcons.air_vent, 2),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|