Flutter – Giffy 对话框

Giffy Dialogs是一个高度可定制的警报对话框。它是通过使用giffy_dialog包的flutter实现。这个包完全是用Dart语言编写的，并提供了广泛的功能。下面列出了三种类型的 giffy 对话框：

1. 网络 giffy 对话框
2. 耀斑 giffy 对话框
3. 资产 giffy 对话框

让我们详细谈谈它们。

1.网络giffy对话框：

这些是从互联网获取其内容(如图像)的 giffy 对话框类型。 Network giffy 对话框的示例实现如下所示：

onPressed: () {
  showDialog(
  context: context,builder: (_) => NetworkGiffyDialog(
    imageUrl:" IMAGE URL",
    title: Text('TEXT FOR THE DIALOG',
            textAlign: TextAlign.center,
            style: TextStyle(
            fontSize: INTEGER VALUE GOES HERE,
            fontWeight: FontWeight.w600)),
    description:Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

2. Flare giffy 对话框：

这些是从耀斑中获取其内容(如图像)的 giffy 对话框类型。为它分配了一个耀斑路径，它在其余功能中的行为与 Network giffy 对话的行为相似。 Flare giffy 对话框的示例实现如下所示：

onPressed: () {
  showDialog(
  context: context,builder: (_) => FlareGiffyDialog(
    flarePath: 'assets/space_demo.flr',
    flareAnimation: 'loading',
    title: Text('TEXT FOR THE DIALOG',
           style: TextStyle(
           fontSize: INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
    ),
    description: Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
          style: TextStyle(),
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

3.资产giffy对话框：

这些是从代码库本身获取其内容(如图像)的 giffy 对话框类型。 pubspec.yaml 文件中的资产依赖项需要出于相同目的而打开，并且图像应添加到相应的目录中。 Asset giffy 对话框的示例实现如下所示：

onPressed: () {
  showDialog(
  context: context,builder: (_) => AssetGiffyDialog(
    imagePath: 'PATH TO THE ASSETS',
    title: Text('TEXT FOR THE DIALOG',
            style: TextStyle(
            fontSize:INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
    ),
    description: Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
          style: TextStyle(),
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

关键属性：

• title：此处设置对话框标题。它是对话框中的主要文本。
• 描述：这将设置对话框的辅助文本。
• entryAnimation：用于设置对话框弹出的方向。
• o nOkButtonPressed：设置按下对话框中的“确定”按钮后的动作。

例子：

让我们在一个简单的应用程序中实现一个Network giffy 框。为此，请执行以下步骤：

添加依赖：

第一步是将giffy_dialog依赖添加到pubspec.yaml 文件的依赖项部分，如下所示：

导入依赖：

使用以下代码行将相同的依赖项导入代码文件：

import 'package:giffy_dialog/giffy_dialog.dart';

构建应用程序：

延伸StatelessWidget赋予应用程式与appbar和主体的简单Hompage如下所示：

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' Network Giffy Dialog',
      theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      // the content of the app goes here
      body: 
      ),
  }
}

添加按钮：

添加一个按钮以在按下时打开 Network giffy 对话框，在应用程序的主体内，如下所示：

Dart

RaisedButton(
                key: keys[0],
                color: Colors.teal,
                child: Text(
                  "Giffy Button",
                  style: TextStyle(
                    color: Colors.white,
                  ),

调用 giffy 对话框：

由于我们正在实现 Network giffy 对话框，因此调用如下：

Dart

onPressed: () {
                 showDialog(
                     context: context,
                     builder: (_) => NetworkGiffyDialog(
                       key: keys[1],
                       image: Image.network(
                         "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                         fit: BoxFit.cover,
                       ),
                       entryAnimation: EntryAnimation.TOP_LEFT,
                       title: Text(
                         'Gal Gadot',
                         textAlign: TextAlign.center,
                         style: TextStyle(
                             fontSize: 22.0, fontWeight: FontWeight.w600),
                       ),
                       description: Text(
                         'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women',
                         textAlign: TextAlign.center,
                       ),
                       onOkButtonPressed: () {},
                     ));

完整的源代码：

Dart

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
  
void main() => runApp(new MyApp());
  
const List keys = [
  Key("Network"),
  Key("NetworkDialog"),
];
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' Network Giffy Dialog',
      theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
                key: keys[0],
                color: Colors.teal,
                child: Text(
                  "Giffy Button",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => NetworkGiffyDialog(
                        key: keys[1],
                        image: Image.network(
                          "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                          fit: BoxFit.cover,
                        ),
                        entryAnimation: EntryAnimation.TOP_LEFT,
                        title: Text(
                          'Gal Gadot',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontSize: 22.0, fontWeight: FontWeight.w600),
                        ),
                        description: Text(
                          'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women',
                          textAlign: TextAlign.center,
                        ),
                        onOkButtonPressed: () {},
                      ));
                }),
          ],
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！