Introduction
After iOS SDK updates or Flutter framework upgrades, certain Cupertino widgets become deprecated as Apple changes their design guidelines and Flutter aligns with new patterns. CupertinoScaffold (from the cupertino_icons or community packages) and similar deprecated widgets cause build warnings or runtime issues. Understanding the replacement pattern ensures your app maintains a native iOS feel while staying compatible with the latest Flutter and iOS versions.
Symptoms
- Build warnings:
`- 'CupertinoScaffold' is deprecated and shouldn't be used.
- Use CupertinoPageScaffold instead.
`- Or:
`- Warning: CupertinoNavigationBar transition behavior changed in iOS 17.
`- Navigation transitions look incorrect after iOS update
- Tab bar behaves differently on iOS 17+
- Console:
`- flutter: The behavior of CupertinoPageRoute changed in Flutter 3.16
`
Common Causes
- Using community
cupertino_scaffoldpackage that is no longer maintained - Flutter framework updating Cupertino widgets to match new iOS design
- iOS 17+ changes to navigation bar translucency
CupertinoTabScaffoldAPI changes in newer Flutter versions- Breaking changes in
cupertino_iconspackage
Step-by-Step Fix
- 1.Replace deprecated CupertinoScaffold with CupertinoPageScaffold:
- 2.```dart
- 3.// BEFORE (deprecated)
- 4.CupertinoScaffold(
- 5.body: CustomScrollView(
- 6.slivers: [
- 7.CupertinoSliverNavigationBar(
- 8.largeTitle: const Text('Home'),
- 9.),
- 10.SliverList(
- 11.delegate: SliverChildBuilderDelegate(
- 12.(context, index) => ListTile(title: Text('Item $index')),
- 13.),
- 14.),
- 15.],
- 16.),
- 17.)
// AFTER (current) CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: const Text('Home'), // iOS 17+ automatically handles translucency ), child: ListView.builder( itemCount: 20, itemBuilder: (context, index) => CupertinoListTile( title: Text('Item $index'), ), ), ) ```
- 1.Update CupertinoTabScaffold usage:
- 2.```dart
- 3.// AFTER - correct modern usage
- 4.CupertinoTabScaffold(
- 5.tabBar: CupertinoTabBar(
- 6.items: const [
- 7.BottomNavigationBarItem(
- 8.icon: Icon(CupertinoIcons.home),
- 9.label: 'Home',
- 10.),
- 11.BottomNavigationBarItem(
- 12.icon: Icon(CupertinoIcons.settings),
- 13.label: 'Settings',
- 14.),
- 15.],
- 16.),
- 17.tabBuilder: (context, index) {
- 18.return CupertinoTabView(
- 19.builder: (context) {
- 20.return CupertinoPageScaffold(
- 21.child: Center(child: Text('Tab $index')),
- 22.);
- 23.},
- 24.);
- 25.},
- 26.);
- 27.
` - 28.Update cupertino_icons package:
- 29.```yaml
- 30.# pubspec.yaml
- 31.dependencies:
- 32.cupertino_icons: ^1.0.8 # Latest version with all iOS 17+ icons
- 33.
` - 34.Handle iOS 17+ navigation bar changes:
- 35.```dart
- 36.CupertinoNavigationBar(
- 37.backgroundColor: CupertinoTheme.of(context)
- 38..barBackgroundColor
- 39..withOpacity(0.8),
- 40.// New in Flutter 3.16+ - automatically adapts to iOS version
- 41.transitionBetweenRoutes: true,
- 42.heroTag: 'home-nav-bar',
- 43.)
- 44.
` - 45.If using community cupertino_scaffold package, remove it:
- 46.```bash
- 47.# Remove the deprecated package
- 48.flutter pub remove cupertino_scaffold
# Use built-in Cupertino widgets instead flutter pub add cupertino_icons ```
- 1.Test on physical iOS device:
- 2.```bash
- 3.flutter run -d <device-id>
- 4.# Verify navigation transitions match native iOS behavior
- 5.# Test pull-to-dismiss, swipe-to-go-back, etc.
- 6.
`
Prevention
- Follow Flutter release notes for Cupertino widget changes
- Test on physical iOS devices after Flutter upgrades
- Avoid community Cupertino packages that duplicate built-in widgets
- Use
flutter build ios --analyze-sizeto verify no deprecated code - Monitor deprecation warnings in
flutter analyzeoutput - Check Flutter GitHub for migration guides when major versions change