https://github.com/hnvn/flutter_flip_panel

A package for flip panel with built-in animation
https://github.com/hnvn/flutter_flip_panel

animation-3d dart flutter

Last synced: 3 days ago
JSON representation

A package for flip panel with built-in animation

• Host: GitHub
• URL: https://github.com/hnvn/flutter_flip_panel
• Owner: hnvn
• License: bsd-3-clause
• Created: 2018-06-19T07:15:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-04-02T07:24:43.000Z (almost 3 years ago)
• Last Synced: 2025-02-01T05:11:59.492Z (10 days ago)
• Topics: animation-3d, dart, flutter
• Language: Dart
• Homepage:
• Size: 1.11 MB
• Stars: 610
• Watchers: 22
• Forks: 85
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flutter-cn - Flip Panel - 带有内置动画的翻转面板，由[HungHD](https://github.com/hnvn)创建。 (组件 / UI)
• awesome-flutter - Flip Panel - Flip panel with built-in animation by [HungHD](https://github.com/hnvn). (Components / UI)
• awesome-flutter - Flip Panel - A package for flip panel with built-in animation ` 📝 2 years ago ` (UI [🔝](#readme))
• awesome-flutter-cn - Flip Panel - 用内置动画实现翻板效果，[HungHD](https://github.com/hnvn). (组件 / UI)

README

        
# Flip Panel

[![pub package](https://img.shields.io/pub/v/flip_panel.svg)](https://pub.dartlang.org/packages/flip_panel) ![](https://github.com/hnvn/flutter_flip_panel/workflows/unit%20test/badge.svg)

A package for flip panel with built-in animation



	

	



## How to use

````dart

import 'package:flip_panel/flip_panel.dart';

````

Create a flip panel from iterable source:

````dart

final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

FlipPanel.builder(

    itemBuilder: (context, index) => Container(

       color: Colors.black,

       padding: const EdgeInsets.symmetric(horizontal: 6.0),

       child: Text(

         '${digits[index]}',

         style: TextStyle(

             fontWeight: FontWeight.bold,

             fontSize: 50.0,

             color: Colors.white),

       ),

     ),

    itemsCount: digits.length,

    period: const Duration(milliseconds: 1000),

    loop: 1,

)

````

Create a flip panel from stream source:

````dart

FlipPanel.stream(

      itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10),

      itemBuilder: (context, value) => Container(

        color: Colors.black,

        padding: const EdgeInsets.symmetric(horizontal: 6.0),

        child: Text(

          '$value',

          style: TextStyle(

            fontWeight: FontWeight.bold,

            fontSize: 50.0,

            color: Colors.white

          ),

        ),

      ),

      initValue: 0,

  );

````