rolodex 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

Rolodex #

A Flutter widget that turns a value into an animated deck of cards. It can be used for showing team scores, stock quotes, bonus points, etc.

animated image

Getting Started #

  1. Add a dependency on rolodex package in pubspec.yaml:
dependencies:
  rolodex: any
  1. Import the library:
import 'package:rolodex/rolodex.dart';
  1. Wrap a widget that shows a value with Rolodex:
Rolodex(
  value: _counter,  // <-- Make sure to specify the value 
  child: Text(      // <-- The wrapped widget
    '$_counter',
    style: Theme.of(context).textTheme.display1,
  ),
),

You can try this with the default Flutter app generated by flutter create.

Customization #

Rolodex provides limited but extensive customization capabilities via themes. You can customize Rolodex by specifying theme attributes, for example:

Rolodex(
  theme: const RolodexThemeData(
    direction: RolodexDirection.reversed,
    cardColor: Colors.blue,
    shadowColor: Colors.indigo,
    clipBorderRadius: BorderRadius.all(Radius.circular(6)),
    alwaysShowBackground: true,
  ),
  value: _counter,
  child: SizedBox(
    width: 60,
    height: 60,
    child: Center(
      child: Text("$_counter",
        style: Theme.of(context).textTheme.display1.copyWith(
          fontSize: 40, color: Colors.white,
        ),
      ),
    ),
  ),
),

Global Settings #

Instead of customizing every Rolodex widget in your app, you might want to specify global theme settings via RolodexTheme:

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: RolodexTheme(
    data: const RolodexThemeData(  // <-- These settings will apply to all Rolodex widgets in the widget tree
      mode: RolodexMode.splitFlap,
      maxCards: 2,
      animationDuration: const Duration(milliseconds: 200),
    ),
    child: MyHomePage(title: 'Flutter Demo Home Page')
  ),
);

1.1.0 #

  • Added "perspective" theme property for controlling the 3d effect.

1.0.1 #

  • Changed default card fall direction to "down".
  • Improved shadow calculations.

1.0.0 #

  • Initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:rolodex/rolodex.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final counterDigits = "$counter".padLeft(2, ' ').split('');
    return RolodexTheme(
      data: RolodexThemeData(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Rolodex Example'),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Rolodex(
                theme: const RolodexThemeData(
                  cardColor: Colors.blue,
                  shadowColor: Colors.indigo,
                  clipBorderRadius: BorderRadius.all(Radius.circular(6)),
                  alwaysShowBackground: true,
                ),
                value: counter,
                child: SizedBox(
                  width: 60,
                  height: 60,
                  child: Center(
                    child: Text(
                      "$counter",
                      style: TextStyle(
                        fontSize: 40,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    for (var c in counterDigits.asMap().entries)
                      Rolodex(
                          key: ValueKey(counterDigits.length - c.key),
                          value: c.value,
                          theme: const RolodexThemeData(
                            mode: RolodexMode.splitFlap,
                            direction: RolodexDirection.forward,
                          ),
                          child: SizedBox(
                              width: 30,
//                            height: 42,
                              child: Center(
                                  child: Text(c.value,
                                      style: TextStyle(fontSize: 40))))),
                  ],
                ),
              ),
              ButtonBar(
                alignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Add"),
                    onPressed: () {
                      setState(() {
                        counter++;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Substract"),
                    onPressed: () {
                      setState(() {
                        counter--;
                      });
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  rolodex: ^1.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:rolodex/rolodex.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
23
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test