flutter_theme_circle_animation 0.0.1 copy "flutter_theme_circle_animation: ^0.0.1" to clipboard
flutter_theme_circle_animation: ^0.0.1 copied to clipboard

A Flutter package that provides a beautiful circle reveal animation for theme switching, similar to Telegram's theme transition effect. Zero dependencies beyond Flutter.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_theme_circle_animation/flutter_theme_circle_animation.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  ThemeData get _lightTheme => ThemeData(
    brightness: Brightness.light,
    colorSchemeSeed: Colors.blue,
    useMaterial3: true,
  );

  ThemeData get _darkTheme => ThemeData(
    brightness: Brightness.dark,
    colorSchemeSeed: Colors.blue,
    useMaterial3: true,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Circle Animation Demo',
      debugShowCheckedModeBanner: false,
      theme: _isDarkMode ? _darkTheme : _lightTheme,
      home: ThemeCircleAnimation(
        duration: const Duration(milliseconds: 600),
        curve: Curves.easeInOutCubic,
        child: _HomeScreen(
          isDarkMode: _isDarkMode,
          onToggle: () => setState(() => _isDarkMode = !_isDarkMode),
        ),
      ),
    );
  }
}

class _HomeScreen extends StatelessWidget {
  final bool isDarkMode;
  final VoidCallback onToggle;

  const _HomeScreen({required this.isDarkMode, required this.onToggle});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Theme Circle Animation'),
        actions: [
          // Option 1: Use the pre-built ThemeCircleSwitch
          ThemeCircleSwitch(isDarkMode: isDarkMode, onToggle: onToggle),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              isDarkMode ? Icons.nightlight_round : Icons.wb_sunny,
              size: 80,
              color: isDarkMode ? Colors.amber : Colors.orange,
            ),
            const SizedBox(height: 24),
            Text(
              isDarkMode ? 'Dark Mode' : 'Light Mode',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 16),
            Text(
              'Tap the icon in the app bar\nor the button below',
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                color: Theme.of(context).colorScheme.onSurface.withAlpha(153),
              ),
            ),
            const SizedBox(height: 48),

            // Option 2: Trigger programmatically from any widget
            Builder(
              builder: (buttonContext) {
                return FilledButton.icon(
                  onPressed: () {
                    ThemeCircleAnimation.of(buttonContext)?.toggleFromWidget(
                      context: buttonContext,
                      onToggle: onToggle,
                    );
                  },
                  icon: const Icon(Icons.palette),
                  label: const Text('Switch Theme'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}
6
likes
160
points
124
downloads

Publisher

verified publisheryoussef.tn

Weekly Downloads

A Flutter package that provides a beautiful circle reveal animation for theme switching, similar to Telegram's theme transition effect. Zero dependencies beyond Flutter.

Repository (GitHub)
View/report issues

Topics

#theme #animation #dark-mode #ui

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_theme_circle_animation