anirudhsharma392 / expansion-card Goto Github PK

View Code? Open in Web Editor NEW

129.0 3.0 37.0 7.32 MB

A flutter widget where a card is expanded ontap.

License: MIT License

Dart 100.00%

expansion-card's Introduction

Expansion card

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

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -m 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

expansion-card's People

Contributors

Stargazers

Watchers

expansion-card's Issues

The color of the title and sub heading animated to blue!

Please can you add one more parameter which takes the color and give the ability to animate to any possible color?

backgroundColor

It would be great to be able to change the backgroundColor and arrow color.

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.

Close when open keyboard

Whei i open Keybord in a SpinBox in children of ExpansionCard the card closes

gif parameter is missing!

borderRadius not rendering

Thx for your design!

How to set background in pure color?

Hi, is there a way to set background in pure color?

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

How to auto close the expansion card without tap

When the version of null safety will be released ?

The color of the arrow cannot be changed

The color of the rotating arrow is always white and cannot be changed. Please look into the issue.

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.

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

Can I use the gifs

Can I use the gifs that you show?, if so where can I find them?.

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: