Navigation
Tabs
A set of layered sections of content—known as tab entries—that are displayed one at a time.
FTabs(
children: [
FTabEntry(
label: const Text('Account'),
child: 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: () {}),
],
),
),
),
FTabEntry(
label: const Text('Password'),
child: FCard(
title: const Text('Password'),
subtitle: const Text('Change your password here. After saving, you will be logged out.'),
child: Column(
children: [
const FTextField(label: Text('Current password')),
const SizedBox(height: 10),
const FTextField(label: Text('New password')),
const SizedBox(height: 16),
FButton(child: const Text('Save'), onPress: () {}),
],
),
),
),
],
);CLI
To generate and customize this style:
dart run forui style create tabsUsage
FTabs(...)
FTabs(
style: (style) => style.copyWith(...),
initialIndex: 1,
onPress: (index) {},
children: const [
FTabEntry(label: Text('Account'), child: Placeholder()),
FTabEntry(label: Text('Password'), child: Placeholder()),
],
);