Flutter AlertDialog

| Page Views: 2756

Flutter AlertDialog Tutorial and example.

An alert dialog informs the user about situations that require acknowledgement.

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.

Flutter Simple AlertDialog Example

Let's look at a simple flutter alertdialog example with title and descriptions.

In this example first we render a flat button that when the user presses or clicks, we open an alert dialog

Flutter Android AlertDialo

Here's the app in landscape mode:

Flutter Android AlertDialog Landscape

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.

name: mr_alert_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
(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 Packages in Flutter/Dart But first we need to import some packages and we do that using the import keyword in dart.

import 'package:flutter/material.dart';

Here are the packages we are importing:

  1. material.dart : will give us material design widgets and theme.

2. How to 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.

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.

The second class will derive from StatefulWidget and override the createState() method.

Here's the full source code:

import 'package:flutter/material.dart';

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

class Home extends StatelessWidget {
  /**
  Comstruct our widget and return it.
   */
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              // return object of type AlertDialog
              return AlertDialog(
                title: new Text("AlertDialog Class"),
                content: new Text("Creates an alert dialog.Typically used in conjunction with showDialog."+
                "The contentPadding must not be null. The titlePadding defaults to null, which implies a default."),
                actions: <Widget>[
                  // usually buttons at the bottom of the dialog
                  new FlatButton(
                    child: new Text("Close"),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
        child: Text('Show AlertDialog'),
      ),
    );
  }
}

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

//end

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.

Flutter Confirmation Dialog

import 'package:flutter/material.dart';

void main(){ runApp(new MaterialApp(
  home: new MyApp(),
));
}

enum MyDialogueAction{
  yes,
  no,
  maybe
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  String _text = '';
  void _onChange(String value) {
    setState((){
      _text = value;
    });
  }

  void _dialogueResult(MyDialogueAction value){
    print('you selected $value');
    Navigator.pop(context);
  }

 void _showAlert(String value){
  showDialog(
    context: context,
    builder: (_) => new AlertDialog(
      title: new Text('Alert!'),
      content: new Text(value,
      style: new TextStyle(fontSize: 30.0),),
      actions: <Widget>[
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.yes);}, child: new Text('yes')),
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.no);}, child: new Text('no')),
      ],
    )
  );
}
  @override
  Widget build (BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Alert Demo'),
      ),body: new Container(
        child: new Column(
          children: <Widget>[
            new TextField(onChanged: (String value){ _onChange(value);},),
            new RaisedButton(
              onPressed: (){_showAlert(_text);},
              child: new Text('Press me'),
            )
          ],
        ),
      ),
    );
  } 
}

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.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post