Layout
final headers = [
const FHeader(title: Text('Home')),
const FHeader(title: Text('Categories')),
const FHeader(title: Text('Search')),
FHeader(
title: const Text('Settings'),
suffixes: [FHeaderAction(icon: const Icon(FIcons.ellipsis), onPress: () {})],
),
];
final contents = [
const Column(mainAxisAlignment: MainAxisAlignment.center, children: [Text('Home Placeholder')]),
const Column(mainAxisAlignment: MainAxisAlignment.center, children: [Text('Categories Placeholder')]),
const Column(mainAxisAlignment: MainAxisAlignment.center, children: [Text('Search Placeholder')]),
Column(
children: [
const SizedBox(height: 5),
FCard(
title: const Text('Account'),
subtitle: const Text('Make changes to your account here. Click save when you are done.'),
child: Column(
children: [
const FTextField(label: Text('Name'), hint: 'John Renalo'),
const SizedBox(height: 10),
const FTextField(label: Text('Email'), hint: 'john@doe.com'),
const SizedBox(height: 16),
FButton(child: const Text('Save'), onPress: () {}),
],
),
),
],
),
];
class Application extends StatefulWidget {
const Application({super.key});
@override
State<Application> createState() => _ApplicationState();
}
class _ApplicationState extends State<Application> {
int _index = 3;
@override
Widget build(BuildContext context) => FScaffold(
header: headers[_index],
footer: FBottomNavigationBar(
index: _index,
onChange: (index) => setState(() => _index = index),
children: const [
FBottomNavigationBarItem(icon: Icon(FIcons.house), label: Text('Home')),
FBottomNavigationBarItem(icon: Icon(FIcons.layoutGrid), label: Text('Categories')),
FBottomNavigationBarItem(icon: Icon(FIcons.search), label: Text('Search')),
FBottomNavigationBarItem(icon: Icon(FIcons.settings), label: Text('Settings')),
],
),
child: contents[_index],
);
}CLI
To generate and customize this style:
dart run forui style create scaffoldUsage
A scaffold may include a sidebar. A working example can be found here.
FScaffold(...)
FScaffold(
scaffoldStyle: (style) => style.copyWith(...),
header: FHeader(
title: const Text('Settings'),
suffixes: [FHeaderAction(icon: Icon(FIcons.ellipsis), onPress: () {})],
),
sidebar: FSidebar(children: const []),
footer: FBottomNavigationBar(children: const []),
childPad: true,
resizeToAvoidBottomInset: true,
child: Column(
children: [
FCard(
title: const Text('Notification'),
subtitle: const Text('You have 3 unread messages.'),
child: FButton(child: const Text('Read messages'), onPress: () {}),
),
],
),
);