Scaffold

1class ScaffoldExample extends StatefulWidget {
2  @override
3  State<ScaffoldExample> createState() => _ScaffoldExampleState();
4}
5
6class _ScaffoldExampleState extends State<ScaffoldExample> {
7  final _headers = [
8    const FHeader(title: Text('Home')),
9    const FHeader(title: Text('Categories')),
10    const FHeader(title: Text('Search')),
11    FHeader(
12      title: const Text('Settings'),
13      suffixes: [
14        FHeaderAction(icon: const Icon(FLucideIcons.ellipsis), onPress: () {}),
15      ],
16    ),
17  ];
18
19  final _contents = [
20    const Column(
21      mainAxisAlignment: .center,
22      children: [Text('Home Placeholder')],
23    ),
24    const Column(
25      mainAxisAlignment: .center,
26      children: [Text('Categories Placeholder')],
27    ),
28    const Column(
29      mainAxisAlignment: .center,
30      children: [Text('Search Placeholder')],
31    ),
32    Column(
33      children: [
34        const SizedBox(height: 5),
35        FCard(
36          builder: (context, style, _) => Padding(
37            padding: style.padding,
38            child: Column(
39              mainAxisSize: .min,
40              crossAxisAlignment: .start,
41              children: [
42                Text('Account', style: style.titleTextStyle),
43                const SizedBox(height: 2),
44                Text(
45                  'Make changes to your account here. Click save when you are done.',
46                  style: style.subtitleTextStyle,
47                ),
48                const SizedBox(height: 6),
49                const FTextField(label: Text('Name'), hint: 'John Renalo'),
50                const SizedBox(height: 10),
51                const FTextField(label: Text('Email'), hint: 'john@doe.com'),
52                const SizedBox(height: 16),
53                FButton(child: const Text('Save'), onPress: () {}),
54              ],
55            ),
56          ),
57        ),
58      ],
59    ),
60  ];
61
62  int _index = 3;
63
64  @override
65  Widget build(BuildContext _) => SizedBox(
66    height: 500,
67    child: FScaffold(
68      header: _headers[_index],
69      footer: FBottomNavigationBar(
70        index: _index,
71        onChange: (index) => setState(() => _index = index),
72        children: const [
73          FBottomNavigationBarItem(
74            icon: Icon(FLucideIcons.house),
75            label: Text('Home'),
76          ),
77          FBottomNavigationBarItem(
78            icon: Icon(FLucideIcons.layoutGrid),
79            label: Text('Categories'),
80          ),
81          FBottomNavigationBarItem(
82            icon: Icon(FLucideIcons.search),
83            label: Text('Search'),
84          ),
85          FBottomNavigationBarItem(
86            icon: Icon(FLucideIcons.settings),
87            label: Text('Settings'),
88          ),
89        ],
90      ),
91      child: _contents[_index],
92    ),
93  );
94}
95

CLI

To generate a specific style for customization:

dart run forui style create scaffold

Usage

A scaffold may include a sidebar. A working example can be found here.

`FScaffold(...)`

1FScaffold(
2  scaffoldStyle: .delta(childPadding: .value(.zero)),
3  childPad: true,
4  resizeToAvoidBottomInset: true,
5  header: Text('Header'),
6  sidebar: Text('Sidebar'),
7  footer: Text('Footer'),
8  child: Text('Content'),
9)

CLI

Usage

FScaffold(...)

On this page

`FScaffold(...)`