smart_flare 0.2.6

Smart Flare - Customizable Interactable Flare actors #

Interactive capabilities for larger Flare animations.

Installation #

Add smart_slare as dependency to your pubspec file.

smart_flare: any

Example #

Here is an example of how to use the functionality within this project.

Usage #

If you want to just play a normal animation I would recommend using Flare's Flutter Package. This is for animations that you want some interaction on.

This is used the same as a Flare Actor is used with some additional properties. To use this actor at a minimum level you have to supply width, heigh and the filename to the animation. This will draw the animation on screen without playing anything.

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

class FlareDemo extends StatefulWidget {
  @override
  _FlareDemoState createState() => _FlareDemoState();
}

class _FlareDemoState extends State<FlareDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
        body: SmartFlareActor(
            width: 295.0,
            height: 251.0,
            filename: 'assets/button-animation.flr'));
  }
}

Additionally you can then give it a starting animation for it to play something.

SmartFlareActor(
    width: 295.0,
    height: 251.0,
    filename: 'assets/button-animation.flr',
    startingAnimation: 'deactivate')

Interactive Areas #

The main feature of this package is to provide it's interactive nature. You can supply the actor with ActiveArea's which looks as follows.

class ActiveArea {
  final Rect area;
  final String animationName;
  final List<String> animationsToCycle;
  final Function onAreaTapped;
  final List<String> guardComingFrom;
  final bool debugArea;
  ...
}

Each active area requires an area and either an animationName to play when tapped, or a list of animationsToCycle through when tapped. You can also set debugArea to true and the touch area will display over the animation so you can see if your calculations are correct.

ActiveArea(
    debugArea: true,
    area: Rect.fromLTWH(thirdOfWidth*2, 0, thirdOfWidth, animationHeight / 2),
    animationName: 'image_tapped',
   ),

Areas can also be defined using relative placements.

 RelativeActiveArea(
    // from (0,0) with a width 35% of animation width and 50% of height
    area: Rect.fromLTRB(0, 0, 0.35, 0.5),
    animationName: 'camera_tapped'
),

Area Callbacks #

If you want to perform an action when something is tapped, which you probably do you can supply a function to onAreaTapped and run your code in there.

ActiveArea(
    debugArea: true,
    area: Rect.fromLTWH(thirdOfWidth*2, 0, thirdOfWidth, animationHeight / 2),
    animationName: 'image_tapped',
    onAreaTapped: () {
      print('Area Tapped!');
    }
   )

Guarding against animation #

If you want to make sure that an animation does not play after another you can supply it with a list of animations to guard against. This means that, the area animation you want to play, WILL NOT PLAY of the last played animation is contained in the guardComingFrom list. GuardGoingTo coming in next release.

ActiveArea(
          debugArea: true,
          area: Rect.fromLTWH(thirdOfWidth*2, 0, thirdOfWidth, animationHeight / 2),
          guardComingFrom: ['deactivate'],
          animationName: 'image_tapped',
          onAreaTapped: () {
            print('Image tapped!');
          }),

And that's it!

Specialised Actors #

CycleFlareActor #

Given a list of animations this actor will play one after the other as it is tapped.

CycleFlareActor(
    width: animationWidth,
    height: animationHeight,
    filename: 'assets/button-animation.flr',
    animations: ['deactivate', 'activate'],
  )

PanFlareActor #

Given an open and close animation this actor will play those animations when panned accross it. It plays the open animation in the direction supplied. If no close animation is provided the open animation will be reversed when swiping in the "closing" direction.

Currently only supports horizontal panning. Vertical panning on the way.

PanFlareActor(
    width: 135.0,
    height: screenSize.height,
    filename: "assets/tutorial-transition.flr",
    openAnimation: 'drawer-open',
    closeAnimation: 'drawer-close',
    direction: ActorAdvancingDirection.RightToLeft,
    threshold: 60.0,
    reverseOnRelease: true,
    activeAreas: [
      RelativePanArea(
        area: Rect.fromLTWH(0, 0.7, 1.0, 0.3),
        debugArea: true
      )
    ],
  )

threshold (optional): Total number of pixels to swipe to play the animation until the end when released.

reverseOnRelease (optional. Default true): Tells the actor to reverse the animation when the user stops interacting with the actor and the threshold is not reached.

activeAreas (required): You have to supply atleast one relative pan area

Contribution #

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request.

[0.0.1] - 2019-03-25

Basic interactions and debug overlay functionality.

[0.1.0] - 2019-03-30

  • New CycleFlareActor that you supply a list of animations too and it will cycle through them as you tap on it.
  • Relative Active Areas: You can now place your active areas using coordinates relative to your animations dimensions.

[0.2.0] - 2019-04-11

  • PanFlareActor: Added the new PanFlareActor that allows you to advance your Flare animation by panning accross the device. It comes with a few basic things like reversing on release, a threshold to indicate when to play animatin to the end, swiping direction, using an open and close animation or just open that can be reversed.

Code Refactor: Moved the actors into their own folder to keep code more maintainable.

[0.2.1] - 2019-04-12

  • Refactored the PanFlareActor to use the SmartFlareActor and it's interactive areas
  • Added a new ActiveArea type called RelativePanArea which extends the RelativeActiveArea. Normal pan area coming soon
  • Debugable areas show different colors depending on the area type. Tap areas show blue, draggable/pannable areas show red

[0.2.2] - [0.2.4] 2019-04-12

Fixed Some weird overriding crash for flare controls play function.

[0.2.5] - 2019-04-12

  • Added completeOnThresholdReached to PanFlareActor to indicate that we want the animation to play until completion once we reach the defined threshold
  • Made sure the animation always starts of at the correct place when the actor is shown for the first time.

[0.2.6] - 2019-04-15

  • Added playStartingAnimationWhenRebuilt to SmartFlareActor to control if the starting animation is played coming back from a navigation
  • Added a new TapController to better manage the last played animations, specifically for active areas with a list of cycle animations.

example/README.md

Smarter Flare animation using Flutter - Final #

This is the final result for the tutorial. Smarter Flare animations with Flutter

Use this package as a library

1. Depend on it

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


dependencies:
  smart_flare: ^0.2.6

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:smart_flare/smart_flare.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Jul 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/actors/smart_flare_actor.dart. (-1 points)

Analysis of lib/actors/smart_flare_actor.dart reported 2 hints:

line 4 col 8: Unused import: 'package:flare_flutter/flare_controls.dart'.

line 13 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: SmartFlareActor._controller

Format lib/controllers/tap_controller.dart.

Run flutter format to format lib/controllers/tap_controller.dart.

Format lib/models.dart.

Run flutter format to format lib/models.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flare_flutter ^1.3.4 1.5.4
flutter 0.0.0
Transitive dependencies
collection 1.14.11
flare_dart 1.4.3
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin