A package for flip panel with built-in animation
import 'package:flip_panel/flip_panel.dart';
Create a flip panel from iterable source:
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:
FlipPanel<int>.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,
);
example/lib/main.dart
import 'package:flip_panel/flip_panel.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
scaffoldBackgroundColor: Colors.white,
),
title: 'FlipPanel',
routes: {
'flip_image': (_) => AnimatedImagePage(),
'flip_clock': (_) => FlipClockPage(),
},
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FlipPanel'),
),
body: Column(
children: [
ListTile(
title: Text('FlipImage'),
onTap: () => Navigator.of(context).pushNamed('flip_image'),
),
ListTile(
title: Text('FlipClock'),
onTap: () => Navigator.of(context).pushNamed('flip_clock'),
)
],
),
);
}
}
class AnimatedImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final imageWidth = 320.0;
final imageHeight = 171.0;
final toleranceFactor = 0.033;
final widthFactor = 0.125;
final heightFactor = 0.5;
final random = Random();
return Scaffold(
appBar: AppBar(
title: Text('FlipImage'),
),
body: Container(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [0, 1, 2, 3, 4, 5, 6, 7,].map((count) =>
FlipPanel.stream(
itemStream: Stream.fromFuture(
Future.delayed(Duration(milliseconds: random.nextInt(20) * 100), () => 1)
),
itemBuilder: (_, value) =>
value <= 0
? Container(
color: Colors.white,
width: widthFactor * imageWidth,
height: heightFactor * imageHeight,
)
: ClipRect(
child: Align(
alignment: Alignment(-1.0 + count * 2 * 0.125 + count * toleranceFactor, -1.0),
widthFactor: widthFactor,
heightFactor: heightFactor,
child: Image.asset(
'assets/flutter_cover.png',
width: imageWidth,
height: imageHeight,
)
)
),
initValue: 0,
spacing: 0.0,
)).toList(),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [0, 1, 2, 3, 4, 5, 6, 7,].map((count) =>
FlipPanel.stream(
itemStream: Stream.fromFuture(
Future.delayed(Duration(milliseconds: random.nextInt(20) * 100), () => 1)
),
itemBuilder: (_, value) =>
value <= 0
? Container(
color: Colors.white,
width: widthFactor * imageWidth,
height: heightFactor * imageHeight,
)
: ClipRect(
child: Align(
alignment: Alignment(-1.0 + count * 2 * 0.125 + count * toleranceFactor, 1.0),
widthFactor: widthFactor,
heightFactor: heightFactor,
child: Image.asset(
'assets/flutter_cover.png',
width: imageWidth,
height: imageHeight,
)
)
),
initValue: 0,
spacing: 0.0,
direction: FlipDirection.down,
)).toList(),
)
],
),
),
),
);
}
}
class FlipClockPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FlipClock'),
),
body: Container(
child: Center(
child: FlipClock.simple(
startTime: DateTime.now(),
digitColor: Colors.white,
backgroundColor: Colors.black,
digitSize: 48.0,
borderRadius: const BorderRadius.all(Radius.circular(3.0)),
),
),
),
);
}
}
Add this to your package's pubspec.yaml file:
dependencies:
flip_panel: ^0.0.2
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter packages get
Alternatively, your editor might support pub get
or flutter packages get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:flip_panel/flip_panel.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
1.0.0 | Feb 9, 2019 |
|
|
0.0.9 | Nov 27, 2018 |
|
|
0.0.8 | Oct 20, 2018 |
|
|
0.0.6 | Oct 19, 2018 |
|
|
0.0.5 | Aug 11, 2018 |
|
|
0.0.4 | Jun 28, 2018 |
|
|
0.0.3 | Jun 21, 2018 |
|
|
0.0.2 | Jun 19, 2018 |
|
|
0.0.1 | Jun 19, 2018 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
82
|
Health:
Code health derived from static analysis.
[more]
|
--
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
--
|
Overall:
Weighted score of the above.
[more]
|
41
|
The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.
Support Dart 2 in pubspec.yaml
.
The SDK constraint in pubspec.yaml
doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.
Make sure dartdoc
successfully runs on your package's source files. (-10 points)
Dependencies were not resolved.
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=1.19.0 <2.0.0 |