Skip to content

Instantly share code, notes, and snippets.

@mkiisoft
Created November 24, 2021 01:30
Show Gist options
  • Save mkiisoft/8d0134fe99f43397e96021a545ad4bfe to your computer and use it in GitHub Desktop.
Save mkiisoft/8d0134fe99f43397e96021a545ad4bfe to your computer and use it in GitHub Desktop.
Dart Pad Animation
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']);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment