Scaffold

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'),
        ),
      ],
    ),
  );
}