Tutorial and code of Animated Flip Card in Flutter. Copy and paste the below code as per your requirements.
animated_flip_card: ^1.0.2
import 'package:animated_flip_card/animated_flip_card.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Center(child: Text("Animated Flip Card"),),),
body: Container(
decoration: const BoxDecoration(
color: Colors.white
),
alignment: Alignment.center,
child: AnimatedFlipCard(
front: Image.network(
"https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/105947630_1439229316275118_7379310549518040610_n.jpg?stp=c180.0.1080.1080a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=Xe3M6BYPM9MAX99_ear&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_LYk8cjKi3VkEvT2SaldEioXHtsdZhKMFLbRAwXAXdbQ&oe=625CEBFA&_nc_sid=86f79a", width: 250,
fit: BoxFit.contain,),
back: Image.network(
"https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/268794272_299440832107118_408863640682183643_n.jpg?stp=c296.0.652.652a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=XcBb1-nlaxQAX-1zQew&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT9vsLWuD4Do9-6ejkucsZVGfrgWEz4FyAOosxi26VG4SA&oe=625BC3F9&_nc_sid=7bff83s", width: 250,
fit: BoxFit.contain,),),
),
);
}
}