Cupertino widget and Attributes

Cupertino widget and Attributes

ยท

2 min read

Cupertino widgets in Flutter are specifically designed to mimic the visual design language of iOS. These widgets provide a native and consistent look and feel for iOS applications, allowing developers to create seamless cross-platform experiences.

Key Cupertino Widgets and Attributes:

  1. CupertinoButton:

    • A button designed for Cupertino-style interfaces.

    • Attributes: child, onPressed, padding, color, and more.

  2. CupertinoTextField:

    • A text field styled for Cupertino interfaces.

    • Attributes: controller, placeholder, prefix, suffix, and more.

  3. CupertinoNavigationBar:

    • Represents the top navigation bar in Cupertino style.

    • Attributes: middle, leading, trailing, backgroundColor, and more.

  4. CupertinoActivityIndicator:

    • An iOS-style activity indicator (spinner).

    • Attributes: animating, radius, and valueColor.

Example Usage:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Widgets Example'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              child: Text('Press me'),
              onPressed: () {
                // Button press logic
              },
              color: CupertinoColors.activeBlue,
            ),
            SizedBox(height: 20),
            CupertinoTextField(
              placeholder: 'Enter text',
              onChanged: (value) {
                // Text field change logic
              },
              padding: EdgeInsets.all(12.0),
            ),
            SizedBox(height: 20),
            CupertinoActivityIndicator(
              animating: true,
              radius: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

In this example, we create a Flutter app using Cupertino widgets. The CupertinoPageScaffold sets up a basic Cupertino-style page structure, and we use various Cupertino widgets like CupertinoButton, CupertinoTextField, and CupertinoActivityIndicator to showcase the iOS-style UI elements. The CupertinoNavigationBar provides a native-looking top navigation bar. This demonstrates how Cupertino widgets enable developers to design applications with a consistent and familiar appearance on iOS devices.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย