FLUTTER ECOSYSTEM

victorbonnet/flutter_card_selector

Flutter用カードセレクターウィジェット。

flutter_card_selector のプロジェクト画像
Stars
16
Forks
12
最終プッシュ(UTC)
2021/07/15
プロジェクト状態
公開中
Victor Bonnet GitHub avatar
GITHUB User

Victor Bonnet ↗

Staff Engineer · AI Research Lead · Builder I'm a builder first. Started shipping mobile apps in 2011, got acquired in 2012, never stopped building since.

NexthinkLausanne
言語Objective-CDartCJava

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 2 件
  • flutter{"sdk":"flutter"}
  • flutter_test開発用{"sdk":"flutter"}

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

README を開く / 閉じる

Card Selector

Widget selector for Flutter using stack. An example is available on this repo.

Getting Started

Installation
dependencies:
  card_selector: ^0.1.0
Import the library
import 'package:flutter_card_selector/flutter_card_selector.dart';
Add the widget
const list = ["1", "2", "3", "4", "5"];
const colors = [Colors.blue, Colors.grey, Colors.red, Colors.cyan, Colors.amber];
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> widgets = [];
    for (int i = 0; i < 5; i++) {
      widgets.add(Container(
        color: colors[i],
        child: Center(
            child: Text(
          list[i],
          style: Theme.of(context).textTheme.title,
        )),
      ));
    }
    return Padding(
      padding: EdgeInsets.only(top: 80.0),
      child: CardSelector(
        cards: widgets,
        mainCardWidth: 240,
        mainCardHeight: 150,
        mainCardPadding: -32,
        cardAnimationDurationMs: 200,
        cardsGap: 24.0,
        dropTargetWidth: 8.0,
      ),
    );
  }
}

Example

https://raw.githubusercontent.com/victorbonnet/flutter_card_selector/HEAD/fancy.gif