[shutter -- geTx] pop up - dialog, snackBar, bottomsheet

Preface

This article is based on the latest official stable version get: ^4.5.1 To develop .

By reading this article , You will learn the following ：

• Will use Dialog
• Will use Snackbar
• Will use BottomSheet

GetX Integrate

1. stay pubspec.yaml Add... To the file GetX Dependence , as follows ：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.5.1

2. Need to be right GetX To initialize , Default MaterialApp Replace with GetMaterialApp that will do , as follows :

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Dialog

1. brief introduction

Dialog The bottom is actually right AlertDialog It was packaged , The pop-up box is generally used for secondary confirmation , For example, when you click a button to submit data , User's second confirmation is required , To prevent misoperation .

2. attribute

3. Use

• design sketch

• Code

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

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

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX  The dialog box basically uses '),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
    
                      Get.defaultDialog(onConfirm: () => print("Ok"), middleText: "Dialog made in 3 lines of code");
                    },
                    child: Text(" Show  Dialog"),
                  ),
                ],
              ),
            )
        )

    );

  }
}

Snackbar

1. brief introduction

If you want to trigger certain events in the application , Need to pop up a shortcut message , So use Snackbar It's the best choice , Let's take a look GetX How to conduct joint commissioning Snackbar To use .

2. attribute

3. Use

• design sketch
  

• Code

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

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

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX  The dialog box basically uses '),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
    
                      Get.snackbar("Snackbar  title ", " Welcome to use Snackbar");
                    },
                    child: Text(" Show  Snackbar"),
                  ),
                ],
              ),
            )
        )

    );

  }
}

BottomSheet

1. brief introduction

BottomSheet Is a component that pops up at the bottom , It is often used for single selection 、 Verification code secondary verification pop-up window, etc ,GetX Of BottomSheet The bottom pop-up is a custom route push The method realizes an effect of pop-up window at the bottom .

2. attribute

3. Use

• design sketch

• Code

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

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

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX  The dialog box basically uses '),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
    
                      Get.bottomSheet(
                          Container(
                            child: Wrap(
                              children: <Widget>[
                                ListTile(leading: Icon(Icons.music_note), title: Text('Music'), onTap: () => {
    }),
                                ListTile(
                                  leading: Icon(Icons.videocam),
                                  title: Text('Video'),
                                  onTap: () => {
    },
                                ),
                              ],
                            ),
                          ),
                          backgroundColor: Colors.white);
                    },
                    child: Text("BottomSheets"),
                  ),
                ],
              ),
            )
        )

    );

  }
}