Building Beautiful UIs

Animations in Flutter: Adding Motion to Your App

Animations bring your app to life by improving user experience and making interactions feel more natural. Flutter provides multiple ways to add animations, from simple implicit animations to fully custom animated widgets.

• Implicit Animations: Automatically animate changes in widget properties using widgets like AnimatedContainer, AnimatedOpacity, and AnimatedAlign.

  
  class ImplicitAnimationExample extends StatefulWidget {
    @override
    _ImplicitAnimationExampleState createState() => _ImplicitAnimationExampleState();
  }
  
  class _ImplicitAnimationExampleState extends State<ImplicitAnimationExample> {
    bool _toggled = false;
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _toggled = !_toggled;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _toggled ? 200 : 100,
            height: _toggled ? 100 : 200,
            color: _toggled ? Colors.blue : Colors.red,
            curve: Curves.easeInOut,
          ),
        ),
      );
    }
  }
        

• Explicit Animations: For greater control, use AnimationController with widgets like FadeTransition, ScaleTransition, and SlideTransition.

  
  class ExplicitAnimationExample extends StatefulWidget {
    @override
    _ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
  }
  
  class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> 
      with SingleTickerProviderStateMixin {
    late AnimationController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = AnimationController(
        vsync: this,
        duration: Duration(seconds: 2),
      )..repeat(reverse: true);
    }
  
    @override
    void dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: FadeTransition(
          opacity: _controller,
          child: Icon(Icons.favorite, color: Colors.pink, size: 100),
        ),
      );
    }
  }
        

Custom Widgets: Designing Reusable UI Components

Creating reusable custom widgets makes your code cleaner and your UI consistent. Instead of repeating UI code, you can encapsulate it in a widget and reuse it across your app.

• Example: Custom Button Widget

  
  class CustomButton extends StatelessWidget {
    final String label;
    final VoidCallback onPressed;
  
    const CustomButton({required this.label, required this.onPressed, Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.indigo,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        ),
        onPressed: onPressed,
        child: Text(label, style: TextStyle(fontSize: 16, color: Colors.white)),
      );
    }
  }
        

• Using the Custom Widget:

  
  CustomButton(
    label: 'Click Me',
    onPressed: () {
      print('Button pressed!');
    },
  )
        

By combining animations and custom widgets, you can craft UIs that are not only visually stunning but also modular and maintainable, providing a premium experience for your users.