This article guides you through creating an iOS-style form using CupertinoFormRow in Flutter. Cupertino widgets replicate the native iOS design, making your Flutter apps look polished on iOS devices. We’ll explore a step-by-step implementation of a form section with toggles and interactive options using CupertinoFormSection and CupertinoSwitch.
Key Widgets Used
CupertinoFormSection:
Groups related form rows with headers and separators.CupertinoFormRow:
Represents a single form row with a prefix (label) and child widget (control).CupertinoSwitch:
An iOS-style toggle switch.- Custom
PrefixWidget:
A reusable widget to create styled prefix icons and titles for form rows.
Code Breakdown
1. Main App Structure
void main() => runApp(const CupertinoFormRowApp());
class CupertinoFormRowApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: CupertinoFormRowExample(),
);
}
}
This initializes a simple CupertinoApp with a light theme and a home screen.
2. Creating the Form Section
class CupertinoFormRowExample extends StatefulWidget {
@override
State<CupertinoFormRowExample> createState() =>
_CupertinoFormRowExampleState();
}
class _CupertinoFormRowExampleState extends State<CupertinoFormRowExample> {
bool airplaneMode = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('CupertinoFormSection Sample'),
),
child: SafeArea(
child: CupertinoFormSection(
header: const Text('Connectivity'),
children: <Widget>[
CupertinoFormRow(
prefix: const PrefixWidget(
icon: CupertinoIcons.airplane,
title: 'Airplane Mode',
color: CupertinoColors.systemOrange,
),
child: CupertinoSwitch(
value: airplaneMode,
onChanged: (bool value) {
setState(() {
airplaneMode = value;
});
},
),
),
// More rows here
],
),
),
);
}
}
- The form has a navigation bar and a section labeled “Connectivity.”
CupertinoSwitchtoggles the airplane mode, and its state is updated usingsetState.
3. Custom Prefix Widget
class PrefixWidget extends StatelessWidget {
final IconData icon;
final String title;
final Color color;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(4.0),
),
child: Icon(icon, color: CupertinoColors.white),
),
const SizedBox(width: 15),
Text(title)
],
);
}
}
- This widget displays an icon with a colored background and title text.
- It’s used as a prefix for each row in the form.
Result
This example produces an elegant iOS-style form with different connectivity options like Airplane Mode, Wi-Fi, Bluetooth, and Mobile Data. Each row uses Cupertino widgets to maintain a consistent iOS look and feel.