Using GetX Dialogs in Flutter

original

https://medium.flutterdevs.com/dialog-using-getx-in-flutter-248601043311

refer to

https://pub.dev/packages/get

text

Learn how to use GetX to create a dialog in your Flutter app

Using GetX Dialogs in Flutter

is a fundamental part of a mobile application. They help deliver warnings and important information, as well as do specific activities. When a Flutter developer makes a dialog in Flutter, it makes a dialog with context and generators. However, it is not appropriate for developers to cultivate Dialogs with contexts and builders.

In this article, we'll explore using GetX's dialogs in Flutter. We'll also implement a demo and see how to create a dialog using your Flutter app's fetch package.

Get | Flutter Package

GetX is a super light and powerful solution for Flutter. It combines high-performance state management, intelligent..

https://pub.dev/packages/get

Introduction:

When we need to display any form-like content, we can create this dialog, which involves Flutter's GetX library. We can make dialogs using GetX's code base and make a dialog very simply. It doesn't take advantage of contexts and generators to create dialogs.

is an additional lightweight strong solution to the Flutter problem. It joins elite performance state management, intelligent dependency injection management, and routing management.

Demo module:

This demo video shows how to create a dialog in Flutter and shows how to use the get package in your Flutter app to work and use the different properties. It will show up on your device.

Constructor:

To use Get.defaultDialog(), call the following constructor:

Future<T?> defaultDialog<T>({
  String title = "Alert",
  EdgeInsetsGeometry? titlePadding,
  TextStyle? titleStyle,
  Widget? content,
  EdgeInsetsGeometry? contentPadding,
  VoidCallback? onConfirm,
  VoidCallback? onCancel,
  VoidCallback? onCustom,
  Color? cancelTextColor,
  Color? confirmTextColor,
  String? textConfirm,
  String? textCancel,
  String? textCustom,
  Widget? confirm,
  Widget? cancel,
  Widget? custom,
  Color? backgroundColor,
  bool barrierDismissible = true,
  Color? buttonColor,
  String middleText = "Dialog made in 3 lines of code",
  TextStyle? middleTextStyle,
  double radius = 20.0,
  List<Widget>? actions,
  WillPopCallback? onWillPop,
  GlobalKey<NavigatorState>? navigatorKey,
})

Properties:

There are some properties of Get.defaultDialog():

> title : This attribute is used for the title of the dialog. By default, the title is "Alert".
> titleStyle : This property is used to style the title text using TextStyle.
> content : Used in this property to give the content of the dialog, and should use Widget to give the content.
> middleText : This property is used for the middle text of the dialog. If we leverage content as well, the content widget data will be seeded.
> barrierDismissible : If we want to close the dialog by clicking outside the dialog, then the value of this property should be true else false. By default, its value is true.
> middleTextStyle : This property is used to style the middle text using TextStyle.
> radius : The radius of the dialog provided is used in this property. By default, its value is 20.
> backgroundColor : Use this property as the background color of the dialog.

Implementation:

Step 1: Add dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1

Step 2: Import

import 'package:get/get.dart';

Step 3: Run the flutter package in the root directory of the application.

How to implement the code in the dart file:

You need to implement it in your code separately:

Create a new dart file called main.dart in the lib folder.

We used GetMaterialApp instead of MaterialApp because we are building the application using the GetX library. If we don't take advantage of GetMaterialApp, then, at this point, its functionality won't work.

return GetMaterialApp(
  title: 'Dialog Demo',
  theme: ThemeData(
    primarySwatch: Colors._blue_,
  ),
  home: Splash(),
  debugShowCheckedModeBanner: false,
);

We will create a Home class in the main.dart file

In the body, we'll add a Center widget. In this widget, we will add a Column widget with the mainAxisAlignment in the center. We're going to add a few things, first, we'll add an image, and second, we'll add a facade button with child properties and style properties. In the onPressed function, we'll add Get.defaultDialog(). We'll describe it in depth below.

Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset("assets/logo.png", scale: 14,),
        SizedBox(height: 80,),
        ElevatedButton(
          child: Text('Show Dialog'),
          style: ElevatedButton._styleFrom_(
            primary: Colors._teal_,
            onPrimary: Colors._white_,
            shadowColor: Colors._tealAccent_,
            textStyle: TextStyle(
                fontSize: 18,
            ),
            elevation: 5,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            minimumSize: Size(120, 50),
          ),
          onPressed: () {
             Get.defaultDialog(); },
        ),
      ],
    )),

When we run the application, we should get the output of the screen like the screenshot below.

Home Screen

Now, we'll describe Get.defaultDialog() in depth:

Now you see how easy it is to use GetX in Flutter to get conversations with very few lines. You can also customize it with different options provided by GetX. We will add the title, middle text, background color, title style, middle text style and radius.

Get.defaultDialog(
  title: "Welcome to Flutter Dev'S",
  middleText: "FlutterDevs is a protruding flutter app development company with "
      "an extensive in-house team of 30+ seasoned professionals who know "
      "exactly what you need to strengthen your business across various dimensions",
  backgroundColor: Colors._teal_,
  titleStyle: TextStyle(color: Colors._white_),
  middleTextStyle: TextStyle(color: Colors._white_),
  radius: 30
);

When we run the application, we should get the output of the screen like the screenshot below.

Final Output Final output

Full code:

import 'package:flutter/material.dart';
import 'package:flutter_dialog_getx_demo/splash_screen.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors._blue_,
      ),
      home: Splash(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Dialog Using GetX In Flutter'),
        centerTitle: true,
        backgroundColor: Colors._cyan_,
      ),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset("assets/logo.png", scale: 14,),
              SizedBox(height: 80,),
              ElevatedButton(
                child: Text('Show Dialog'),
                style: ElevatedButton._styleFrom_(
                  primary: Colors._teal_,
                  onPrimary: Colors._white_,
                  shadowColor: Colors._tealAccent_,
                  textStyle: TextStyle(
                      fontSize: 18,
                  ),
                  elevation: 5,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0)),
                  minimumSize: Size(120, 50),
                ),
                onPressed: () {
                  Get.defaultDialog(
                    title: "Welcome to Flutter Dev'S",
                    middleText: "FlutterDevs is a protruding flutter app development company with "
                        "an extensive in-house team of 30+ seasoned professionals who know "
                        "exactly what you need to strengthen your business across various dimensions",
                    backgroundColor: Colors._teal_,
                    titleStyle: TextStyle(color: Colors._white_),
                    middleTextStyle: TextStyle(color: Colors._white_),
                    radius: 30
                  );
                },
              ),
            ],
          )),
    );
  }
}

Conclusion:

In this article, I've explained the basic structure of a dialog using GetX; you can modify this code according to your choice. Here's my small introduction to dialogs for user interaction with GetX, working with Flutter.

I hope this blog will give you enough information to try using GetX dialogs in your Flutter project. We'll show you what an introduction is? .Use the GetX plug-in to make a demo program of a working dialog. In this blog, we have looked at dialogs for flutter applications using GetX. I hope this blog helps you understand this dialog better. So please try it.

Using GetX Dialogs in Flutter