DEV Community: InstaCodeBlog

Custom Dialog with Flutter – Step by Step Guide

InstaCodeBlog — Sun, 03 Jan 2021 14:43:55 +0000

Flutter framework provides an incredibly easy way to make UI components. But you have to through a lot of experimental processes to get the design or layout of your choice. In this tutorial, we will break down and see step by step to the process for Custom Dialog Creation with Flutter.

In the mobile apps, we use Dialog everywhere from alerting some situation to the user to get some feedback from the user.

Recently I was working on developing a quiz app as mentioned in the article “AppLifeCycleState Management Implementation In Flutter”. In this quiz app, I had to display prizes won by user and various other AlertDialog to the user. Using the default dialogs made the game look boring and I had to customize the dialog to make gameplay look fun.

Creating Simple Alert Dialog

We will start by looking into the code for implementing a usual Alert Dialog in Flutter. This will give an idea for us to customize it later. Also, we will see how plain it looks.

Adding simple Dialog to your screen in pretty easy in Flutter.

Before adding Dialog you must call showDialog function to change current screen state to show the intermediate Dialog popup.

In here we use AlertDialog widget to show simple Dialog with title and some text in the body.

showDialog(
        context: context,
    builder: (BuildContext context){
            return AlertDialog(
                title: Text("Alert Dialog"),
            content: Text("Dialog Content"),
        );
     }
)

In the content or title section of the AlertDialog, you can add widget of your choice. It is not only limited to text.

In the AlertDialog widget, there is a parameter called action. It accepts arrays of widgets and you can provide multiple buttons to that. Those Buttons will appear in the bottom right corner of the dialog.

Here is complete code on implementing AlertDialog.

showDialog(
        context: context,
    builder: (BuildContext context){
            return AlertDialog(
                title: Text("Alert Dialog"),
            content: Text("Dialog Content"),
                        actions:[
                    FlatButton(
                        child: Text("Close"),
                        onPressed: (){
                                Navigator.of(context).pop();
                    },
                ),
            ],
        );
     }
)

Creating Custom Dialog

Let us start creating our custom Dialog in flutter with a Dialog method.

Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Consts.padding),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );

Here we will have a Dialog with a Round rectangular borde r. If you look closely you can see we have created a method called dialogContent().

We are setting all the attributes of dialog and heading to dialogContent() which contains all our important widgets. We will use the Stack Method to design our custom Dialog.

You may note that in the Stack method the last element will move to the top.

dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        //...bottom card part,
        //...top circlular image part,
        Container(
          padding: EdgeInsets.only(
            top: 200,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
    // Implement Circular Image here
            ],
          ),
        ),
      ],
    );
  }

So we have designed our text portion of the dialog. Here we will use the Positioned widget as a child in Stack to wrap the CircularAvatar as suggested by the flutter dev team.

Next, you need to put the CircleAvatar to the top of dialog. You need to use CircleAvatar as the child of Position method.

Positioned(
    left: 16.0,
    right: 16.0,
    child: CircleAvatar(
        backgroundColor: Colors.amber,
        radius: 150,
        backgroundImage: NetworkImage(
            '<https://media.giphy.com/media/J5kPUb8fe5W95DDAIv/giphy.gif>',
          ),
    ),
),

Complete Code for Custom Dialog

So here is how your final code for the CustomDialog class will look. Also you can note here, that I have created a separate file to implement it. This would declutter my main code and would look clean.

import 'package:flutter/material.dart';

class CustomDialog extends StatelessWidget {
  final String title, description, buttonText;
  final Image image;

  CustomDialog({
    @required this.title,
    @required this.description,
    @required this.buttonText,
    this.image,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );
  }

  dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(
            top: 66.0 + 16.0 * 12,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          left: 16.0,
          right: 16.0,
          child: CircleAvatar(
            backgroundColor: Colors.amber,
            radius: 150,
            backgroundImage: NetworkImage(
              '<https://upload.wikimedia.org/wikipedia/commons/1/1d/Rotating_Konarka_chaka.gif>',
            ),
          ),
        ),
      ],
    );
  }
}

We are done with the design. So in our main.dart file I will be calling the above method.

Here is how my main.dart file looks.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dialog'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext context) => CustomDialog(
              title: "Well Done",
              description:
                  "You have sucessfully implemented Custom Dialog with flutter. \\n You have also learned theory behind and how to customize it further.",
              buttonText: "Close",
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

In main file we are using the floatingActionButton of default Flutter project code.

The result of above code is as shown below:

Custom Dialog Creation with Flutter

Conclusion

I hope you get a better idea about how to implement AlertDialog and How to convert that to a more customized version.

Have you found a better way to implement Custom Dialog? Did you face any issues? Let me know in the comments section.

You can check my other Flutter Tutorials Here.

The post Custom Dialog with Flutter – Step by Step Guide appeared first on InstaCodeBlog.

AppLifeCycleState Management Implementation in Flutter

InstaCodeBlog — Wed, 30 Dec 2020 08:17:50 +0000

As a mobile app developer, you will be required to use AppLifeCycleState at some point. With the usage of Flutter, I could not find many useful articles online regarding AppLifeCycleState management in Flutter. So I thought why not write an article about it.

Just before the thought came for me to write this article, I was developing an app called Jinda – Bhutan Quiz App. Which should have been published by the time you are reading this article. In my app, I had implement music in the app game-play. When I send the app to background the music was still playing, even when I lock my phone.

Here is the tutorial!!

AppLifeCycleState Management

Your mobile app can be in the various state during its usage. This state is known as the app life cycle state. We can trigger different method as per the state that your app is in.

These state notifications are sent by your device’s operating system. But you cannot expect always to receive notifications. In some rare circumstances, it does not receive these state notifications. For instance, if the user removed the battery from the device then you will not be receiving any notifications. I assume this will be the rare case as now most smartphones come with a non-removable battery.

According to official Flutter Documentation, there are FIVE different constants mentioned. Let us understand it one by one:

detached

In this state the application is still hosted on a flutter engine but is detached from any host views.

This means that the engine is running without a view. It can either be in the progress of attaching a view when the engine was first initialized, or after the view being destroyed due to a Navigator pop method.

inactive

The application is in an inactive state and is not receiving user input.

This state corresponds to an app or the Flutter host view running in the foreground inactive state. Apps transition to this state when in a phone call, responding to a TouchID request, when entering the app switcher or the control centre, or when the UIViewController hosting the Flutter app is transitioning for iOS devices. On Android, this corresponds to an app or the Flutter host view running in the foreground inactive state. Apps transition to this state when another activity is focused, such as a split-screen app, a phone call, a picture-in-picture app, a system dialogue, or another window. Apps in this state should assume that they may be paused at any time.

paused

During paused state the application is not currently visible to the user, not responding to user input, and running in the background.

resumed

The application is visible and responding to user input.

values

A constant List of the values in this enum, in order of their declaration.

Flutter WidgetsBindingObserver Class

WidgetsBindingObserver is the interface for classes that register with the Widgets layer binding.

This class can be extended directly, to get default behaviours for all of the handlers, or can be used with the implements keyword, in which case all the handlers must be implemented (and the analyzer will list those that have been omitted).

You will be using following two method from this class:

WidgetsBinding.addObserver

Registers the given object as a binding observer. Binding observers are notified when various application events occur, for example when the system locale changes. Generally, one widget in the widget tree registers itself as a binding observer and converts the system state into inherited widgets.

WidgetsBinding.removeObserver

Un-registers the given observer. This should be used sparingly as it is relatively expensive (O(N) in the number of registered observers).

Adding AppLifeCycleState to Flutter Code

Enough of theory lets see how we can implement it in our code.

First You need to extend your class with the WidgetsBindingObserver.

Secondly, you need to add the method addObserver to initState and also add removeObserver to dispose.

Finally, we will implement function didChangeAppLifecycleState and in this function, we will write our code to handle different state.

You can find the complete code for the Class as below.

class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  AppLifecycleState _notification;

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      if (state == AppLifecycleState.paused) {
        // Your Code goes here
      } else if (state == AppLifecycleState.inactive) {
        // Your Code goes here
      } else {
        // Your Code goes here
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Last notification: $_notification');
  }
}

That is all folks!

In this tutorial, we have learned AppLifeCycleState Management Implementation of Mobile App with Flutter. I have also explained the theory portion, so it would help you learn better.

With the final code, you will learn how to implement it in your Flutter code. To check my other tutorials regarding flutter click here.

If you faced any problem during implementation or know a better way, let me know in the comment section.

The post AppLifeCycleState Management Implementation in Flutter appeared first on InstaCodeBlog.