Flutter Animations Examples - DevFest Women 2022

main.dart

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

void main() => runApp(MyApp());

List<Color> colors = [
  Colors.purple,
  Colors.yellow,
  Colors.greenAccent,
  Colors.blueAccent,
  Colors.deepPurple,
  Colors.redAccent,
];


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DevFest Women Example Source Code',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: const Color(0xff131A3B),
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: ColorPicker(),
      ),
    );
  }
}

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

  @override
  State<ColorPicker> createState() => _ColorPickerState();
}

class _ColorPickerState extends State<ColorPicker>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  int _selectedColorIndex = 0;
  bool _hideColorPicker = true;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    )..repeat(reverse: true);

    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              _hideColorPicker = !_hideColorPicker;
            });
          },
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(
              'Toggle Picker',
              style: TextStyle(color: Colors.white, fontSize: 22),
            ),
          ),
        ),
        const SizedBox(height: 10),
        Stack(
          children: [
            AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) => Container(
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(color: Colors.white, width: 0.5),
                  gradient: LinearGradient(
                    colors: [
                      Colors.white.withOpacity(0),
                      Colors.white.withOpacity(0.2),
                      Colors.white.withOpacity(0),
                    ],
                    stops: [0, _animationController.value, 1],
                  ),
                ),
                child: Wrap(
                  spacing: 10,
                  runSpacing: 10,
                  children: List.generate(
                    colors.length,
                    (index) => ColorItem(
                      onTap: () {
                        setState(() {
                          _selectedColorIndex = index;
                        });
                      },
                      isSelected: _selectedColorIndex == index,
                      color: colors[index],
                      size: 60,
                    ),
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: IgnorePointer(
                ignoring: !_hideColorPicker,
                child: Padding(
                  padding: const EdgeInsets.all(1),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: TweenAnimationBuilder(
                      duration: const Duration(milliseconds: 300),
                      tween: Tween<double>(
                        begin: 15,
                        end: _hideColorPicker ? 15 : 0.1,
                      ),
                      child: Container(color: Colors.white.withOpacity(0)),
                      builder: (context, double value, child) {
                        return BackdropFilter(
                          filter:
                              ImageFilter.blur(sigmaY: value, sigmaX: value,),
                          child: child,
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}


class ColorItem extends StatefulWidget {
  const ColorItem({
    super.key,
    this.size = 50,
    required this.color,
    this.isSelected = false,
    this.onTap,
  });

  final double size;
  final Color color;
  final bool isSelected;
  final VoidCallback? onTap;

  @override
  State<ColorItem> createState() => _ColorItemState();
}

class _ColorItemState extends State<ColorItem>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
      lowerBound: 0.9,
    );
    _animationController.repeat(reverse: true);

    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _animationController,
      child: GestureDetector(
        onTap: widget.onTap,
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          width: widget.size,
          height: widget.size,
          decoration: BoxDecoration(
            color: widget.color,
            shape: BoxShape.circle,
            border: Border.all(
              color: widget.isSelected ? Colors.white : Colors.transparent,
              width: widget.isSelected ? 3 : 0,
            ),
            boxShadow: [
              BoxShadow(
                blurRadius: 10,
                color: widget.isSelected
                    ? Colors.white.withOpacity(0.5)
                    : Colors.transparent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}