Forem: Sanjay Adhikari

🎬 How to Animate Widgets in Flutter Like a Pro

Sanjay Adhikari — Sat, 10 May 2025 05:29:00 +0000

Flutter’s animation system is incredibly powerful and when used right, it can take your UI from plain to polished. In this blog, we’ll dive into the world of Flutter animations and explore how to animate widgets like a pro, even if you’re just getting started.

✨ Why Animations Matter in Flutter

Animations help:

Improve user experience by providing smooth transitions
Make interfaces feel more intuitive and responsive
Add delight and branding flair to your app

Flutter makes animations accessible through both implicit and explicit APIs.

🧩 Types of Animations in Flutter

1. Implicit Animations

Implicit animations are pre-built widgets that automatically animate changes to their properties over time. You don’t have to manage any animation controller.

AnimatedContainer
AnimatedOpacity
AnimatedAlign
AnimatedPositioned
AnimatedPadding
AnimatedCrossFade

Example:

class ImplicitAnimationDemo extends StatefulWidget {
  @override
  _ImplicitAnimationDemoState createState() => _ImplicitAnimationDemoState();
}

class _ImplicitAnimationDemoState extends State<ImplicitAnimationDemo> {
  double _size = 100;

  void _changeSize() {
    setState(() {
      _size = _size == 100 ? 200 : 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _changeSize,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        width: _size,
        height: _size,
        color: Colors.blue,
        curve: Curves.easeInOut,
        child: Center(child: Text("Tap Me")),
      ),
    );
  }
}

2. Explicit Animations

Explicit animations give you full control using an AnimationController, Tween, and Animation objects. They're more complex, but also more powerful.
Key Concepts:

AnimationController: Controls the animation (start, stop, repeat)
Tween: Defines the range of values to animate between
AnimatedBuilder or AnimatedWidget: Helps rebuild UI during animation

Example:

class ExplicitAnimationDemo extends StatefulWidget {
  @override
  _ExplicitAnimationDemoState createState() => _ExplicitAnimationDemoState();
}

class _ExplicitAnimationDemoState extends State<ExplicitAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _fade;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _fade = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _fade,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.green,
        child: Center(child: Text("Fade In")),
      ),
    );
  }
}

🧱 Must-Know Animation Widgets

Here are some powerful animation widgets you should have in your toolkit:

Hero – Smooth transitions between screens for shared elements
AnimatedSwitcher – Automatically fades/animates between widgets
TweenAnimationBuilder – Simplifies animated transitions
FadeTransition, ScaleTransition, SlideTransition – Use with controllers for precise control

🎯 Animation Tools and Helpers

Curves: Built-in easing styles like easeIn, bounceOut, etc.
Tween: Define the range of your animation
AnimationController: Control the playback of the animation
AnimatedBuilder: Efficient widget rebuilds

💡 Pro-Level Tips

Create reusable animation components
Abstract complex animations into widgets or functions.

Combine multiple animations
Use AnimationController with Interval for sequencing.

Use third-party libraries
flutter_animate provides elegant and boilerplate-free animations.
rive allows you to build high-performance animated assets.

🚀 Bonus: Flutter Animate Package

flutter_animate makes animations dead simple. Here's a fade + slide in animation:

Container(
    width: 200,
    height: 200,
    color: Colors.red,
    child: Center(
        child: Text("Fade in")))
    .animate()
    .fadeIn(duration: 3000.ms)
    .slide()

🧪 Pro-Level Example: Animated Onboarding Screen

Let’s go beyond the basics and create a beautiful animated onboarding screen using PageView and implicit animations.

✅ Features:

Swipable onboarding steps
Animated image slide-in
Text fade-in
Button slide-up with fade
Animated background color transitions

💻 Full Flutter Code

Here’s the complete example:

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

void main() {
  runApp(OnboardingApp());
}

class OnboardingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Onboarding',
      debugShowCheckedModeBanner: false,
      home: OnboardingScreen(),
    );
  }
}

class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  final List<_OnboardingPageModel> _pages = [
    _OnboardingPageModel(
      color: Colors.blue.shade100,
      image: 'https://cdn-icons-png.flaticon.com/512/201/201623.png',
      title: 'Welcome to Flutter!',
      description: 'Build beautiful native apps in record time.',
    ),
    _OnboardingPageModel(
      color: Colors.purple.shade100,
      image: 'https://cdn-icons-png.flaticon.com/512/190/190411.png',
      title: 'Fast Development',
      description: 'Hot reload helps you quickly build UIs.',
    ),
    _OnboardingPageModel(
      color: Colors.green.shade100,
      image: 'https://cdn-icons-png.flaticon.com/512/3621/3621454.png',
      title: 'Cross Platform',
      description: 'Build apps for mobile, web, and desktop from one codebase.',
    ),
  ];

  void _onPageChanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  void _nextPage() {
    if (_currentPage < _pages.length - 1) {
      _pageController.nextPage(
        duration: Duration(milliseconds: 600),
        curve: Curves.ease,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      color: _pages[_currentPage].color,
      child: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: PageView.builder(
            controller: _pageController,
            itemCount: _pages.length,
            onPageChanged: _onPageChanged,
            itemBuilder: (context, index) {
              final isCurrent = index == _currentPage;
              final page = _pages[index];

              return AnimatedPadding(
                duration: Duration(milliseconds: 400),
                padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: isCurrent ? 60 : 100),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    AnimatedSlide(
                      offset: isCurrent ? Offset(0, 0) : Offset(0, -0.5),
                      duration: Duration(milliseconds: 500),
                      curve: Curves.easeOut,
                      child: Image.network(page.image, height: 200),
                    ),
                    SizedBox(height: 40),
                    AnimatedOpacity(
                      duration: Duration(milliseconds: 600),
                      opacity: isCurrent ? 1.0 : 0.0,
                      child: Text(
                        page.title,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    AnimatedOpacity(
                      duration: Duration(milliseconds: 600),
                      opacity: isCurrent ? 1.0 : 0.0,
                      child: Text(
                        page.description,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16, color: Colors.black54),
                      ),
                    ),
                    Spacer(),
                    AnimatedSlide(
                      duration: Duration(milliseconds: 500),
                      offset: isCurrent ? Offset(0, 0) : Offset(0, 0.3),
                      curve: Curves.easeOut,
                      child: AnimatedOpacity(
                        duration: Duration(milliseconds: 500),
                        opacity: isCurrent ? 1.0 : 0.0,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.black87,
                            padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                          ),
                          onPressed: _nextPage,
                          child: Text(
                            _currentPage == _pages.length - 1 ? 'Get Started' : 'Next',
                            style: TextStyle(fontSize: 16),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class _OnboardingPageModel {
  final Color color;
  final String image;
  final String title;
  final String description;

  _OnboardingPageModel({
    required this.color,
    required this.image,
    required this.title,
    required this.description,
  });
}

✅ Final Thoughts

You’ve now seen:

Basics of Implicit vs. Explicit animations
Powerful helpers like Tween and Curves
A complete, real-world onboarding screen animation

Animations can truly elevate your app's experience. Keep practicing, and soon you’ll be animating like a pro! 💪

If you liked this, follow me on LinkedIn, Dev.to, and GitHub for more Flutter content!

🧠 State Management in Flutter: Choosing Between Bloc, Riverpod, and Provider

Sanjay Adhikari — Tue, 06 May 2025 03:39:49 +0000

Flutter makes building beautiful UIs fast and fun — but what happens when your app starts growing? When screens need to react to shared data? That’s when state management becomes essential.

In this blog, we'll demystify state management in Flutter and help you decide between Bloc, Riverpod, and Provider — three of the most popular approaches in the Flutter ecosystem.

📦 What Is State Management?

State refers to the data your UI depends on. For example:

A counter’s value
Whether the user is logged in
The list of items in a shopping cart

State management is how we keep the UI in sync with the data — especially when multiple widgets care about the same data or when data changes over time.

There are two broad types:

Local state (e.g., setState inside a single widget)
Global/shared state (e.g., auth status, theme, user preferences)

As apps grow, local state isn't enough. That’s where tools like Bloc, Provider, and Riverpod come in.

⚔️ The Contenders: Bloc vs Riverpod vs Provider

Let’s briefly introduce each:

🔹 Provider

Introduced by the Flutter team
Built on top of InheritedWidget
Simple and beginner-friendly

🔹 Bloc (Business Logic Component)

Inspired by the BLoC pattern by Google
Fully event-driven architecture
Excellent for larger, complex apps

🔹 Riverpod

Created by the author of Provider
A complete rethinking of Provider
More robust, testable, and flexible

📊 Feature Comparison

Feature	Provider	Riverpod	Bloc
Learning Curve	Easy	Medium	Steep
Boilerplate	Low	Medium	High
Performance	Good	Excellent	Excellent
Async Support	Basic	Built-in	Built-in
Type Safety	Medium	High	High
IDE Tooling	Solid	Excellent	Excellent (with bloc tools)
Testing	Decent	Great	Great
Suited for Large Apps	Not ideal	Yes	Yes
Community & Docs	Huge	Growing fast	Mature

🧱 Bloc: Event-Driven, Powerful, Scalable

Bloc uses an event → state architecture. You dispatch events like LoginButtonPressed, and Bloc emits new states like LoginLoading, LoginSuccess, or LoginFailure.

Example (Counter):

// counter_event.dart
abstract class CounterEvent {}
class Increment extends CounterEvent {}

// counter_bloc.dart
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
  }
}

✅ Pros:

Scalable, clean separation of logic
Great for complex apps
Bloc tools help generate code

❌ Cons:

More boilerplate
Steeper learning curve

💡 Provider: Simple Yet Capable

Provider is the most beginner-friendly option. It exposes a value and rebuilds listening widgets when that value changes.

Example:

class Counter with ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

// In widget tree:
ChangeNotifierProvider(create: (_) => Counter())

// To use it:
context.watch<Counter>().value
context.read<Counter>().increment()

✅ Pros:

Very easy to learn
Good for small to medium apps
Lightweight and flexible

❌ Cons:

Manual lifecycle management
Less modular as apps grow

🔥 Riverpod: Provider Reimagined

Riverpod solves Provider’s limitations by being completely independent from the widget tree. You can create global providers, test them easily, and manage state in a more structured way.

Example:

final counterProvider = StateProvider<int>((ref) => 0);

// In widget:
ref.watch(counterProvider)
ref.read(counterProvider.notifier).state++

✅ Pros:

No context needed
Safer and more testable
Supports async, computed, and scoped providers

❌ Cons:

Slightly more to learn
Still maturing (but very popular)

🤔 Which One Should You Choose?

Here’s a simple decision guide:

App Type	Recommendation
Very small, simple app	Provider
Mid-size app with shared state	Riverpod
Large app with complex flows	Bloc
You love code generation	Bloc (with `flutter_bloc`)
You love flexibility	Riverpod
Just getting started	Provider or Riverpod (start with `StateProvider`)

🧠 My Personal Take

I use Bloc for larger apps with clearly defined event/state flows.
I use Riverpod when I want fine-grained control and testability.
I avoid Provider in large projects due to maintainability challenges — but it’s great for quick POCs.

✅ Conclusion

There’s no single “best” state management tool — only the one that fits your app’s complexity and your team’s preferences.

Here’s a quick TL;DR:

Provider: Start here if you're new
Riverpod: Use this for modern, testable apps
Bloc: Choose this for scalable, enterprise-grade projects

🔗 Resources

🙌 Stay Connected

Found this helpful?
Let’s connect and build more amazing Flutter UIs together:

📌 LinkedIn
📄 More Flutter Blogs
🛠️ GitHub

Creating Beautiful Charts in Flutter with fl_chart

Sanjay Adhikari — Sat, 03 May 2025 05:29:17 +0000

📊 A developer-friendly guide to visualizing data with ease in Flutter apps

Introduction

Data visualization is a powerful way to present complex information clearly and interactively. Whether you're building a fitness tracker, finance app, or analytics dashboard, charts can greatly enhance the user experience. In Flutter, the fl_chart package makes it easy to add beautiful and customizable charts to your apps.

In this blog, we'll explore how to use fl_chart to create different types of charts — line, bar, pie, and radar — and customize them to match your app’s style.

1. Getting Started with fl_chart

To begin, add the fl_chart package to your pubspec.yaml file:

dependencies:
  fl_chart: ^0.70.2

Then run:

flutter pub get

Now import it into your Dart file:

import 'package:fl_chart/fl_chart.dart';

2. Line Chart – Tracking Trends

A line chart is ideal for showing data over time, like daily temperature or stock prices.

LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        spots: [
          FlSpot(0, 3),
          FlSpot(1, 1),
          FlSpot(2, 4),
          FlSpot(3, 1.5),
        ],
        isCurved: true,
        colors: [Colors.blue],
        barWidth: 4,
        belowBarData: BarAreaData(show: true, colors: [Colors.blue.withOpacity(0.3)]),
      ),
    ],
  ),
)

✅ Tip: Use isCurved: true for a smooth line.

3. Bar Chart – Comparing Data

Bar charts are great for side-by-side comparisons, like monthly expenses or category-wise sales.

BarChart(
  BarChartData(
    barGroups: [
      BarChartGroupData(
        x: 0,
        barRods: [BarChartRodData(toY: 8, color: Colors.orange)],
      ),
      BarChartGroupData(
        x: 1,
        barRods: [BarChartRodData(toY: 10, color: Colors.orange)],
      ),
    ],
  ),
)

✅ Tip: Customize spacing and axis titles for better readability.

4. Pie Chart – Proportional Insights

Pie charts work well for showing proportional data, such as time spent on different tasks or market shares.

PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(value: 40, title: 'Work', color: Colors.green),
      PieChartSectionData(value: 30, title: 'Play', color: Colors.blue),
      PieChartSectionData(value: 30, title: 'Rest', color: Colors.purple),
    ],
  ),
)

✅ Tip: You can use titleStyle to stylize section labels.

5. Radar Chart – Comparing Multiple Dimensions

Radar charts are perfect for showing multiple skills or features in a circular format.

RadarChart(
  RadarChartData(
    dataSets: [
      RadarDataSet(
        dataEntries: [
          RadarEntry(value: 5),
          RadarEntry(value: 4),
          RadarEntry(value: 3),
          RadarEntry(value: 4),
        ],
        borderColor: Colors.teal,
        fillColor: Colors.teal.withOpacity(0.3),
      ),
    ],
    radarBackgroundColor: Colors.transparent,
    titleTextStyle: TextStyle(color: Colors.black, fontSize: 14),
    getTitle: (index) {
      return ['Coding', 'Design', 'Debugging', 'Testing'][index];
    },
  ),
)

✅ Tip: Keep it minimal — too many axes can clutter the chart.

6. Real-Life Use Case: Fitness Dashboard

Imagine building a Fitness Dashboard where:

Line chart shows weekly calorie burn
Bar chart tracks daily steps
Pie chart represents activity breakdown
Radar chart compares fitness skills

This combination of charts provides an engaging, insightful UI.

7. Customization Tips

Use gradients for eye-catching charts
Show tooltips on tap using touchData
Use fl_chart with Bloc or Provider to show real-time data
Animate transitions for smoother user experience

8. Add Animations to the Chart

Add animation using AnimatedController and SingleTickerProviderStateMixin
Code for FadeIn and SlideIn animations are shown below

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

  @override
  State<FadeInLineChart> createState() => _FadeInLineChartState();
}

class _FadeInLineChartState extends State<FadeInLineChart>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();

    // Animation controller for fade effect
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );

    // Opacity animation from 0 to 1
    _opacityAnimation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeIn),
    );

    // Trigger animation
    Future.delayed(const Duration(milliseconds: 1000), () {
      _controller.forward(); // Start fade animation
    });
  }

  @override
  void dispose() {
    _controller.dispose(); // Clean up animation controller
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: AnimatedContainer(
        duration: const Duration(seconds: 1),
        curve: Curves.easeOutExpo,
        height: 300,
        child: FadeTransition(
            opacity: _opacityAnimation,
            child: LineChart(
              LineChartData(
                lineBarsData: [
                  LineChartBarData(
                    spots: [
                      FlSpot(0, 1),
                      FlSpot(1, 3),
                      FlSpot(2, 2),
                      FlSpot(3, 4),
                      FlSpot(4, 3.5),
                      FlSpot(5, 4),
                    ],
                    isCurved: true,
                    color: Colors.blue,
                    barWidth: 4,
                    isStrokeCapRound: true,
                    belowBarData: BarAreaData(show: false),
                  ),
                ],
                titlesData: FlTitlesData(show: true),
                borderData: FlBorderData(show: true),
                minX: 0,
                maxX: 5,
                minY: 0,
                maxY: 5,
              ),
              duration: const Duration(milliseconds: 800),
              curve: Curves.easeInOut,
            )),
      ),
    );
  }
}

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

  @override
  State<SlideInLineChart> createState() => _SlideInLineChartState();
}

class _SlideInLineChartState extends State<SlideInLineChart> {
  double _chartHeight = 0; // Initial height

  @override
  void initState() {
    super.initState();
    // Trigger animation after a short delay
    Future.delayed(const Duration(milliseconds: 300), () {
      setState(() {
        _chartHeight = 300; // Final chart height
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: AnimatedContainer(
        duration: const Duration(seconds: 2),
        curve: Curves.easeOutExpo,
        height: _chartHeight,
        child: _chartHeight > 0
            ? LineChart(
                LineChartData(
                  lineBarsData: [
                    LineChartBarData(
                      spots: [
                        FlSpot(0, 1),
                        FlSpot(1, 3),
                        FlSpot(2, 2),
                        FlSpot(3, 4),
                        FlSpot(4, 3.5),
                        FlSpot(5, 4),
                      ],
                      isCurved: true,
                      color: Colors.blue,
                      barWidth: 4,
                      isStrokeCapRound: true,
                      belowBarData: BarAreaData(show: false),
                    ),
                  ],
                  titlesData: FlTitlesData(show: true),
                  borderData: FlBorderData(show: true),
                  minX: 0,
                  maxX: 5,
                  minY: 0,
                  maxY: 5,
                ),
                duration: const Duration(milliseconds: 800),
                curve: Curves.easeInOut,
              )
            : const SizedBox.shrink(), // Prevent overflow when height is 0
      ),
    );
  }
}

Other animations

Smooth Bouncy Line Chart Animation

Staggered Line Chart Animation

9. Wrapping Up

Using fl_chart in Flutter is straightforward and powerful. With just a few lines of code, you can add beautiful, interactive charts that elevate your app’s UI and UX.

Start with the basics, explore the customization options, and before long, you’ll be building dashboards that impress users and stakeholders alike.

✅ Want to Try It Out?

Add fl_chart to your next Flutter project.
Share your custom charts on LinkedIn or GitHub.
Comment below if you want a full sample project!