542 lines
22 KiB
Dart
542 lines
22 KiB
Dart
import 'package:maxdash/app_constant.dart';
|
|
import 'package:maxdash/controller/forms/basic_input_controller.dart';
|
|
import 'package:maxdash/helpers/extensions/date_time_extension.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_button.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/helpers/widgets/my_text_style.dart';
|
|
import 'package:maxdash/view/layouts/layout.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:flutter_lucide/flutter_lucide.dart';
|
|
|
|
class BasicInputScreen extends StatefulWidget {
|
|
const BasicInputScreen({super.key});
|
|
|
|
@override
|
|
State<BasicInputScreen> createState() => _BasicInputScreenState();
|
|
}
|
|
|
|
class _BasicInputScreenState extends State<BasicInputScreen> with SingleTickerProviderStateMixin, UIMixin {
|
|
late BasicInputController controller;
|
|
|
|
@override
|
|
void initState() {
|
|
controller = BasicInputController();
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Layout(
|
|
child: GetBuilder(
|
|
init: controller,
|
|
tag: 'basic_input_controller',
|
|
builder: (controller) {
|
|
return Column(
|
|
children: [
|
|
Padding(
|
|
padding: MySpacing.x(flexSpacing),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
MyText.titleMedium("Basic Input", fontSize: 18, fontWeight: 600),
|
|
MyBreadcrumb(
|
|
children: [MyBreadcrumbItem(name: 'Form'), MyBreadcrumbItem(name: 'Basic Input', active: true)],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
MySpacing.height(flexSpacing),
|
|
Padding(
|
|
padding: MySpacing.x(flexSpacing / 2),
|
|
child: MyFlex(
|
|
children: [
|
|
MyFlexItem(sizes: 'lg-6', child: buildBuilder()),
|
|
MyFlexItem(
|
|
sizes: 'lg-6',
|
|
child: MyFlex(contentPadding: false, children: [
|
|
MyFlexItem(sizes: 'lg-6', child: selectDate()),
|
|
MyFlexItem(sizes: 'lg-6', child: selectTime()),
|
|
MyFlexItem(sizes: 'lg-6', child: selectRange()),
|
|
MyFlexItem(sizes: 'lg-6', child: selectDateTime()),
|
|
MyFlexItem(sizes: 'lg-6', child: radioButton()),
|
|
])),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget buildBuilder() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
paddingAll: 0,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Container(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
padding: MySpacing.xy(flexSpacing, 12),
|
|
child: Row(
|
|
children: [
|
|
Icon(LucideIcons.settings, color: colorScheme.primary, size: 16),
|
|
MySpacing.width(12),
|
|
MyText.titleMedium("builder", fontWeight: 600, color: colorScheme.primary),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(flexSpacing),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 180, child: MyText.labelLarge("Floating Label Type")),
|
|
PopupMenuButton(
|
|
onSelected: controller.onChangeLabelType,
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
shape: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(8)),
|
|
itemBuilder: (BuildContext context) {
|
|
return FloatingLabelBehavior.values.map((behavior) {
|
|
return PopupMenuItem(
|
|
value: behavior,
|
|
height: 32,
|
|
child: MyText.bodySmall(behavior.name.capitalize!, color: theme.colorScheme.onSurface, fontWeight: 600),
|
|
);
|
|
}).toList();
|
|
},
|
|
color: theme.cardTheme.color,
|
|
child: MyContainer.bordered(
|
|
padding: MySpacing.xy(12, 8),
|
|
borderRadiusAll: 8,
|
|
child: Row(
|
|
children: <Widget>[
|
|
MyText.labelMedium(controller.floatingLabelBehavior.name.capitalize!, color: theme.colorScheme.onSurface),
|
|
Container(
|
|
margin: EdgeInsets.only(left: 4),
|
|
child: Icon(
|
|
LucideIcons.chevron_down,
|
|
size: 22,
|
|
color: theme.colorScheme.onSurface,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
MySpacing.height(12),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 180, child: MyText.labelLarge("Border Type")),
|
|
PopupMenuButton(
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
shape: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(8)),
|
|
onSelected: controller.onChangeBorderType,
|
|
itemBuilder: (BuildContext context) {
|
|
return TextFieldBorderType.values.map((borderType) {
|
|
return PopupMenuItem(
|
|
value: borderType,
|
|
height: 32,
|
|
child: MyText.bodySmall(borderType.name.capitalize!, color: theme.colorScheme.onSurface, fontWeight: 600),
|
|
);
|
|
}).toList();
|
|
},
|
|
color: theme.cardTheme.color,
|
|
child: MyContainer.bordered(
|
|
borderRadiusAll: 8,
|
|
padding: MySpacing.xy(12, 8),
|
|
child: Row(
|
|
children: <Widget>[
|
|
MyText.labelMedium(controller.borderType.name.capitalize!, color: theme.colorScheme.onSurface),
|
|
Container(
|
|
margin: EdgeInsets.only(left: 4),
|
|
child: Icon(LucideIcons.chevron_down, size: 22, color: theme.colorScheme.onSurface),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
MySpacing.height(12),
|
|
Row(
|
|
children: [
|
|
Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Filled")),
|
|
Switch(
|
|
onChanged: controller.onChangedFilledChecked,
|
|
value: controller.filled,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Disabled")),
|
|
Switch(
|
|
onChanged: controller.onChangedDisabledChecked,
|
|
value: controller.disabled,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Read Only")),
|
|
Switch(
|
|
onChanged: controller.onChangedReadOnlyChecked,
|
|
value: controller.readOnly,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Helper Text")),
|
|
Switch(
|
|
onChanged: controller.onChangedHelperTextChecked,
|
|
value: controller.helperText,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
MySpacing.width(12),
|
|
Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Inline Text")),
|
|
Switch(
|
|
onChanged: controller.onChangedInlineTextChecked,
|
|
value: controller.inlineText,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Pilled")),
|
|
Switch(
|
|
onChanged: controller.onChangedPilledChecked,
|
|
value: controller.pilled,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Prefix Icon")),
|
|
Switch(
|
|
onChanged: controller.onChangedPrefixIconChecked,
|
|
value: controller.prefixIcon,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
SizedBox(width: 100, child: MyText.labelLarge("Suffix Icon")),
|
|
Switch(
|
|
onChanged: controller.onChangedSuffixIconChecked,
|
|
value: controller.suffixIcon,
|
|
activeColor: theme.colorScheme.primary,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
MySpacing.height(20),
|
|
TextField(
|
|
controller: TextEditingController(text: "Hello,"),
|
|
enabled: controller.disabled,
|
|
readOnly: controller.readOnly,
|
|
style: MyTextStyle.bodySmall(fontWeight: 600),
|
|
decoration: InputDecoration(
|
|
suffixIcon: controller.suffixIcon ? Icon(LucideIcons.nfc) : null,
|
|
prefixIcon: controller.prefixIcon ? Icon(LucideIcons.smartphone_nfc) : null,
|
|
labelText: "Inputs Label",
|
|
suffixText: controller.inlineText ? "Inline Text" : "",
|
|
helperText: controller.helperText ? "Demo Helper Text" : "",
|
|
border: controller.inputBorder,
|
|
focusedBorder: controller.inputBorder,
|
|
filled: controller.filled,
|
|
enabledBorder: controller.inputBorder,
|
|
floatingLabelBehavior: controller.floatingLabelBehavior,
|
|
contentPadding: MySpacing.all(12),
|
|
hintStyle: MyTextStyle.bodySmall(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget radioButton() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 0,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyContainer.none(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
paddingAll: 13,
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium("Radio Button", fontWeight: 600, color: colorScheme.primary),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(24),
|
|
child: Row(
|
|
children: [
|
|
MyText.labelLarge("Gender"),
|
|
MySpacing.width(16),
|
|
Expanded(
|
|
child: Wrap(
|
|
spacing: 16,
|
|
children: Gender.values
|
|
.map(
|
|
(gender) => InkWell(
|
|
onTap: () => controller.onChangeGender(gender),
|
|
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 selectDate() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 0,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyContainer.none(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
paddingAll: 13,
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium("Date", fontWeight: 600, color: colorScheme.primary),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(24),
|
|
child: MyButton.outlined(
|
|
onPressed: () => controller.pickDate(),
|
|
borderColor: colorScheme.primary,
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
Icon(
|
|
LucideIcons.calendar,
|
|
color: colorScheme.primary,
|
|
size: 16,
|
|
),
|
|
MySpacing.width(10),
|
|
MyText.labelMedium(controller.selectedDate != null ? dateFormatter.format(controller.selectedDate!) : "Select Date",
|
|
fontWeight: 600, color: colorScheme.primary),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget selectTime() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 0,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyContainer.none(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
paddingAll: 13,
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium("Time", fontWeight: 600, color: colorScheme.primary),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(24),
|
|
child: MyButton.outlined(
|
|
onPressed: () => controller.pickTime(),
|
|
borderColor: colorScheme.primary,
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
Icon(
|
|
LucideIcons.clock_3,
|
|
color: colorScheme.primary,
|
|
size: 16,
|
|
),
|
|
MySpacing.width(10),
|
|
MyText.labelMedium(controller.selectedTime != null ? timeFormatter.format(DateTime.now().applied(controller.selectedTime!)) : "Select Time",
|
|
fontWeight: 600, color: colorScheme.primary),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget selectRange() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 0,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyContainer.none(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
paddingAll: 13,
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium("Range", fontWeight: 600, color: colorScheme.primary),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(24),
|
|
child: MyButton.outlined(
|
|
onPressed: () => controller.pickDateRange(),
|
|
borderColor: colorScheme.primary,
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
Icon(
|
|
LucideIcons.calendar,
|
|
color: colorScheme.primary,
|
|
size: 16,
|
|
),
|
|
MySpacing.width(10),
|
|
MyText.labelMedium(
|
|
controller.selectedDateTimeRange != null
|
|
? "${dateFormatter.format(controller.selectedDateTimeRange!.start)} - ${dateFormatter.format(controller.selectedDateTimeRange!.end)}"
|
|
: "Select Range",
|
|
fontWeight: 600,
|
|
color: colorScheme.primary),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget selectDateTime() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 0,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyContainer.none(
|
|
color: colorScheme.primary.withValues(alpha:0.08),
|
|
paddingAll: 13,
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium("Range Date & Time", fontWeight: 600, color: colorScheme.primary),
|
|
),
|
|
Padding(
|
|
padding: MySpacing.all(24),
|
|
child: MyButton.outlined(
|
|
onPressed: () => controller.pickDateTime(),
|
|
borderColor: colorScheme.primary,
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
Icon(
|
|
LucideIcons.calendar_check,
|
|
color: colorScheme.primary,
|
|
size: 16,
|
|
),
|
|
MySpacing.width(10),
|
|
MyText.labelMedium(
|
|
controller.selectedDateTime != null
|
|
? "${dateFormatter.format(controller.selectedDateTime!)} ${timeFormatter.format(controller.selectedDateTime!)}"
|
|
: "Select Date & Time",
|
|
fontWeight: 600,
|
|
color: colorScheme.primary),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|