Flutter Cupertino (iOS-style) Widgets

10. Flutter Cupertino (iOS-style) Widgets

Flutter offers Cupertino widgets that allow you to create user interfaces with an iOS-style look and feel. In this tutorial, we will explore the Cupertino widget set and demonstrate how to use these widgets to design an app with an iOS-like interface.

1. Understanding Cupertino Widgets

Cupertino widgets are designed to mimic the visual style and behavior of iOS. They provide a seamless experience for iOS users when using a Flutter app. Some commonly used Cupertino widgets include:

• CupertinoApp: This widget represents the root of your app and provides an iOS-themed scaffold.
  
  
• CupertinoNavigationBar: It's the iOS equivalent of an AppBar. It includes an optional back button, title, and trailing widgets.
  
  
• CupertinoPageScaffold: This widget creates a page-level scaffold with a navigation bar at the top and content in the body.
  
  
• CupertinoButton: A button styled like an iOS button, with the option for a filled or outlined appearance.
  
  
• CupertinoTextField: An iOS-style text input field.
  
  
• CupertinoPicker: A wheel picker commonly used for selecting dates or other options.
  
  
• CupertinoAlertDialog: An iOS-style alert dialog.
  
  
• CupertinoActionSheet: An iOS-style action sheet that slides up from the bottom.

2. Creating a Flutter Cupertino App

Let's create a simple Flutter app with Cupertino widgets to demonstrate their usage.

Step 1: Create a Flutter Project

flutter create cupertino_example

Step 2: Update'pubspec.yaml'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^latest_version

Then, run 'flutter pub get' to fetch the dependencies.

Step 3: Design a Cupertino UI

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(CupertinoApp(
    title: 'Cupertino Example',
    home: CupertinoExample(),
  ));
}

class CupertinoExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino App'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              onPressed: () {
                // Add button action here
              },
              child: Text('Cupertino Button'),
            ),
            CupertinoTextField(
              placeholder: 'Enter text',
            ),
          ],
        ),
      ),
    );
  }
}

In this code, we've created a 'CupertinoPageScaffold' with a 'CupertinoNavigationBar', a 'CupertinoButton', and a 'CupertinoTextField'. These widgets emulate the iOS visual style.

Step 4: Run the App

Run your app using 'flutter run'. You should see a basic Cupertino-style app with a navigation bar, a button, and a text input field.

3. Cupertino Icons

CupertinoNavigationBar(
  middle: Text('Cupertino Icons Example'),
),
CupertinoButton(
  onPressed: () {
    // Button action
  },
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(CupertinoIcons.heart),
      SizedBox(width: 8),
      Text('Like'),
    ],
  ),
),