Nilen Patel Inc.

Tutorial and code of Folding Card in Flutter. Copy and paste the below code as per your requirements.

flutter_folding_card: ^1.0.0+1

import 'package:flutter/material.dart';
import 'package:flutter_folding_card/flutter_folding_card.dart';

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

const _kImageUrls = [
  "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",
  "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",
  "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",
  "hhttps://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=7bff83",
];

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final itemCount = 3;
  final foldOutList = <bool>[false, false, false];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text('Folding Card'),),
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  for (var i = 0; i < foldOutList.length; ++i) {
                    foldOutList[i] = false;
                  }
                });
              },
              icon: const Icon(Icons.cleaning_services_sharp),
            ),
          ],
        ),
        backgroundColor: Colors.white,
        body: ListView.builder(
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(left: 22.0, right: 22),
              child: FoldingCard(
                foldOut: foldOutList[index],
                curve: foldOutList[index] == true
                    ? Curves.easeInCubic
                    : Curves.easeOutCubic,
                duration: const Duration(milliseconds: 1400),
                coverBackground: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      foldOutList[index] = true;
                    });
                  },
                  child: const Text(
                    'This is a sample coverBackground, click on it to fold in.',
                    textAlign: TextAlign.center,
                  ),
                ),
                expandedCard: index == 1
                    ? Stack(
                  children: [
                    Image.network(
                      _kImageUrls[3],
                      fit: BoxFit.fitWidth,
                      width: MediaQuery.of(context).size.width,
                      alignment: Alignment.topCenter,
                    ),
                    Center(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text(
                          'This is a other sample for expandedCard.',
                        ),
                      ),
                    )
                  ],
                )
                    : Image.network(
                  _kImageUrls[1],
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.topCenter,
                ),
                cover: ElevatedButton(
                  style: ButtonStyle(
                    padding: MaterialStateProperty.all(EdgeInsets.zero),
                  ),
                  onPressed: () {
                    setState(() {
                      foldOutList[index] = false;
                    });
                  },
                  child: Image.network(
                    _kImageUrls[2],
                    fit: BoxFit.fitWidth,
                    width: MediaQuery.of(context).size.width,
                    alignment: Alignment.topCenter,
                  ),
                ),
                foldingHeight: 100,
                expandedHeight: 300,
              ),
            );
          },
          itemCount: itemCount,
        ),
      ),
    );
  }
}