A Flutter Log In Page using Flare Animations

Overview

Bear_log_in

An example built using JCToon's Flare File as a custom UI component.
Bear will follow the cursor as you type or move it around.

Overview

The basic idea is to use the ctrl_face node in JCToon's file to change the direction of Teddy's gaze, as it's shown here in the gif to the right.

This is done by using custom FlareControls, available in /lib/bear_log_in_controller.dart.

FlareControls is a custom implementation of the FlareController interface.
The interface and can be found in flare_actor.dart and it has three methods:

abstract class FlareController {
  void initialize(FlutterActorArtboard artboard);
  void setViewTransform(Mat2D viewTransform);
  bool advance(FlutterActorArtboard artboard, double elapsed);
}

An instance of BearLogInController is passed to the FlareActor in /lib/main.dart. This ties the controller to this widget, and allows it to use the three overrides to perform custom actions:

FlareActor(
    "assets/Teddy.flr",
    controller: _bearLogInController,
    [...]
)

In this example, initialize() will grab the reference to the ctrl_face node through the library call artboard.getNode("ctrl_face").

Moreover, by extending FlareControls, BearLogInController can take advantage of a concrete implementation of this interface:

  • play(String animationName)
  • advance(double elapsed) - a base implementation which advances and mixes multiple animations
You might also like...

Fun canvas animations in Flutter based on time and math functions.

Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Sep 29, 2022

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Aug 21, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Oct 24, 2021

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

 🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Sep 10, 2022

A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

Aug 20, 2022

A package to create nice and smooth animations for flutter

A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

Dec 5, 2021

A Flutter package with a selection of simple yet very customizable set of loading animations.

A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Sep 23, 2022

☀️ A Flutter package for some material design app intro screens with some cool animations.

☀️ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Sep 9, 2022
Comments
  • How to apply to multiple forms?

    How to apply to multiple forms?

    For example, I got a login form and register form in the same auth screen, they are controlled by the authformstate.

    When click a button Not have an account, it renders register form, so the same with the login form.

    In this case the bearController seems not working.

    class AuthPage extends HookConsumerWidget {
      const AuthPage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context, WidgetRef ref) {
        late final bearController = BearController();
        EdgeInsets devicePadding = MediaQuery.of(context).padding;
    
        final formState = useState<AuthFormState>(AuthFormState.login);
       // login form
        final Widget _loginForm = Form(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TrackingTextInput(
                label: "Email or Username",
                hint: "What's your email address?",
                onCaretMoved: (Offset? caret) {
                  bearController.lookAt(caret);
                },
                onTextChanged: (value) {
                  identifier.value = value;
                },
              ),
              TrackingTextInput(
                label: "Password",
                hint: "I'm not watching",
                isObscured: true,
                onCaretMoved: (Offset? caret) {
                  bearController.coverEyes(caret != null);
                  bearController.lookAt(null);
                },
                onTextChanged: (String value) {
                  bearController.setPassword(value);
                },
              ),
        ...]);
      // register form 
    
     ...
    
    Widget build(BuildContext build, WidgetRef ref){
       return Scaffold(
         body: ....
               Form(child: formState.value == AuthFormState.register ? _registerForm  : formState.value == AuthFormState.forgotPassword ? _forgotPasswordForm  : _loginForm ),
               ...
    
     );
      }
     }
    }
    
    opened by lodisy 1
Owner
Apurv Jha
Maintainer @flutter.
Apurv Jha
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Facilitator for having a Splash Screen with a Flare animation

flare_splash_screen Facilitator for having a Splash screen with a Flare animation until some work has been done for the initialization of the app If y

Jimmy Aumard 93 May 17, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 19 Aug 16, 2022
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

null 3 Dec 11, 2021
A set of transition patterns within the animations package using flutter.

Flutter Motion Transitions A fultter app to demonstrate Material motion system. Material Motion System The four main Material transition patterns are

Rafsan Ahmad 15 Aug 26, 2022
Set of basic geometric animations using Flutter available as Android App gallery

#ui, #animations, #geometry, #flutter aria Set of basic geometric animations usi

lask 16 Sep 14, 2022
SwiftUI - Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.

SwiftUI Examples About Examples projects using SwiftUI & Combine. Include Layout, UI, Animations, Gestures, Draw and Data. See projects files in Files

Ivan Vorobei 4k Sep 24, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Sep 30, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 846 Sep 21, 2022