Screenshot 1 :
Screenshot 2 :
1. main.dart
import 'package:colors/home_page.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
2. data.dart
class Data{
String date;
String title;
int color;
String image1;
String image2;
Data({this.date, this.title, this.color, this.image1, this.image2});
}
List<Data> listData = [
Data(
date: "TODAY 8:30 PM",
title: "Android",
color: 0xFF000000,
image1: 'assets/images/a.jpeg',
image2: 'assets/images/b.jpeg',
),
Data(
date: "TEUSDAY 5:30 PM",
title: "Kotlin",
color: 0xFF52b5f0,
image1: 'assets/images/a.jpeg',
image2: 'assets/images/b.jpeg',
),
Data(
date: "THURDAY 6:30 AM",
title: "Java",
color: 0xFF6f6eee,
image1: 'assets/images/a.jpeg',
image2: 'assets/images/b.jpeg',
),
Data(
date: "FRIDAY 4:30 PM",
title: "Flutter",
color: 0xFF913bfc,
image1: 'assets/images/a.jpeg',
image2: 'assets/images/b.jpeg',
),
];
3. home_page.dart
import 'package:colors/data.dart';
import 'package:colors/list_item.dart';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
@override
Widget build(BuildContext context) {
return FlipCard(
key: cardKey,
flipOnTouch: false,
front: Scaffold(
body: InkWell(
onTap: () {
cardKey.currentState.toggleCard();
},
child: Container(
color: Colors.black,
child: ListView.builder(
itemCount: listData.length,
itemBuilder: (context, index) {
Data data = listData[index];
return ListItem(data: data, index: index);
}),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
)),
back: Scaffold(
body: InkWell(
onTap: () {
cardKey.currentState.toggleCard();
},
child: Container(
color: Colors.redAccent,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Best Of Luck",
style: TextStyle(
fontSize: 35,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"www.fluttertutorial.in",
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Icon(
Icons.favorite,
color: Colors.white,
size: 60,
)
],
),
),
),
)),
);
}
}
4. list_item.dart
import 'package:colors/data.dart';
import 'package:flutter/material.dart';
class ListItem extends StatelessWidget {
ListItem({this.data, this.index});
final Data data;
final int index;
@override
Widget build(BuildContext context) {
return index == 0
? Container(
// height: 150,
color: Color(index == listData.length - 1
? listData[0].color
: listData[index + 1].color),
child: Stack(
children: <Widget>[
Container(
height: 150,
width: MediaQuery.of(context).size.width,
child: Material(
color: Color(data.color),
elevation: 6.0,
// borderRadius: BorderRadius.circular(10.0),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(70),
),
shadowColor: Color(0x802196F3),
child: Container(
margin: EdgeInsets.only(top: 20, left: 50, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white, width: 1)),
child: Icon(
Icons.laptop_chromebook,
color: Colors.white,
size: 40,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Education",
style: TextStyle(
color: Colors.white, letterSpacing: 2),
),
)
],
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Color(listData[index + 1].color),
width: 1)),
child: Icon(
Icons.headset,
color: Color(listData[index + 1].color),
size: 40,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"MUSIC",
style: TextStyle(
color: Colors.white, letterSpacing: 2),
),
)
],
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white, width: 1)),
child: Icon(
Icons.beach_access,
color: Colors.white,
size: 40,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"SPORT",
style: TextStyle(
color: Colors.white, letterSpacing: 2),
),
)
],
),
],
),
),
),
),
],
),
)
: Container(
// height: 150,
color: Color(index == listData.length - 1
? listData[0].color
: listData[index + 1].color),
child: Stack(
children: <Widget>[
Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: Material(
color: Color(data.color),
elevation: 6.0,
// borderRadius: BorderRadius.circular(10.0),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(70),
),
shadowColor: Color(0x802196F3),
child: Container(
margin: EdgeInsets.only(top: 20, left: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
data.date,
style: TextStyle(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
data.title,
style: TextStyle(
fontSize: 24.0, color: Colors.white),
),
),
Container(
width: 100,
padding: const EdgeInsets.all(10.0),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white, width: 1)),
child: Icon(Icons.supervised_user_circle, color: Colors.white),
),
Positioned(
left: 20,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white, width: 1)),
child: Icon(Icons.supervised_user_circle, color: Colors.white),
),
)
],
),
)
],
),
),
),
),
],
),
);
}
}
