animated_counter


A collection of animated counters sourced during the FlutterCounterChallenge2020.

BlockCircle WaveCreatures
BlockCircle WaveCreatures
Image BubbleParticlesPortrait
Image BubbleParticlesPortrait
Rotating BubblesRotating PlanetsVolcano
Rotating BubblesRotating PlanetsVolcano
WavePixelDisks
WavePixelDisks

Features

  • Beautiful Smooth Animations
  • Ability to increment, decrement and get current counter value.
  • One stop destination for FlutterCounterChallenge2020 widgets.
  • Completely open source.

Supported platforms

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop

Live preview

http://ryuukenshi.github.io/animated_counter

Note: This page is built with flutter-web, hence the animations may not be smooth. For a better user experience, please run the example app on a mobile device.

Installation

Add animated_counter: 0.0.7 to your pubspec.yaml dependencies. And import it:

import 'package:collapsible_sidebar/collapsible_sidebar.dart';

How to use


First create the object of the Animated Counter you wish to use. Then use its build() method to build it. Finally use the incrementCounter(), decrementCounter() and getCounter() methods to control the widget animations.

Create the object of the animated counter you like

  BlocksCounter block = BlocksCounter(initialCounter: 0);
  DisksCounter disk = DisksCounter(initialCounter: 0);
  WaveCounter wave = WaveCounter(initialCounter: 0);
  CircleWaveCounter circle;
  RotatingBubblesCounter bub = RotatingBubblesCounter(initialCounter: 0, initialColors: [Colors.red, Colors.green, Colors.blue]);
  RotatingPlanetsCounter plan = RotatingPlanetsCounter(initialCounter: 0, initialColors: [Colors.red, Colors.green, Colors.blue]);
  CreatureCounter cre;
  ImageBubbleCounter imgbub = ImageBubbleCounter(initialCounter: 0, image: 'assets/dash.jpg');
  PortraitCounter por = PortraitCounter(initialCounter: 0, image: 'assets/mattis.jpeg');
  ParticlesCounter part;
  VolcanoCounter vol = VolcanoCounter(initialCounter: 0, enableSky: true);
  PixelCounter pix = PixelCounter(initialCounter: 0);

  @override
    void initState() {
      circle = CircleWaveCounter(vsync: this, initialCounter: 0, initialColors: [Colors.red, Colors.green, Colors.blue]);
      cre = CreatureCounter(vsync: this, initialCounter: 0, initialColors: [Colors.red, Colors.green, Colors.blue]);
      part = ParticlesCounter(initialCounter: 0, images: ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']);
      super.initState();
    }

CircleWaveCounter() and CreatureCounter() require a vsync hence the parent class needs to extend TickerProviderStateMixin to use these counters.

Use it in widget tree using build() method. Control it using the incrementCounter(), decrementCounter() and getCounter() methods.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          block.build(context),
          disk.build(context),
          wave.build(context),
          circle.build(context),
          bub.build(context),
          plan.build(context),
          cre.build(context),
          imgbub.build(context),
          por.build(context),
          part.build(context),
          vol.build(context),
          pix.build(context),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            block.incrementCounter();
            disk.incrementCounter();
            wave.incrementCounter();
            circle.incrementCounter();
            bub.incrementCounter();
            plan.incrementCounter();
            cre.incrementCounter();
            imgbub.incrementCounter();
            por.incrementCounter();
            part.incrementCounter();
            vol.incrementCounter();
            pix.incrementCounter();
          });
        },
      ),
    );
  }

License


Apache 2.0

Credits


This package was made with code open-sourced by the following awesome devs. Romain Rastel Mahmoud Ashour

Libraries

animated_counter
blocks_counter
circle_wave_counter
common
creature_counter
disks_counter
image_bubble_counter
particles_counter
pixel_counter
portrait_counter
rotating_bubbles_counter
rotating_planets_counter
volcano_counter
wave_counter