搜索分类、插件与代码仓

aurora 封面
插件详情v1.0.0

aurora

用于在您的 Flutter 应用中轻松创建极光渐变背景的 Widget

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
104
喜欢数
36
Pub 分数
160

安装插件

flutter pub add aurora

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Aurora 是一个 Flutter 包,通过可自定义的着色器简化了令人着迷的极光渐变背景的创建。它使开发者能够仅用少量代码即可为任何小部件或屏幕添加动态、流动的颜色效果,这些效果类似于自然极光。非常适合提升应用程序的视觉美感,支持 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台。该包利用 Flutter 的渲染能力,在不增加性能开销的情况下,提供流畅的动画和鲜艳的渐变。

适合场景

  • 创建视觉上吸引人的启动画面
  • 提升移动应用的入门体验
  • 为游戏添加大气背景
  • 设计沉浸式仪表板界面
  • 通过动态视觉效果提升用户参与度

主要特点

  • 只需一个组件即可轻松集成
  • 可自定义的渐变颜色和流动速度
  • 平滑的动画着色器效果
  • 跨平台兼容性
  • 轻量且高效
  • 支持静态和动画两种模式

适合对象

  • 寻求惊艳视觉效果的UI设计师
  • 开发创意或艺术类应用的开发者
  • 需要吸引人的引导页或启动屏的应用程序
  • 专注于沉浸式用户体验的项目
  • 希望使用最少代码的前端开发人员

使用建议

  • 可能会影响低端设备的性能
  • 需要了解基本的着色器概念
  • 除了渐变和动画设置外,自定义选项有限
  • 不适合简单的静态背景需求
  • 最好与内容重叠最少的组合以获得最佳可见性

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Aurora

Aurora is a flutter package to create aurora gradient shades in your mobile app .

Install

dependencies:
  aurora: ^1.0.0

Usage

import 'package:aurora/aurora.dart';

Aurora(
  size: 300,
  colors: [Color(0xFFfbd07c), Color(0xFFf7f779)],
  blur: 200
)

Full example

import 'package:aurora/aurora.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aurora',
      home: HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final TextStyle style = TextStyle(
        fontSize: 48,
        fontWeight: FontWeight.bold,
        color: Colors.white.withOpacity(0.7),
        letterSpacing: 1.2);

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light
          .copyWith(statusBarColor: Colors.transparent),
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: [
            Positioned(
                top: -10,
                left: -100,
                child: Aurora(
                  size: 300,
                  colors: [
                    Color(0xffc2e59c).withOpacity(1),
                    Color(0xff64b3f4).withOpacity(1)
                  ],
                )),
            Positioned(
                top: -50,
                right: -50,
                child: Aurora(
                  size: 200,
                  colors: [Color(0xFFfbd07c), Color(0xFFf7f779)],
                )),
            Positioned(
                bottom: -100,
                right: -300,
                child: Aurora(
                  size: 600,
                  colors: [Color(0xFFff0f7b), Color(0xFFf89b29)],
                )),
            Positioned(
                bottom: -50,
                left: -100,
                child: Aurora(
                  size: 200,
                  colors: [Color(0xFF595cff), Color(0xFFc6f8ff)],
                )),
            Positioned.fill(
                child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Aurora",
                    style: style,
                  ),
                  Text(
                    "Gradients",
                    style: style.copyWith(fontSize: style.fontSize + 8),
                  ),
                ],
              ),
            )),
          ],
        ),
      ),
    );
  }
}

所属分类

源码仓库

使用此插件的项目

暂无相关数据。