Select Tile Group
A group of tiles that allow users to make a selection from a set of options.
For desktop, a select group is generally recommended over this.
enum Sidebar { recents, home, applications }
FSelectTileGroup<Sidebar>(
controller: FMultiSelectGroupController(values: {Sidebar.recents}),
label: const Text('Sidebar'),
description: const Text('These will be shown in the sidebar.'),
children: [
FSelectTile(
title: const Text('Recents'),
suffixIcon: FIcon(FAssets.icons.timer),
value: Sidebar.recents,
),
FSelectTile(
title: const Text('Home'),
suffixIcon: FIcon(FAssets.icons.house),
value: Sidebar.home,
),
FSelectTile(
title: const Text('Applications'),
suffixIcon: FIcon(FAssets.icons.appWindowMac),
value: Sidebar.applications,
),
],
);Usage
FSelectTileGroup(...)
FSelectTileGroup<Value>(
controller: FMultiSelectGroupController(), // or FRadioSelectGroupController()
label: const Text('Sidebar'),
description: const Text('Select the items you want to display in the sidebar.'),
divider: FTileDivider.indented,
items: [
FSelectTile(
label: const Text('1'),
value: 1,
),
],
);Examples
Behavior
Multi-value Form
enum Language { dart, java, rust, python }
class MultiValueForm extends StatefulWidget {
const MultiValueForm();
@override
State<MultiValueForm> createState() => MultiValueFormState();
}
class MultiValueFormState extends State<MultiValueForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FMultiSelectGroupController<Language> controller = FMultiSelectGroupController();
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectTileGroup(
controller: controller,
label: const Text('Favorite Languages'),
description: const Text('Your favorite language.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select at least one language.' : null,
children: [
FSelectTile(
title: const Text('Dart'),
value: Language.dart,
),
FSelectTile(
title: const Text('Java'),
value: Language.java,
),
FSelectTile(
title: const Text('Rust'),
value: Language.rust,
),
FSelectTile(
title: const Text('Python'),
value: Language.python,
),
],
),
],
),
);
@override
void dispose() {
controller.dispose();
super.dispose();
}
}Radio Form
enum Notification { all, direct, nothing }
class RadioForm extends StatefulWidget {
const RadioForm();
@override
State<RadioForm> createState() => RadioFormState();
}
class RadioFormState extends State<RadioForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FRadioSelectGroupController<Notification> controller = FRadioSelectGroupController();
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectTileGroup(
controller: controller,
label: const Text('Notifications'),
description: const Text('Select the notifications.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select a value.' : null,
children: [
FSelectTile(
title: const Text('All new messages'),
value: Notification.all,
),
FSelectTile(
title: const Text('Direct messages and mentions'),
value: Notification.direct,
),
FSelectTile(
title: const Text('Nothing'),
value: Notification.nothing,
),
],
),
const SizedBox(height: 20),
FButton(
label: const Text('Save'),
onPress: () {
if (!_formKey.currentState!.validate()) {
// Handle errors here.
return;
}
_formKey.currentState!.save();
// Do something.
},
),
],
),
);
@override
void dispose() {
controller.dispose();
super.dispose();
}
}Appearance
Suffix Icon
FSelectTileGroup(
controller: FRadioSelectGroupController(),
label: const Text('Settings'),
children: [
FSelectTile.suffix(
prefixIcon: FIcon(FAssets.icons.list),
title: const Text('List View'),
value: 'List',
),
FSelectTile.suffix(
prefixIcon: FIcon(FAssets.icons.layoutGrid),
title: const Text('Grid View'),
value: 'Grid',
),
],
);Full Divider
enum Sidebar { recents, home, applications }
FSelectTileGroup<Sidebar>(
controller: FMultiSelectGroupController(values: {Sidebar.recents}),
divider: FTileDivider.full,
label: const Text('Sidebar'),
description: const Text('These will be shown in the sidebar.'),
children: [
FSelectTile(
title: const Text('Recents'),
suffixIcon: FIcon(FAssets.icons.timer),
value: Sidebar.recents,
),
FSelectTile(
title: const Text('Home'),
suffixIcon: FIcon(FAssets.icons.house),
value: Sidebar.home,
),
FSelectTile(
title: const Text('Applications'),
suffixIcon: FIcon(FAssets.icons.appWindowMac),
value: Sidebar.applications,
),
],
);No Divider
enum Sidebar { recents, home, applications }
FSelectTileGroup<Sidebar>(
controller: FMultiSelectGroupController(values: {Sidebar.recents}),
label: const Text('Sidebar'),
description: const Text('These will be shown in the sidebar.'),
children: [
FSelectTile(
title: const Text('Recents'),
suffixIcon: FIcon(FAssets.icons.timer),
value: Sidebar.recents,
),
FSelectTile(
title: const Text('Home'),
suffixIcon: FIcon(FAssets.icons.house),
value: Sidebar.home,
),
FSelectTile(
title: const Text('Applications'),
suffixIcon: FIcon(FAssets.icons.appWindowMac),
value: Sidebar.applications,
),
],
);