smart_flare 0.2.9+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

Smart Flare - Customizable Interactable Flare actors #

Interactive capabilities for larger Flare animations.

Installation #

Add smart_flare 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!

Specialized 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 across 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 at least 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.2.9+1 #

  • Change log style updates

0.2.9 #

  • Update flare_flutter to 2.0.1

0.2.7 #

0.2.6 #

  • 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.

0.2.5 #

  • 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.2 #

  • Fixed Some weird overriding crash for flare controls play function.

0.2.1 #

  • 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.0 #

  • 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.1.0 #

  • 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.0.1 #

Basic interactions and debug overlay functionality.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: NavigationDemo());
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  smart_flare: ^0.2.9+1

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]
83
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]
91
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • smart_flare that is a package requiring null.

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 that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: SmartFlareActor._controller

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 ^2.0.1 2.0.5
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
flare_dart 2.3.4
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test