在本教程中，我将向您展示如何使用 Giffy_dialog 包在 Flutter 中实现 GIF 动画对话框，该包在自定义 对话框方面非常有用。一个漂亮且自定义的警报对话框，可以帮助您创建漂亮的 Flutter 应用。

如何在 Flutter 中实现 GIF 动画对话框

安装

首先，您需要添加包名 giffy_dialog，请访问此链接 此处

在 pubspec.yaml 文件的 dependencies: 部分，添加以下行

giffy_dialog-package-in-pubspec.yaml_-800x781

然后按 Ctrl + S 获取 flutter package get 并获得 exit code 0，就像下面的图片一样

![flutter-get-package](/content/images/2019/12/flutter-get-package.jpg)

创建一个名为 ‘assets’ 的单独文件夹，并添加资产。您可以从 这里 下载资产文件

Folder-name-assets-247x240

assets-file

下载资产

然后像下面的代码一样将该资产文件导入 pubspec.yaml

assets:
- assets/rappi_basket.gif
- assets/space_demo.flr
fonts:
- family: Nunito
fonts:
- asset: assets/nunitoSemiBold.ttf
- asset: assets/nunitoBold.ttf
weight: 700

之后，转到 main.dart 文件，编写 MyApp 无状态 Widget，并附带简单的 Material App 代码和 Theme data 配置。

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(fontFamily: 'Nunito'),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('Giffy Dialog Example'),
),
body: MyHomePage(),
));
}
}

创建新的 Key 列表，并将变量 Keys 定义为如下所示。在 Key 方法中添加 ‘Network’,’Network Dialog’,’Flare’,’Flare Dialog’,’Asset’ 和 ‘Asset Dialog’ 等

创建 Key 列表后，创建一个新的无状态 Widget，并命名为 ‘MyHomePage’。首先，我们将在其中创建一个 Center Widget，然后创建一个 Column Widget，因为我们希望以垂直方式显示 RaisedButton。

网络 GIF 对话框

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String networkimg =
'https://cdn.dribbble.com/users/750517/screenshots/8574989/media/7610aa397363fdfe6f2daa1145493aee.gif';
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
child: Text('Network Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
networkimg,
fit: BoxFit.cover,
),
title: Text(
"Ostrich Running",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the Ostrich Running Dialog Box. This will help you to understand NEtwork Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.RIGHT,
onOkButtonPressed: (){},
));
},
),
],
),
);
}
}

在上面的代码中，我们创建了 Network Giffy Dialog，它将帮助您从网络或 URL 显示 Giffy。我甚至添加了 Title Text 和 Description Text。动画属性为 entryAnimation: ‘EntryAnimation.RIGHT’ 如果您想自定义动画，则可以使用 ‘entryAnimation:‘ 来更改。

 

Flare GIF 对话框：

RaisedButton(
key: keys[2],
child: Text('Flare Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
"Planet Reloading",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the PLanet Reloading Dialog Box. This will help you to understand Flare Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),

顾名思义，我们将使用 Flare 资产来显示 FlaregiffyDialog。就像 Network Giffy Dialog 一样，我在 Flare Giffy Dialog 中添加了 Title Text 和 Description text，但您需要将 image.network 替换为 ‘flarepath‘ 和 ‘flareAnimation‘，如代码示例所示。动画属性为 entryAnimation: ‘EntryAnimation.TOP_LEFT‘

Asset GIF 对话框

//Asset Giffy Dialog
RaisedButton(
key: keys[4],
child: Text('Asset Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset('assets/rappi_basket.gif'),
title: Text(
"Rappi Basket",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is theRappi Basket Dialog Box. This will help you to understand Asset Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),

在此 GIF 对话框中，我们将从 Asset 文件中实现 Asset gif 文件。代码将与 Flare Giffy Dialog 相同，只需将 ‘flarepath‘ 和 ‘flareAnimation‘ 更改为 Image.asset。动画属性为 entryAnimation: ‘EntryAnimation.TOP_LEFT‘

完整代码

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
void main() => runApp(MyApp());
const List<Key> keys = [
Key('Network'),
Key('Network Dialog'),
Key('Flare'),
Key('Flare Dialog'),
Key('Asset'),
Key('Asset dialog'),
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(fontFamily: 'Nunito'),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('Giffy Dialog Example'),
),
body: MyHomePage(),
));
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String networkimg =
'https://cdn.dribbble.com/users/750517/screenshots/8574989/media/7610aa397363fdfe6f2daa1145493aee.gif';
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
child: Text('Network Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
networkimg,
fit: BoxFit.cover,
),
title: Text(
"Ostrich Running",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the Ostrich Running Dialog Box. This will help you to understand NEtwork Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.RIGHT,
onOkButtonPressed: (){},
));
},
),
RaisedButton(
key: keys[2],
child: Text('Flare Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
"Planet Reloading",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the PLanet Reloading Dialog Box. This will help you to understand Flare Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),
RaisedButton(
key: keys[4],
child: Text('Asset Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset('assets/rappi_basket.gif'),
title: Text(
"Rappi Basket",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is theRappi Basket Dialog Box. This will help you to understand Asset Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),
],
),
);
}
}