A flutter widget where a card is expanded ontap.

Related tags

UI Expansion-Card
Overview

Expansion card

Open Source Love

This package provides an easy implementation of a Expansion type card where you can also add gif at the background.

How to use

import 'package:expansion_card/expansion_card.dart';

Center(
            child: ExpansionCard(
              background: Image.asset("assets/animations/sleep.gif"),
              title: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Header",
                      style: TextStyle(
                        fontFamily: 'BalooBhai',
                        fontSize: 30,
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      "Sub",
                      style: TextStyle(
                          fontFamily: 'BalooBhai', fontSize: 20, color: Colors.white),
                    ),
                  ],
                ),
              ),
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 7),
                  child: Text("Content goes over here !",
                      style: TextStyle(
                          fontFamily: 'BalooBhai',
                          fontSize: 20,
                          color: Colors.white)),
                )
              ],
            ));

Custom Usage

There are several options that allow for more control:

Properties Description
leading Define an action after slidding a button
background provide any image asset file (supports gif also)
onExpansionChanged When the tile starts expanding, this function is called with the value true. When the tile starts collapsing, this function is called with the value false.
trailing A widget to display instead of a rotating arrow icon
initiallyExpanded Specifies if the list tile is initially expanded (true) or collapsed (false, the default)


👍 Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
You might also like...

A flutter port of Cardidy, a package to validate or identify card numbers & cvv with ease.

Flutter Cardidy A plugin to validate or identify card numbers & cvv with ease. This flutter package will help you validate card numbers or CVVs and id

Nov 28, 2021

A Flutter package to easily create a Credit Card in your application.

A Flutter package to easily create a Credit Card in your application.

Awesome Card A flutter package to create a Credit Card widget in your application. Stay tuned for the latest updates: 📱 Screenshots ⚙️ Installation I

Dec 1, 2022

Mi-card-app flutter project

my_card_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Dec 2, 2021

Find out under which card the Flutter logo is hiding.

Flutter Card Flip Game Find out under which card the Flutter logo is hiding. Game Rules The purpose of this game is for the player to find out under w

Dec 30, 2021

This is simple Ninja ID Card App Code ;)

ninjacard A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Oct 17, 2022

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

Dec 20, 2022

A Dart package that detects credit card types based on their prefixes

A Dart package that detects credit card types based on their prefixes

credit_card_type_detector | Credit Card Type Detector A Dart package that detects credit card types based on the current credit card number patterns T

Jan 4, 2023

DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

Jan 4, 2023

A simple animated radial menu widget for Flutter.

A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Jan 7, 2023
Comments
  • The content are not fitted with the card

    The content are not fitted with the card

    Hello, So I have this code

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: ExpansionCard(
        borderRadius: 20,
        background: Image.asset(
          "assets/solar.gif",
          fit: BoxFit.cover,
        ),
        title: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                "${note.getTitle()}",
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                  fontFamily: 'BalooBhai',
                ),
              ),
              Text(
                "${note.getReadableDate()}",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontFamily: 'BalooBhai',
                ),
              ),
            ],
          ),
        ),
        children: <Widget>[
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.symmetric(horizontal: 7, vertical: 10),
            padding: EdgeInsets.symmetric(horizontal: 12),
            child: Text(
              "${note.getDescription()}",
              // overflow: TextOverflow.ellipsis,
              // maxLines: 4,
              style: TextStyle(
                fontSize: 20,
                fontFamily: 'BalooBhai',
                color: Colors.white,
              ),
            ),
          )
        ],
      ),
    );

    but the content which is the description are going out of the card. any solutions for that? Example: Screenshot_1

    opened by SirMajed 8
  • Enable null safe for this library

    Enable null safe for this library

    The library 'package:expansion_card/expansion_card.dart' is legacy, and should not be imported into a null safe library. Try migrating the imported library.

    This is the only available version in flutter website.

    expansion_card: ^0.1.0

    Screen Shot 2022-04-03 at 5 18 56 pm
    opened by aravind816 0
  • How to open/close the card programmatically

    How to open/close the card programmatically

    Hi,

    Is there any possible way to open / close the cards using GlobalKeys or anything similar?

    Any advise appreciated or I will Fork the repo and apply my requirements there.

    Thanks.

    opened by prooshani 0
  • Expansion Card resizes due to big image

    Expansion Card resizes due to big image

    I am using a big portrait Image for background in the Expansion Card and it looks like that in the collapsed state, it Expands based on the size of the image.

    image

    this is the expansion card with big image. When I use a Square one, it looks as should: image

    opened by leossmith 1
Owner
null
GitHub
ID-Card - A Simple ID Card Project Using Flutter

ID-CARD A new Flutter project.A simple demonstration of my time in the Dart lang

edwromero 0 Jan 26, 2022
Scratch card widget which temporarily hides content from user.

scratcher Scratch card widget which temporarily hides content from user. Features Android and iOS support Cover content with full color or custom imag

Kamil Rykowski 405 Dec 27, 2022
Flutter Credit Card Input form

This package provides visually beautiful UX through animation of credit card information input form. Preview Installing Add dependency to pubspec.yaml

Jeongtae Kim 426 Jan 5, 2023
A flutter package for building card based forms.

Card Settings NOTE: THIS IS EFFECTIVELY NULLSAFE BUT CANNOT REFLECT THIS UNTIL cupertino_settings IS UPGRADED. A flutter package for building settings

CodeGrue 445 Dec 26, 2022
Flutterwave landing page animated card deck implemented with Flutter

The Flutterwave animated card deck in Flutterwave's landing page implemented with Flutter.

null 38 Nov 10, 2022
This is my card using flutter

Mi Card Our Goal Now that you've seen how to create a Flutter app entirely from scratch, we're going to go further and learn more about how to design

Joshua Uzor 5 Dec 18, 2021
Flutter package - Animated Flip Card

Animated Flip Card Animated Flip Card package lets you add an animated flip card to your Flutter app that hide and show more informations. Features Th

Ulfhrafn 8 Dec 4, 2022
Flutter - Special animated flip card

special_card Flutter UI Design | Animated Flip Card. Demo for the app: animated-flip-card.mp4 Getting Started This project is a starting point for a F

Ulfhrafn 2 Dec 4, 2022
Flutter Card Management App(UI/UX)

Flutter Card Managing App - Cardy Bank I uploaded on youtube!! Thanks to Watch Introduction I'm working on a project to launch a simple brand. I tried

Lomio 8 Oct 31, 2022
Credit Card UI For Flutter

TP1 FLUTTER CREDIT CARD UI FIRST step : must enter the number of credit card then the expired date SECONDE step : you enter the CVV in the back of the

null 0 Nov 8, 2021