ListView With FlipCard in Flutter

Screenshot 1 :

ListView With FlipCard in Flutter

Screenshot 2 :

ListView With FlipCard in Flutter

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),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
  }
}