Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
Instead of crafting all UIs with HTML/CSS, WebF provides pre-built native UI libraries that render as native Flutter widgets with full native performance. These components look and feel native on each platform while being controlled from your JavaScript code.
Native UI libraries are collections of UI components that:
Description: iOS-style components following Apple's Human Interface Guidelines
Platforms: iOS, macOS (optimized for iOS design)
Component Count: 30+ components
Available Components:
NPM Packages:
@openwebf/react-cupertino-ui@openwebf/vue-cupertino-uiFlutter Package: webf_cupertino_ui
Documentation: https://openwebf.com/en/ui-components/cupertino
If you have access to the Flutter project hosting your WebF app:
For Cupertino UI:
pubspec.yamldependencies:
webf_cupertino_ui: ^1.0.0
flutter pub getimport 'package:webf/webf.dart';
import 'package:webf_cupertino_ui/webf_cupertino_ui.dart';
void main() {
WebFControllerManager.instance.initialize(WebFControllerManagerConfig(
maxAliveInstances: 2,
maxAttachedInstances: 1,
));
// Install Cupertino UI components
installWebFCupertinoUI();
runApp(MyApp());
}
For React:
npm install @openwebf/react-cupertino-ui
For Vue:
npm install @openwebf/vue-cupertino-ui
React Example:
import { FlutterCupertinoButton, FlutterCupertinoTextField } from '@openwebf/react-cupertino-ui';
export function MyComponent() {
return (
<div>
<FlutterCupertinoTextField
placeholder="Enter your name"
onChanged={(value) => console.log('Value:', value)}
/>
<FlutterCupertinoButton
variant="filled"
onClick={() => console.log('Clicked')}
>
Submit
</FlutterCupertinoButton>
</div>
);
}
Vue Example:
<template>
<div>
<FlutterCupertinoTextField
placeholder="Enter your name"
@changed="handleChange"
/>
<FlutterCupertinoButton
variant="filled"
@click="handleClick"
>
Submit
</FlutterCupertinoButton>
</div>
</template>
<script setup>
import { FlutterCupertinoTextField, FlutterCupertinoButton } from '@openwebf/vue-cupertino-ui';
const handleChange = (value) => {
console.log('Value:', value);
};
const handleClick = () => {
console.log('Clicked');
};
</script>
See the Native UI Component Reference for a complete list of available components and their properties.
import {
FlutterCupertinoFormSection,
FlutterCupertinoFormRow,
FlutterCupertinoTextField,
FlutterCupertinoButton
} from '@openwebf/react-cupertino-ui';
export function ProfileForm() {
return (
<FlutterCupertinoFormSection header="Profile Information">
<FlutterCupertinoFormRow label="Name">
<FlutterCupertinoTextField placeholder="John Doe" />
</FlutterCupertinoFormRow>
<FlutterCupertinoFormRow label="Email">
<FlutterCupertinoTextField
placeholder="[email protected]"
keyboardType="email"
/>
</FlutterCupertinoFormRow>
<FlutterCupertinoButton variant="filled">
Save Changes
</FlutterCupertinoButton>
</FlutterCupertinoFormSection>
);
}
import {
FlutterCupertinoListSection,
FlutterCupertinoListTile,
FlutterCupertinoSwitch
} from '@openwebf/react-cupertino-ui';
export function SettingsScreen() {
return (
<FlutterCupertinoListSection header="Settings">
<FlutterCupertinoListTile
title="Notifications"
trailing={<FlutterCupertinoSwitch value={true} />}
/>
<FlutterCupertinoListTile
title="Dark Mode"
trailing={<FlutterCupertinoSwitch value={false} />}
/>
</FlutterCupertinoListSection>
);
}
import { FlutterCupertinoAlertDialog } from '@openwebf/react-cupertino-ui';
export function ConfirmationDialog({ onConfirm, onCancel }) {
return (
<FlutterCupertinoAlertDialog
title="Confirm Action"
content="Are you sure you want to proceed?"
actions={[
{ label: 'Cancel', onPress: onCancel },
{ label: 'Confirm', onPress: onConfirm, isDestructive: true }
]}
/>
);
}
You don't have to use native UI everywhere. Mix and match:
// Use native components for platform-specific UIs
<FlutterCupertinoButton variant="filled">
Save
</FlutterCupertinoButton>
// Use HTML/CSS for custom layouts
<div className="custom-layout">
<h1>Custom Design</h1>
<p>This uses regular HTML/CSS</p>
</div>
Native UI components handle complex interactions better:
FlutterCupertinoDatePicker instead of HTML inputFlutterCupertinoSlider for native feelFlutterCupertinoSegmentedControlAlways check the official documentation for component props and events:
All native UI packages include TypeScript definitions:
import type { FlutterCupertinoButtonProps } from '@openwebf/react-cupertino-ui';
const buttonProps: FlutterCupertinoButtonProps = {
variant: 'filled',
onClick: () => console.log('Clicked')
};
Cause: Flutter package not installed or initialized
Solution:
pubspec.yamlinstallWebFCupertinoUI() is called in main.dartflutter pub getCause: NPM package not installed correctly
Solution:
# Reinstall the package
npm install @openwebf/react-cupertino-ui --save
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
Cause: Vue bindings need to be generated
Solution: Follow the "For Vue + Cupertino UI" steps in Step 2 above to generate Vue bindings using webf codegen.
Cause: WebF automatically converts between JavaScript and Dart naming
Solution:
onClick, onChange, placeholderAfter setting up native UI: