Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat | Checkbox | Add new checkbox with field #5

Merged
merged 4 commits into from
May 25, 2024
Merged

Feat | Checkbox | Add new checkbox with field #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9086c7
feat
May 8, 2024
fcbde08
chors : add some border-decoration
May 8, 2024
65738c3
chores : transparent color
May 8, 2024
fdf07e0
feat : flutter form builder
May 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ android {
applicationId "dev.danvickmiller.flutterformbuilder.example"
// You can update the following values to match your application needs.
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
minSdkVersion 16
minSdkVersion flutter.minSdkVersion
targetSdkVersion 33
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
Expand Down
170 changes: 41 additions & 129 deletions example/lib/sources/complete_form.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,146 +359,58 @@ class _CompleteFormState extends State<CompleteForm> {
FormBuilderValidators.maxLength(3),
]),
),
AlippoCustomRadioGroup<String>(
autovalidateMode: AutovalidateMode.onUserInteraction,
name: 'languages_choice',
// initialValue: 'Java',
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 50),
expanded: true,
spacing: 20,
selectedLabelStyle: const TextStyle(
color: Color(0xFFFAF9F9),
fontSize: 18,
fontFamily: 'PP Pangram Sans Rounded',
fontWeight: FontWeight.w700,
letterSpacing: -0.36,
),
unselectedLabelStyle: const TextStyle(
color: Color(0xFF1A4F76),
fontSize: 18,
fontFamily: 'PP Pangram Sans Rounded',
fontWeight: FontWeight.w400,
letterSpacing: -0.36,
),
selectedCardColor: const Color(0xFF1A4F76),
defaultCardColor: const Color(0xFFFAF9F9),
selectedShape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
color: Colors.black.withOpacity(0.36000001430511475),
),
borderRadius: BorderRadius.circular(17),
),
unselectedShape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
color: Colors.black.withOpacity(0.07000000029802322),
),
borderRadius: BorderRadius.circular(17),
),
options: [
SelectionCardOption(
value: '5000 - 6000',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
),
SelectionCardOption(
value: 'Kotlin',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config2,
),
SelectionCardOption(
value: 'Java',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
),
const SelectionCardOption(
value: 'Swift',
avatar: Icon(Icons.monetization_on_outlined),
),
SelectionCardOption(
value: 'Objective-C',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
),
],
onChanged: _onChanged,
validator: FormBuilderValidators.compose([
FormBuilderValidators.minLength(1),
]),
),
AlippoCustomCheckBoxGroup<String>(
autovalidateMode: AutovalidateMode.onUserInteraction,
CustomCheckBoxGroup(
onChanged: (value) {},
name: 'languages_selection',
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 50),
expanded: true,
spacing: 20,
selectedLabelStyle: const TextStyle(
color: Color(0xFFFAF9F9),
fontSize: 18,
fontFamily: 'PP Pangram Sans Rounded',
fontWeight: FontWeight.w700,
letterSpacing: -0.36,
),
unselectedLabelStyle: const TextStyle(
color: Color(0xFF1A4F76),
fontSize: 18,
fontFamily: 'PP Pangram Sans Rounded',
fontWeight: FontWeight.w400,
letterSpacing: -0.36,
),
selectedCardColor: const Color(0xFF1A4F76),
defaultCardColor: const Color(0xFFFAF9F9),
selectedShape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
color: Colors.black.withOpacity(0.36000001430511475),
),
borderRadius: BorderRadius.circular(17),
),
unselectedShape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
color: Colors.black.withOpacity(0.07000000029802322),
),
borderRadius: BorderRadius.circular(17),
),
options: [
SelectionCardOption(
value: '5000 - 6000',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
),
SelectionCardOption(
value: 'Kotlin',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config2,
value: '1',
child: Container(
height: 100,
width: 200,
color: Colors.red,
child: const Center(
child: Text('1'),
),
),
),
SelectionCardOption(
value: 'Java',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
),
const SelectionCardOption(
value: 'Swift',
avatar: Icon(Icons.monetization_on_outlined),
value: '2',
child: Container(
height: 100,
width: 200,
color: Colors.blue,
child: const Center(
child: Text('2'),
),
),
),
SelectionCardOption(
value: 'Dart',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
value: '3',
child: Container(
height: 100,
width: 200,
color: Colors.green,
child: const Center(
child: Text('3'),
),
),
),
SelectionCardOption(
value: 'Objective-C',
avatar: const Icon(Icons.monetization_on_outlined),
infoModalConfig: config,
value: '4',
child: Container(
height: 100,
width: 200,
color: Colors.yellow,
child: const Center(
child: Text('4'),
),
),
),
],
onChanged: _onChanged,
validator: FormBuilderValidators.compose([
FormBuilderValidators.minLength(1),
]),
)
selectedBorderRadius: BorderRadius.circular(8),
selectedColor: Colors.pink,
),
],
),
),
Expand Down
1 change: 1 addition & 0 deletions lib/flutter_form_builder.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,4 @@ export 'src/options/display_values_enum.dart';
export 'src/alippo_custom_form_components/fields/alippo_selection_card_group/alippo_custom_radio_group.dart';
export 'src/alippo_custom_form_components/fields/alippo_selection_card_group/alippo_custom_checkbox_group.dart';
export 'src/alippo_custom_form_components/fields/alippo_selection_card_group/comp/selection_card_options.dart';
export 'src/alippo_custom_form_components/check_box/check_box_group.dart';
133 changes: 133 additions & 0 deletions lib/src/alippo_custom_form_components/check_box/check_box_group.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

class CustomCheckBoxGroup<T> extends FormBuilderFieldDecoration<List<T>> {
final List<FormBuilderFieldOption<T>> options;

final BorderRadius selectedBorderRadius;
final Color selectedColor;

CustomCheckBoxGroup({
super.key,
required super.name,
required this.options,
required this.selectedBorderRadius,
required super.onChanged,
required this.selectedColor,
}) : super(
builder: (FormFieldState<List<T>?> field) {
final state = field as _CustomCheckBoxGroupState<T>;
return InputDecorator(
decoration: state.decoration,
child: SingleChildScrollView(
child: _CustomGroupedCheckBox<T>(
options: options,
selectedBorderRadius: selectedBorderRadius,
selectedColor: selectedColor,
value: field.value ?? [],
onChanged: (val) {
field.didChange(val);
},
),
),
);
},
);

@override
FormBuilderFieldDecorationState<CustomCheckBoxGroup<T>, List<T>>
createState() => _CustomCheckBoxGroupState<T>();
}

class _CustomCheckBoxGroupState<T>
extends FormBuilderFieldDecorationState<CustomCheckBoxGroup<T>, List<T>> {}

class _CustomGroupedCheckBox<T> extends StatelessWidget {
/// The list of items the user can select
final List<FormBuilderFieldOption<T>> options;
final List<T> value;
final ValueChanged<List<T>> onChanged;

final BorderRadius selectedBorderRadius;
final Color selectedColor;

final Axis direction;
final double spacing;
final bool expanded;

/// Creates a list of `Chip`s that acts like radio buttons
const _CustomGroupedCheckBox({
super.key,
required this.options,
required this.value,
required this.onChanged,
this.direction = Axis.horizontal,
this.spacing = 0.0,
this.expanded = false,
required this.selectedBorderRadius,
required this.selectedColor,
});

@override
Widget build(BuildContext context) {
return Wrap(
spacing: spacing, // Horizontal spacing between the children
runSpacing: spacing, // Vertical spacing between the lines
children: options.map((FormBuilderFieldOption<T> option) {
return Builder(builder: (context) {
return SelectOptionsWrapper(
isSelected: value.contains(option.value),
selectedBorderRadius: selectedBorderRadius,
selectedColor: selectedColor,
child: InkWell(
onTap: () {
List<T> selectedListItems = List.of(value);
selectedListItems.contains(option.value)
? selectedListItems.remove(option.value)
: selectedListItems.add(option.value);
onChanged(selectedListItems);
},
child: option,
),
);
});
}).toList(),
);
}
}

class SelectOptionsWrapper extends StatefulWidget {
final bool isSelected;
final Widget child;
final BorderRadius selectedBorderRadius;
final Color selectedColor;

const SelectOptionsWrapper({
super.key,
required this.isSelected,
required this.child,
this.selectedBorderRadius = const BorderRadius.all(Radius.circular(4)),
this.selectedColor = Colors.red,
});

@override
State<SelectOptionsWrapper> createState() => _SelectOptionsWrapperState();
}

class _SelectOptionsWrapperState extends State<SelectOptionsWrapper> {
@override
Widget build(BuildContext context) {
return Container(
margin: widget.isSelected ? EdgeInsets.zero : const EdgeInsets.all(4),
padding: !widget.isSelected ? EdgeInsets.zero : const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: widget.isSelected ? widget.selectedColor : Colors.transparent,
width: 2.0,
),
borderRadius: widget.selectedBorderRadius,
),
child: widget.child,
);
}
}
2 changes: 1 addition & 1 deletion ...stom_form_components/fields/alippo_selection_card_group/alippo_custom_checkbox_group.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ class _AlippoCustomCheckBoxGroupState<T>
List<T>> {}

class CustomGroupedCheckBox<T> extends StatelessWidget {
/// The list of items the user can select.
/// The list of items the user can select
final List<SelectionCardOption<T>> options;

/// A list of string which specifies automatically checked checkboxes.
Expand Down
1 change: 1 addition & 0 deletions ...alippo_custom_form_components/fields/alippo_selection_card_group/comp/selection_card.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ class _SelectionCardState extends State<SelectionCard>
return AnimatedBuilder(
animation: _animation!,
builder: (_, __) {
// Keeping the following point as is
return Stack(
children: [
if (widget.infoModalConfig != null)
Expand Down
Loading