搜尋套件、儲存庫與 APP 分類

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),
                  ),
                ],
              ),
            )),
          ],
        ),
      ),
    );
  }
}

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。