Skip to main content

Command Palette

Search for a command to run...

Cupertino widget and Attributes

Published
2 min read
Cupertino widget and Attributes
V

"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation.

In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology.

Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities.

In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"

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.

More from this blog

Vinit Mepani (Flutter Developer)

270 posts

"Vinit Mepani, passionate coder! Dive into my Dart and Flutter journey on the blog. Let's master these tech wonders together. Happy coding! 🚀"