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: 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: '[email protected]',
            ),
            const SizedBox(height: 16),
            FButton(
              onPress: () {},
              child: const Text('Save'),
            ),
          ],
        ),
      ),
    ],
  ),
];
 
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],
    child: contents[index],
    footer: FBottomNavigationBar(
      index: index,
      onChange: (index) => setState(() => this.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'),
        ),
      ],
    ),
  );
}

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: FScaffoldStyle(...),
  toasterStyle: FToasterStyle(...),
  header: FHeader(
    title: const Text('Settings'),
    suffixes: [
      FHeaderAction(
        icon: Icon(FIcons.ellipsis),
        onPress: () {},
      ),
    ],
  ),
  childPad: true,
  child: Column(
    children: [
      FCard(
        title: const Text('Notification'),
        subtitle: const Text('You have 3 unread messages.'),
        child: FButton(onPress: () {}, child: const Text('Read messages')),
      ),
    ],
  ),
  sidebar: FSidebar(children: const []),
  footer: FBottomNavigationBar(children: const []),
);