impeller_fx 0.1.0

Production-grade, hyper-modern runtime fragment shader effects optimized explicitly for Flutter's Impeller rendering engine.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'pages/chromatic_aberration_page.dart';
import 'pages/glassmorphism_page.dart';
import 'pages/liquid_ripple_page.dart';
import 'pages/mesh_gradient_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(const ImpellerFxShowcaseApp());
}

/// Root showcase application for `impeller_fx`.
class ImpellerFxShowcaseApp extends StatelessWidget {
  /// Creates the [ImpellerFxShowcaseApp].
  const ImpellerFxShowcaseApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Impeller FX Showcase',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF07090E),
        colorScheme: const ColorScheme.dark(
          primary: Color(0xFF00F0FF),
          secondary: Color(0xFFFF007F),
          surface: Color(0xFF0D1117),
        ),
        useMaterial3: true,
      ),
      home: const MainShowcaseScreen(),
    );
  }
}

/// Main showcase screen with navigation between shader effects.
class MainShowcaseScreen extends StatefulWidget {
  /// Creates the [MainShowcaseScreen].
  const MainShowcaseScreen({super.key});

  @override
  State<MainShowcaseScreen> createState() => _MainShowcaseScreenState();
}

class _MainShowcaseScreenState extends State<MainShowcaseScreen> {
  int _currentIndex = 0;

  final List<Widget> _pages = const [
    MeshGradientPage(),
    LiquidRipplePage(),
    ChromaticAberrationPage(),
    GlassmorphismPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        margin: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 20.0),
        decoration: BoxDecoration(
          color: const Color(0xEE0D1117),
          borderRadius: BorderRadius.circular(24.0),
          border: Border.all(
            color: Colors.white.withValues(alpha: 0.12),
            width: 1.0,
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.5),
              blurRadius: 20.0,
              offset: const Offset(0, 10),
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(24.0),
          child: NavigationBar(
            height: 64.0,
            backgroundColor: Colors.transparent,
            indicatorColor: const Color(0xFF00F0FF).withValues(alpha: 0.2),
            selectedIndex: _currentIndex,
            labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
            onDestinationSelected: (index) {
              setState(() => _currentIndex = index);
            },
            destinations: const [
              NavigationDestination(
                icon: Icon(Icons.gradient_rounded, color: Colors.white70),
                selectedIcon: Icon(Icons.gradient_rounded, color: Color(0xFF00F0FF)),
                label: 'Mesh',
              ),
              NavigationDestination(
                icon: Icon(Icons.water_drop_outlined, color: Colors.white70),
                selectedIcon: Icon(Icons.water_drop_rounded, color: Color(0xFF00F0FF)),
                label: 'Ripple',
              ),
              NavigationDestination(
                icon: Icon(Icons.lens_blur_rounded, color: Colors.white70),
                selectedIcon: Icon(Icons.lens_blur_rounded, color: Color(0xFF00F0FF)),
                label: 'Aberration',
              ),
              NavigationDestination(
                icon: Icon(Icons.blur_on_rounded, color: Colors.white70),
                selectedIcon: Icon(Icons.blur_on_rounded, color: Color(0xFF00F0FF)),
                label: 'Glass',
              ),
            ],
          ),
        ),
      ),
    );
  }
}