Scaffold

Creates a visual scaffold for Forui widgets.

Preview

Code


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 scaffold

Usage

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: () {}),
      ),
    ],
  ),
);