Skip to content

Commit

Permalink
Update checkbox samples
Browse files Browse the repository at this point in the history
  • Loading branch information
@kawaijoe
kawaijoe committed Sep 7, 2024
1 parent f2ced43 commit b594da2
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 65 deletions.
148 changes: 110 additions & 38 deletions docs/pages/docs/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,28 @@ For touch devices, a [switch](/docs/switch) is generally recommended over a chec
<Widget name='checkbox' query={{enabled: 'true'}}/>
</Tabs.Tab>
<Tabs.Tab>
```dart
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
onChange: (value) {}, // Do something.
);
```dart {12-20}
class Page extends StatefulWidget {
const Page();
@override
State<Page> createState() => PageState();
}
class PageState extends State<Page> {
bool state = false;
@override
Widget build(BuildContext context) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) {
setState(() => state = value);
},
);
}
```
</Tabs.Tab>
</Tabs>
Expand All @@ -36,11 +51,12 @@ For touch devices, a [switch](/docs/switch) is generally recommended over a chec
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
value: true,
onChanged: (value) {},
enabled: true,
initialValue: true,
autofocus: true,
onChanged: (value) {},
);
```

Expand All @@ -50,37 +66,66 @@ FCheckbox(

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='checkbox' query={{enabled: 'false'}}/>
<Widget name='checkbox' query={{initialValue: 'true', enabled: 'false'}}/>
</Tabs.Tab>
<Tabs.Tab>
```dart {6}
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
onChange: (value) {}, // Do something.
enabled: false,
);
```dart {20}
class Page extends StatefulWidget {
const Page();
@override
State<Page> createState() => PageState();
}
class PageState extends State<Page> {
bool state = true;
@override
Widget build(BuildContext context) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) {
setState(() => state = value);
},
enabled: false,
);
}
```
</Tabs.Tab>
</Tabs>

### Force Error
Force an error state without using the `validator` function.
### Error

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='checkbox' query={{ forceErrorText: 'Please accept the terms and conditions.' }}/>
<Widget name='checkbox' query={{ error: 'Please accept the terms and conditions.' }}/>
</Tabs.Tab>
<Tabs.Tab>
```dart {6}
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
onChange: (value) {}, // Do something.
forceErrorText: 'Please accept the terms and conditions.',
);
```dart {15}
class Page extends StatefulWidget {
const Page();
@override
State<Page> createState() => PageState();
}
class PageState extends State<Page> {
bool state = false;
@override
Widget build(BuildContext context) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) {
setState(() => state = value);
},
);
}
```
</Tabs.Tab>
</Tabs>
Expand All @@ -92,11 +137,25 @@ Force an error state without using the `validator` function.
<Widget name='checkbox' variant='raw' query={{ }}/>
</Tabs.Tab>
<Tabs.Tab>
```dart
FCheckbox(
onChange: (value) {}, // Do something.
enabled: enabled,
);
```dart {12-17}
class Page extends StatefulWidget {
const Page();
@override
State<Page> createState() => PageState();
}
class PageState extends State<Page> {
bool state = false;
@override
Widget build(BuildContext context) => FCheckbox(
value: state,
onChange: (value) {
setState(() => state = value);
},
);
}
```
</Tabs.Tab>
</Tabs>
Expand All @@ -108,7 +167,7 @@ Force an error state without using the `validator` function.
<Widget name='checkbox' variant='form' query={{}} height={550}/>
</Tabs.Tab>
<Tabs.Tab>
```dart {32-36}
```dart {32-47}
class RegisterForm extends StatefulWidget {
const RegisterForm({super.key});
Expand Down Expand Up @@ -140,10 +199,21 @@ Force an error state without using the `validator` function.
validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
),
const SizedBox(height: 15),
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
FormField(
initialValue: false,
onSaved: (value) {
// Save values somewhere.
},
validator: (value) => (value ?? false) ? null : 'Please accept the terms and conditions.',
builder: (state) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: state.errorText != null ? Text(state.errorText!) : null,
value: state.value ?? false,
onChange: (value) {
state.didChange(value);
},
),
),
const SizedBox(height: 20),
FButton(
Expand All @@ -153,6 +223,8 @@ Force an error state without using the `validator` function.
// Handle errors here.
return;
}
_formKey.currentState!.save();
// Do something.
},
),
Expand Down
5 changes: 5 additions & 0 deletions forui/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@

* Add `FTooltip`.

* Add `FSelectGroup`.

### Changes

* **Breaking:** Change `FAlertIconStyle.height` to `FAlertIconStyle.size`.
Expand Down Expand Up @@ -61,6 +63,9 @@ and`FStyle.errorFormFieldStyle`.

* Improve platform detection for web when initializing platform-specific variables.

* **Breaking:** `FCheckbox` and `FSwitch` no longer wraps `FormField` - consider wrapping them in a `FormField` if
required.

### Fixes

* Fix `FResizable` not rendering properly in an expanded widget when its crossAxisExtent is null.
Expand Down
99 changes: 84 additions & 15 deletions samples/lib/widgets/checkbox.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import 'package:forui_samples/sample_scaffold.dart';

@RoutePage()
class CheckboxPage extends SampleScaffold {
final bool initialValue;
final bool enabled;
final String? forceErrorText;
final String? error;

CheckboxPage({
@queryParam super.theme,
@queryParam this.initialValue = false,
@queryParam this.enabled = true,
@queryParam this.forceErrorText,
@queryParam this.error,
});

@override
Expand All @@ -22,19 +24,54 @@ class CheckboxPage extends SampleScaffold {
children: [
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 290),
child: FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
semanticLabel: 'Accept terms and conditions',
onChange: (value) {}, // Do something.
forceErrorText: forceErrorText,
child: _Checkbox(
initialValue: initialValue,
enabled: enabled,
error: error,
),
),
],
);
}

class _Checkbox extends StatefulWidget {
final bool initialValue;
final bool enabled;
final String? error;

const _Checkbox({
required this.initialValue,
required this.enabled,
this.error,
});

@override
State<_Checkbox> createState() => _CheckboxState();
}

class _CheckboxState extends State<_Checkbox> {
bool state = false;

@override
void initState() {
super.initState();
state = widget.initialValue;
}

@override
Widget build(BuildContext context) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: widget.error != null ? Text(widget.error!) : null,
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) {
setState(() => state = value);
},
enabled: widget.enabled,
);
}

@RoutePage()
class RawCheckboxPage extends SampleScaffold {
final bool enabled;
Expand All @@ -50,15 +87,34 @@ class RawCheckboxPage extends SampleScaffold {
children: [
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300),
child: FCheckbox(
onChange: (value) {}, // Do something.
enabled: enabled,
),
child: _RawCheckbox(enabled: enabled),
),
],
);
}

class _RawCheckbox extends StatefulWidget {
final bool enabled;

const _RawCheckbox({required this.enabled});

@override
State<_RawCheckbox> createState() => _RawCheckboxState();
}

class _RawCheckboxState extends State<_RawCheckbox> {
bool state = false;

@override
Widget build(BuildContext context) => FCheckbox(
value: state,
onChange: (value) {
setState(() => state = value);
},
enabled: widget.enabled,
);
}

@RoutePage()
class FormCheckboxPage extends SampleScaffold {
FormCheckboxPage({
Expand Down Expand Up @@ -103,10 +159,21 @@ class _RegisterFormState extends State<RegisterForm> {
validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
),
const SizedBox(height: 15),
FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
FormField(
initialValue: false,
onSaved: (value) {
// Save values somewhere.
},
validator: (value) => (value ?? false) ? null : 'Please accept the terms and conditions.',
builder: (state) => FCheckbox(
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: state.errorText != null ? Text(state.errorText!) : null,
value: state.value ?? false,
onChange: (value) {
state.didChange(value);
},
),
),
const SizedBox(height: 20),
FButton(
Expand All @@ -116,6 +183,8 @@ class _RegisterFormState extends State<RegisterForm> {
// Handle errors here.
return;
}

_formKey.currentState!.save();
// Do something.
},
),
Expand Down
Loading

0 comments on commit b594da2

Please sign in to comment.