Flutter – 使用 Avatar Glow

Flutter有一个名为avatar_glow的包，它提供了一个带有炫酷背景发光动画的 Avatar Glow Widget。在本文中，我们将通过一个示例来探索同一个包。

执行：

首先，将依赖添加到pubspec.yaml文件中，如下所示：

现在将以下代码导入到您的 main.js 中。dart文件：

import 'package:avatar_glow/avatar_glow.dart';

A. 创建示例代码如下：

Dart

Avatar(
glowColor:Colors.teal,
showTwoGlows:false,
endRadius:80.0,
child: // Any widget(circle avatar , sizedbox etc)
)

例子：

Dart

import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(Avatarglow());
}
  
class Avatarglow extends StatelessWidget {
  const Avatarglow({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Geeks for Geeks"),
          centerTitle: true,
          backgroundColor: Colors.green,
        ),//AppBar
        body: Center(
          child: AvatarGlow(
            glowColor: Colors.green,
            endRadius: 90.0,
            duration: Duration(milliseconds: 2000),
            repeat: true,
            showTwoGlows: true,
            repeatPauseDuration: Duration(milliseconds: 100),
            child: Material(
              // Replace this child with your own
              elevation: 8.0,
              shape: CircleBorder(),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: CircleAvatar(
                  backgroundColor: Colors.grey[100],
                  child: Image.network(
                    "https://external-content.duckduckgo.com
                    /iu/?u=https%3A%2F%2Fmedia.geeksforgeeks.
                    org%2Fwp-content%2Fcdn-uploads%2Fgfg_200X200.png&f=1&nofb=1",
                    fit: BoxFit.fill,
                  ),// image
                  radius: 40.0,
                ),// circleAvatar
              ),// ClipRRect
            ),// Material 
          ),// avatarglow
        ),// center
      ),// Scaffold
    ); // MaterialApp
  }
}

输出：

解释 ：

现在让我们了解上面给出的示例：

• main 是加载程序后调用的主要方法。
• 加载程序后，runApp 方法将运行并调用我们创建的类 (Avatarglow) 来运行。
• 这个类是无状态的，因为我们只想显示 Glowing Image。
• 由于flutter基于小部件，因此必须构建小部件。
• 创建一个允许我们使用脚手架的 Material App。 Scaffold 允许我们使用 AppBar 和 Body。
• AppBar 有一个简单的文本“Geeks for Geeks”和centertitle :true。
• 正文包含采用AvatarGLow的居中布局。
• glowColor属性设置发光颜色。
• showTwoGlows设置为 false 时显示第一个 Glow，设置为 true 时显示第二个 Glow。
• 发光结束的endRadius范围半径。
• 作为一个孩子，你可以设置任何小部件，这里我们有一个网络图像。