Flutter CupertinoDialog


CupertinoAlertDialog An iOS-style alert dialog.

Generally we utilize an alert dialog to tell the user about situations that need user attention or acknowledgement.

AlertDialogs can have the following:

  1. Title(Optional) - displayed above content
  2. Content(Optional) - displayed between content and list of actions.
  3. List of actions(Optional) - displayed below the content
  4. The title is displayed above the content and the actions are displayed below the content.

CupertinoAlertDialogs do style their titles and content (typically a message) to match the standard iOS title and message dialog text style.

However you can overridde these by explicitly defining TextStyles for Text widgets that are part of the title or content.

To display action buttons that look like standard iOS dialog buttons, provide CupertinoDialogActions for the actions given to this dialog.

CupertinoAlertDialog is typically passed as the child widget to showDialog, which displays the dialog.

We use Flutter as our SDK/Framework. So:

What is Flutter?

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time.

Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Here are the three main features of Flutter:

1. Fast Development

Flutter can paint your app to life in milliseconds through hot Reload.

You can alos employ a rich set of fully-customizable widgets to build native interfaces in minutes.

2. Expressive and Flexible UI

Flutter allows you to quickly ship features with a focus on native end-user experiences.

Layered architecture allows full customization, which results in incredibly fast rendering and expressive and flexible designs.

3. Native Performance

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and [Android](/android/introduction.

CupertinoAlertDialog API Definition

CupertinoAlertDialog derives from the StatelessWidget which further derives from the Widget class.

Here's the inheritance hierarchy:


Object
   ↳    Diagnosticable
       ↳    DiagnosticableTree
           ↳    Widget
               ↳    StatelessWidget
                   ↳   CupertinoAlertDialog

Here's its constructor:

CupertinoAlertDialog({Key key, Widget title, Widget content, List<Widget> actions: const [], ScrollController scrollController, ScrollController actionScrollController })

This will construct an iOS-style alert dialog.

CupertinoAlertDialog Properties

  1. title → Widget : The (optional) title of the dialog is displayed in a large font at the top of the dialog.
  2. content → Widget : The (optional) content of the dialog is displayed in the center of the dialog in a lighter font.
  3. actions → List : The (optional) set of actions that are displayed at the bottom of the dialog.
  4. scrollController → ScrollController : A scroll controller that can be used to control the scrolling of the content in the dialog.
  5. actionScrollController → ScrollController : A scroll controller that can be used to control the scrolling of the actions in the dialog.

Flutter Example

Flutter tutorial

Video tutorial(ProgrammingWizards TV Channel)

Well we have a video tutorial as an alternative to this. If you prefer tutorials like this one then it would be good you subscribe to our YouTube channel. Basically we have a TV for programming where do daily tutorials especially android.

Here are the files we explore:

  1. pubspec.yaml
  2. lib/main.dart

(a). pubspec.yaml

Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems. This allows you to quickly build your app without having to develop everything from scratch.

We will be adding packages under this file.

  1. Open the pubspec.yaml file located inside your app folder, and add dependencies under dependencies.
  2. If it is a third party then you have to install it. From the terminal: Run flutter packages get

OR

From Android Studio/IntelliJ: Click 'Packages Get' in the action ribbon at the top of pubspec.yaml From VS Code: Click 'Get Packages' located in right side of the action ribbon at the top of pubspec.yaml

flutter is always our sdk dependency as we use it to develop our ios and android apps.

Here's our pubspec.yaml file:

name: mr_cupertino_dialog
description: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg

(b). main.dart

This is where we write our flutter code in dart programming language. In Dart it is very common to write several classes in a single file. So this simple file will have three classes.

1. How to Import Packages in Flutter/Dart

We import packages into dart applicatiobs using the import keyword.

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

Here are the packages we are importing:

  1. material.dart : will give us material design widgets and theme.
  2. cupertino.dart : will provide us with the CupertionAlertDialog.

2. How to Create classes in Flutter/Dart

In Dart like in most C style programming languages you create a class using the class keyword. Classes are encapsulation mechanism in Object Oriented Programming languages, Dart included.

In this case we create three classes: 1.class MyApp extends StatelessWidget {..}

  1. class Home extends StatefulWidget {..}

Our first class is deriving from StatelessWidget and implementing the build() method. That method will build a MaterialApp widget with title, home and theme set and return it as a widget.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'CupertinoAlertDialog',
      home: Scaffold(
        appBar: AppBar(
          title: Text("CupertinoAlertDialog Example"),
        ),
        body: Home(),
      ),
      theme: new ThemeData(primaryColor: Colors.yellow),
    );
  }
}

class Home extends StatelessWidget {
  /**
  Comstruct our widget and return it.
   */
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          showDialog(
            context: context,
              // return object of type AlertDialog
            child:  new CupertinoAlertDialog(
                  title: new Column(
                    children: <Widget>[
                      new Text("CupertinoAlertDialog"),
                      new Icon(
                        Icons.favorite,
                        color: Colors.red,
                      ),
                    ],
                  ),
                  content: new Text( "An iOS-style alert dialog."+
                                      "An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title, optional content, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content."),
                  actions: <Widget>[
                    new FlatButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: new Text("OK"))
                  ],
                ));
        },
        child: Text('Show CupertinoAlertDialog'),
          )
    );
  }
}

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

(c) Running Flutter Applications

Just make sure you device or emulator is running and click the run button in android studio, it will automatically pick the device and install the app.

Aletrnative you can use the terminal or command prompt. Navigate/Cd over to project root page and type this:

flutter.bat build apk

This will build the APK which you can then drag and install onto your device. The build process in my machine takes around three minutes which is not bad.

Best Regards.

Oclemy.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post