Layout

Divider

Visually or semantically separates content.

1@override
2Widget build(BuildContext _) {
3 final colors = theme.colors;
4 final text = theme.typography;
5
6 return Column(
7 mainAxisAlignment: .center,
8 mainAxisSize: .min,
9 children: [
10 Text(
11 'Flutter Forui',
12 style: text.xl2.copyWith(color: colors.foreground, fontWeight: .w600),
13 ),
14 Text(
15 'An open-source widget library.',
16 style: text.sm.copyWith(color: colors.mutedForeground),
17 ),
18 const FDivider(),
19 SizedBox(
20 height: 30,
21 child: Row(
22 mainAxisAlignment: .center,
23 mainAxisSize: .min,
24 children: [
25 Text('Blog', style: text.sm.copyWith(color: colors.foreground)),
26 const FDivider(axis: .vertical),
27 Text('Docs', style: text.sm.copyWith(color: colors.foreground)),
28 const FDivider(axis: .vertical),
29 Text('Source', style: text.sm.copyWith(color: colors.foreground)),
30 ],
31 ),
32 ),
33 ],
34 );
35}
36

CLI

To generate and customize this style:

dart run forui style create dividers

Usage

FDivider(...)

1FDivider(
2 style: .delta(padding: .zero),
3 axis: .horizontal,
4)

On this page