Tile

Tiles can be grouped together inside a FTileGroup.

1@override
2Widget build(BuildContext _) => FTile(
3  prefix: const Icon(FLucideIcons.user),
4  title: const Text('Personalization'),
5  suffix: const Icon(FLucideIcons.chevronRight),
6  onPress: () {},
7);
8

CLI

To generate a specific style for customization:

dart run forui style create tiles

dart run forui style create tile

dart run forui style create tile-content

Usage

`FTile(...)`

1FTile(
2  style: const .delta(padding: .value(.zero)),
3  enabled: true,
4  selected: false,
5  onPress: () {},
6  title: const Text('Title'),
7  subtitle: const Text('Subtitle'),
8  details: const Text('Details'),
9  prefix: const Icon(FLucideIcons.house),
10  suffix: const Icon(FLucideIcons.chevronRight),
11)

`FTile.raw(...)`

1FTile.raw(
2  style: const .delta(padding: .value(.zero)),
3  enabled: true,
4  selected: false,
5  onPress: () {},
6  prefix: const Icon(FLucideIcons.house),
7  child: const Text('Custom Content'),
8)

Examples

Destructive

1@override
2Widget build(BuildContext _) => FTile(
3  variant: .destructive,
4  prefix: const Icon(FLucideIcons.trash),
5  title: const Text('Delete Account'),
6  suffix: const Icon(FLucideIcons.chevronRight),
7  onPress: () {},
8);
9

Untappable

1@override
2Widget build(BuildContext _) => FTile(
3  prefix: const Icon(FLucideIcons.user),
4  title: const Text('Personalization'),
5  suffix: const Icon(FLucideIcons.chevronRight),
6);
7

Disabled

1@override
2Widget build(BuildContext _) => FTile(
3  prefix: const Icon(FLucideIcons.user),
4  title: const Text('Personalization'),
5  suffix: const Icon(FLucideIcons.chevronRight),
6  onPress: () {},
7  enabled: false,
8);
9

With Subtitle

1@override
2Widget build(BuildContext _) => FTile(
3  prefix: const Icon(FLucideIcons.bell),
4  title: const Text('Notifications'),
5  subtitle: const Text('Banners, Sounds, Badges'),
6  suffix: const Icon(FLucideIcons.chevronRight),
7  onPress: () {},
8);
9

With Details

1@override
2Widget build(BuildContext _) => FTile(
3  prefix: const Icon(FLucideIcons.wifi),
4  title: const Text('WiFi'),
5  details: const Text('Duobase (5G)'),
6  suffix: const Icon(FLucideIcons.chevronRight),
7  onPress: () {},
8);
9

On this page