flutter_animated_gradients 1.0.0

A beautiful animated gradient background widget for Flutter with customizable colors, animation speed, and patterns.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Gradient Background Demo',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
      home: const DemoPage(),
    );
  }
}

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int _selectedPreset = 0;
  GradientType _selectedGradientType = GradientType.linear;
  LinearGradientDirection _selectedDirection =
      LinearGradientDirection.topLeftToBottomRight;
  Duration _selectedDuration = const Duration(seconds: 3);
  bool _repeat = true;

  final List<Map<String, dynamic>> _presets = [
    {'name': 'Sunset', 'colors': GradientPresets.sunset},
    {'name': 'Ocean', 'colors': GradientPresets.ocean},
    {'name': 'Forest', 'colors': GradientPresets.forest},
    {'name': 'Aurora', 'colors': GradientPresets.aurora},
    {'name': 'Fire', 'colors': GradientPresets.fire},
    {'name': 'Purple Dream', 'colors': GradientPresets.purpleDream},
    {'name': 'Tropical', 'colors': GradientPresets.tropical},
    {'name': 'Midnight', 'colors': GradientPresets.midnight},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedGradientBackground(
        colors: _presets[_selectedPreset]['colors'],
        gradientType: _selectedGradientType,
        linearDirection:
            _selectedGradientType == GradientType.linear
                ? _selectedDirection
                : null,
        duration: _selectedDuration,
        repeat: _repeat,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                const SizedBox(height: 20),
                const Text(
                  'Animated Gradient Background',
                  style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    shadows: [
                      Shadow(
                        offset: Offset(2, 2),
                        blurRadius: 4,
                        color: Colors.black26,
                      ),
                    ],
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 10),
                const Text(
                  'Beautiful animated gradient backgrounds for Flutter',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white70,
                    shadows: [
                      Shadow(
                        offset: Offset(1, 1),
                        blurRadius: 2,
                        color: Colors.black26,
                      ),
                    ],
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 40),
                Expanded(
                  child: Card(
                    color: Colors.white.withOpacity(0.9),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            'Customize Your Gradient',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 20),

                          // Preset Selection
                          const Text(
                            'Color Preset:',
                            style: TextStyle(fontWeight: FontWeight.w600),
                          ),
                          const SizedBox(height: 8),
                          Wrap(
                            spacing: 8,
                            children: List.generate(_presets.length, (index) {
                              return ChoiceChip(
                                label: Text(_presets[index]['name']),
                                selected: _selectedPreset == index,
                                onSelected: (selected) {
                                  setState(() {
                                    _selectedPreset = index;
                                  });
                                },
                              );
                            }),
                          ),

                          const SizedBox(height: 20),

                          // Gradient Type Selection
                          const Text(
                            'Gradient Type:',
                            style: TextStyle(fontWeight: FontWeight.w600),
                          ),
                          const SizedBox(height: 8),
                          Row(
                            children: [
                              Expanded(
                                child: RadioListTile<GradientType>(
                                  title: const Text('Linear'),
                                  value: GradientType.linear,
                                  groupValue: _selectedGradientType,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedGradientType = value!;
                                    });
                                  },
                                ),
                              ),
                              Expanded(
                                child: RadioListTile<GradientType>(
                                  title: const Text('Radial'),
                                  value: GradientType.radial,
                                  groupValue: _selectedGradientType,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedGradientType = value!;
                                    });
                                  },
                                ),
                              ),
                              Expanded(
                                child: RadioListTile<GradientType>(
                                  title: const Text('Sweep'),
                                  value: GradientType.sweep,
                                  groupValue: _selectedGradientType,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedGradientType = value!;
                                    });
                                  },
                                ),
                              ),
                            ],
                          ),

                          if (_selectedGradientType == GradientType.linear) ...[
                            const SizedBox(height: 10),
                            const Text(
                              'Direction:',
                              style: TextStyle(fontWeight: FontWeight.w600),
                            ),
                            const SizedBox(height: 8),
                            DropdownButton<LinearGradientDirection>(
                              value: _selectedDirection,
                              isExpanded: true,
                              onChanged: (value) {
                                setState(() {
                                  _selectedDirection = value!;
                                });
                              },
                              items:
                                  LinearGradientDirection.values.map((
                                    direction,
                                  ) {
                                    return DropdownMenuItem(
                                      value: direction,
                                      child: Text(_getDirectionName(direction)),
                                    );
                                  }).toList(),
                            ),
                          ],

                          const SizedBox(height: 20),

                          // Duration Selection
                          const Text(
                            'Animation Duration:',
                            style: TextStyle(fontWeight: FontWeight.w600),
                          ),
                          const SizedBox(height: 8),
                          Row(
                            children: [
                              Expanded(
                                child: RadioListTile<Duration>(
                                  title: const Text('1s'),
                                  value: const Duration(seconds: 1),
                                  groupValue: _selectedDuration,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedDuration = value!;
                                    });
                                  },
                                ),
                              ),
                              Expanded(
                                child: RadioListTile<Duration>(
                                  title: const Text('3s'),
                                  value: const Duration(seconds: 3),
                                  groupValue: _selectedDuration,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedDuration = value!;
                                    });
                                  },
                                ),
                              ),
                              Expanded(
                                child: RadioListTile<Duration>(
                                  title: const Text('5s'),
                                  value: const Duration(seconds: 5),
                                  groupValue: _selectedDuration,
                                  onChanged: (value) {
                                    setState(() {
                                      _selectedDuration = value!;
                                    });
                                  },
                                ),
                              ),
                            ],
                          ),

                          const SizedBox(height: 20),

                          // Repeat Toggle
                          SwitchListTile(
                            title: const Text('Repeat Animation'),
                            value: _repeat,
                            onChanged: (value) {
                              setState(() {
                                _repeat = value;
                              });
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  String _getDirectionName(LinearGradientDirection direction) {
    switch (direction) {
      case LinearGradientDirection.topLeftToBottomRight:
        return 'Top-Left to Bottom-Right';
      case LinearGradientDirection.topRightToBottomLeft:
        return 'Top-Right to Bottom-Left';
      case LinearGradientDirection.topToBottom:
        return 'Top to Bottom';
      case LinearGradientDirection.bottomToTop:
        return 'Bottom to Top';
      case LinearGradientDirection.leftToRight:
        return 'Left to Right';
      case LinearGradientDirection.rightToLeft:
        return 'Right to Left';
    }
  }
}