Navigation
Tabs
A set of layered sections of content—known as tab entries—that are displayed one at a time.
1@override2Widget build(BuildContext _) => Column(3 mainAxisAlignment: .center,4 children: [5 Padding(6 padding: const .all(16),7 child: FTabs(8 children: [9 .entry(10 label: const Text('Account'),11 child: FCard(12 title: const Text('Account'),13 subtitle: const Text(14 'Make changes to your account here. Click save when you are done.',15 ),16 child: Column(17 children: [18 const FTextField(label: Text('Name'), hint: 'John Renalo'),19 const SizedBox(height: 10),20 const FTextField(label: Text('Email'), hint: 'john@doe.com'),21 const SizedBox(height: 16),22 FButton(child: const Text('Save'), onPress: () {}),23 ],24 ),25 ),26 ),27 .entry(28 label: const Text('Password'),29 child: FCard(30 title: const Text('Password'),31 subtitle: const Text(32 'Change your password here. After saving, you will be logged out.',33 ),34 child: Column(35 children: [36 const FTextField(label: Text('Current password')),37 const SizedBox(height: 10),38 const FTextField(label: Text('New password')),39 const SizedBox(height: 16),40 FButton(child: const Text('Save'), onPress: () {}),41 ],42 ),43 ),44 ),45 ],46 ),47 ),48 ],49);50CLI
To generate and customize this style:
dart run forui style create tabsUsage
FTabs(...)
1FTabs(2 style: const .delta(spacing: 10),3 mouseCursor: .defer,4 onPress: (index) {},5 children: const [6 FTabEntry(label: Text('Tab 1'), child: Text('Content 1')),7 FTabEntry(label: Text('Tab 2'), child: Text('Content 2')),8 ],9 expands: false,10)FTabEntry(...)
1FTabEntry(2 label: Text('Tab Label'),3 child: Text('Tab Content'),4)