Dart Pad Animation

app.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  final baseUrl = 'https://api.json-generator.com/templates/';
  final database = '1g6ge8V-45Nx';
  final baseToken = '/data?access_token=';
  final token = '67bmcs3l5nkqxk517oqnr56d041r8wj876fkgjkh';

  List<Model> list = [];
  
  bool loading = true;

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

  Future<void> request() async {
    final response = await http.get(Uri.parse(baseUrl + database + baseToken + token));
    final json = jsonDecode(response.body) as List;
    final parse = json.map((item) => Model.fromJson(item)).toList();
    list.addAll(parse);
    setState(() { loading = false; });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dart Pad Animation')),
      body: loading 
      ? const Center(child: CircularProgressIndicator()) 
      : CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Card(list[index], index % 2 == 0),
              childCount: list.length,
            ),
          ),
        ],
      ),
    );
  }
}

class Card extends StatefulWidget {
  final Model model;
  final bool even;

  const Card(this.model, this.even, {Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return CardState();
  }
}

class CardState extends State<Card> {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: TweenAnimationBuilder<double>(
        tween: Tween(begin: widget.even ? -2 : 2, end: 0),
        duration: const Duration(seconds: 1),
        curve: Curves.easeOut,
        builder: (context, value, child) {
          return Transform.translate(
            offset: Offset(width * value, 0),
            child: child,
          );
        },
        child: Column(
          crossAxisAlignment: widget.even ? CrossAxisAlignment.end : CrossAxisAlignment.start,
          children: [
            Image.network(widget.model.url, height: 150),
            const SizedBox(height: 10),
            Text(widget.model.title, style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}

class Model {
  final String title;
  final String url;

  Model(this.title, this.url);

  factory Model.fromJson(Map<String, dynamic> json) =>
      Model(json['title'], json['url']);
}