استفاده از Lottie در فلاتر | آموزش انیمیشن در برنامه نویسی فلاتر

یکی از جذاب‌ترین بخش‌های آموزش فلاتر، افزودن جلوه‌های بصری و انیمیشن‌های حرفه‌ای به اپلیکیشن‌ها است. اگر تا به حال با انیمیشن‌های سنگین و پیچیده درگیر شده‌اید، خبر خوب این است که ابزارهایی مثل Lottie این مسیر را بسیار ساده‌تر کرده‌اند. در این مقاله قصد داریم به طور کامل به معرفی Lottie در فلاتر بپردازیم، امکانات آن را بررسی کنیم و با یک مثال عملی نحوه استفاده از آن را یاد بگیریم. اگر به دنبال یادگیری انیمیشن در فلاتر هستید، این آموزش برای شماست.

Lottie چیست؟

Lottie یک کتابخانه متن‌باز است که توسط تیم Airbnb توسعه داده شده و به شما اجازه می‌دهد فایل‌های انیمیشنی با فرمت JSON که توسط نرم‌افزارهایی مانند Adobe After Effects (به کمک پلاگین Bodymovin) ساخته شده‌اند را در اپلیکیشن‌های موبایل، وب و دسکتاپ اجرا کنید.

در واقع، Lottie بدون نیاز به رندر سنگین یا کدنویسی پیچیده، انیمیشن‌هایی بسیار روان، سبک و قابل‌تنظیم در اختیار شما قرار می‌دهد.

امکانات Lottie در فلاتر

استفاده از Lottie در برنامه نویسی فلاتر مزایای زیادی دارد:

• 🚀 اجرای روان و سبک انیمیشن‌ها
• 🎨 امکان شخصی‌سازی رنگ‌ها، سرعت، تکرار و موقعیت انیمیشن
• ⚙️ پشتیبانی از تعاملات (مثل اجرای انیمیشن هنگام کلیک)
• 📁 پشتیبانی از فایل‌های آنلاین یا محلی (Assets)
• 💡 مناسب برای splash screen، لودینگ، دکمه‌ها و وضعیت‌های بدون دیتا

اضافه کردن Lottie به پروژه فلاتر

ابتدا باید کتابخانه lottie را به فایل pubspec.yaml خود اضافه کنید:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^3.0.0

سپس دستور زیر را در ترمینال اجرا کنید:

flutter pub get

مثال عملی: نمایش انیمیشن لودینگ با Lottie

در این مثال، یک انیمیشن لودینگ از فایل محلی در مسیر assets/lottie/loading.json نمایش داده می‌شود.

مرحله 1: اضافه کردن فایل انیمیشن به پروژه

یک فایل JSON انیمیشن را از سایت lottiefiles.com دانلود کرده و در پوشه assets/lottie قرار دهید. سپس در فایل pubspec.yaml مسیر آن را مشخص کنید:

flutter:
  assets:
    - assets/lottie/loading.json

مرحله 2: استفاده از Lottie در کد

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

class LoadingAnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('انیمیشن در فلاتر با Lottie'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/lottie/loading.json',
          width: 200,
          height: 200,
          repeat: true,
          reverse: false,
          animate: true,
        ),
      ),
    );
  }
}

سوالات متداول درباره Lottie در فلاتر

آیا می‌توانم فایل‌های Lottie را از اینترنت لود کنم؟

بله. از Lottie.network('https://...') استفاده کنید.

آیا Lottie فقط برای لودینگ استفاده می‌شود؟

خیر! می‌توانید برای splash screen، تایید عملیات، خطاها، انیمیشن‌های واکنش به لمس و ده‌ها مورد دیگر از آن استفاده کنید.

آیا Lottie از فایل‌های حجیم پشتیبانی می‌کند؟

فایل‌های Lottie معمولاً سبک هستند، اما بهتر است برای عملکرد بهتر، انیمیشن‌های خود را بهینه‌سازی کنید.

نتیجه‌گیری

در این آموزش فلاتر یاد گرفتیم که چگونه با استفاده از Lottie، به سادگی انیمیشن‌های جذاب و حرفه‌ای به اپلیکیشن خود اضافه کنیم. اگر به دنبال پیاده‌سازی انیمیشن در فلاتر بدون دردسرهای پیچیده هستید، Lottie یکی از بهترین انتخاب‌هاست.

با افزودن چنین قابلیت‌هایی به اپلیکیشن، هم تجربه کاربری بهتری فراهم می‌شود و هم جلوه‌ای حرفه‌ای‌تر به محصول شما می‌بخشد. پیشنهاد می‌کنیم برای شروع، سری به LottieFiles بزنید و انیمیشن‌های دلخواهتان را دانلود کنید.