aurora

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Aurora ist ein Flutter-Paket, das die Erstellung faszinierender Aurora-Gradient-Hintergründe mithilfe anpassbarer Shaders vereinfacht. Es ermöglicht Entwicklern, mit minimalem Code dynamische, fließende Farbeffekte hinzuzufügen, die natürlichen Auroras ähneln, zu jedem Widget oder Bildschirm. Ideal zur Verbesserung der App-Asthetik, unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Das Paket nutzt die Rendering-Fähigkeiten von Flutter, um reibungslose Animationen und lebendige Gradienten ohne Leistungseinbußen bereitzustellen.

Anwendungsfälle

Visuell ansprechende Startbildschirme erstellen
Verbesserung von Onboarding-Erlebnissen für mobile Apps
Atmosphärische Hintergründe zu Spielen hinzufügen
Immersive Dashboard-Oberflächen gestalten
Verbesserung der Benutzerengagement mit dynamischen Visualisierungen

Hauptmerkmale

Einfache Integration mit nur einem Widget
Anpassbare Gradientenfarben und Fließgeschwindigkeit
glatte animierte Shader-Effekte
Plattformübergreifende Kompatibilität
Leichtgewichtig und leistungsstark
Unterstützt sowohl statische als auch animierte Modi

Geeignet für

UI-Designer, die beeindruckende visuelle Effekte suchen
Entwickler, die kreative oder künstlerische Apps erstellen
Apps, die ansprechende Onboarding- oder Startbildschirme erfordern
Projekte, die sich auf immersives Nutzererlebnis konzentrieren
Frontend-Entwickler, die Lösungen mit minimalem Code suchen

Hinweise

Kann die Leistung auf Low-End-Geräten beeinträchtigen
Grundlegendes Verständnis von Shader-Konzepten erforderlich
Begrenzte Anpassungsmöglichkeiten außer bei Gradient- und Animations-Einstellungen
Nicht geeignet für einfache, statische Hintergrundanforderungen
Am besten mit minimalem Überlappungsinhalt für optimale Sichtbarkeit verwenden

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

Pakete, Repositories und App-Kategorien suchen

aurora

Paket installieren