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(FIcons.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          title: const Text('Account'),
37          subtitle: const Text(
38            'Make changes to your account here. Click save when you are done.',
39          ),
40          child: Column(
41            children: [
42              const FTextField(label: Text('Name'), hint: 'John Renalo'),
43              const SizedBox(height: 10),
44              const FTextField(label: Text('Email'), hint: 'john@doe.com'),
45              const SizedBox(height: 16),
46              FButton(child: const Text('Save'), onPress: () {}),
47            ],
48          ),
49        ),
50      ],
51    ),
52  ];
53
54  int _index = 3;
55
56  @override
57  Widget build(BuildContext _) => SizedBox(
58    height: 500,
59    child: FScaffold(
60      header: _headers[_index],
61      footer: FBottomNavigationBar(
62        index: _index,
63        onChange: (index) => setState(() => _index = index),
64        children: const [
65          FBottomNavigationBarItem(
66            icon: Icon(FIcons.house),
67            label: Text('Home'),
68          ),
69          FBottomNavigationBarItem(
70            icon: Icon(FIcons.layoutGrid),
71            label: Text('Categories'),
72          ),
73          FBottomNavigationBarItem(
74            icon: Icon(FIcons.search),
75            label: Text('Search'),
76          ),
77          FBottomNavigationBarItem(
78            icon: Icon(FIcons.settings),
79            label: Text('Settings'),
80          ),
81        ],
82      ),
83      child: _contents[_index],
84    ),
85  );
86}
87

CLI

To generate and customize this style:

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: .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(...)`