A tween that allow defining keyframes for various properties.

Last update: Apr 10, 2021

keyframes_tween

A tween that allow defining keyframes for various properties.

Quickstart

import 'package:keyframes_tween/keyframes_tween.dart';

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> with TickerProviderStateMixin {
  late final controller = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  );

  final tween = KeyframesTween([
    KeyframeProperty<Size>(
      [
        Size(10, 10).keyframe(0),
        Size(100, 100).keyframe(0.5, Curves.easeInOut),
        Size(200, 200).keyframe(1.0),
      ],
    ),
    KeyframeProperty<Color>(
      [
        Colors.black.keyframe(0.0),
        Colors.red.keyframe(0.8, Curves.easeInOut),
        Colors.blue.keyframe(1.0),
      ],
      name: 'background',
    ),
  ]);

  @override
  void initState() {
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<KeyframeValue>(
      valueListenable: tween.animate(controller),
      builder: (context, values, _) => Container(
        width: values<Size>().width,
        height: values<Size>().height,
        color: values<Color>('background'),
      ),
    );
  }
}

Usage

Using durations

final tween = KeyframesTween.fromTime(
  properties: [
    TimeKeyframeProperty<Size>(
      [
        Size(10, 10).timeframe(milliseconds: 0),
        Size(100, 100).timeframe(milliseconds: 500, Curves.easeInOut),
        Size(200, 200).timeframe(seconds: 1),
      ],
    ),
    TimeKeyframeProperty<Color>(
      [
        Colors.black.timeframe(milliseconds: 0),
        Colors.red.timeframe(milliseconds: 800, Curves.easeInOut),
        Colors.blue.timeframe(seconds: 1),
      ],
      name: 'background',
    ),
  ],
);

Custom lerp

final tween = KeyframesTween(
  properties: [
      KeyframeProperty<MyType>(
        [
          // ...
        ],
        lerp: (begin,end,t) =>  MyType.lerp(begin, end, t),
      )
  ],
);

Builder

return ValueListenableBuilder<KeyframeValue>(
  valueListenable: tween.animate(controller),
  builder: (context, values, _) => Container(
    width: values<Size>().width,
    height: values<Size>().height,
    color: values<Color>('background'),
  ),
);

GitHub

https://github.com/aloisdeniel/keyframes_tween
You might also like...

Reorderable table, row, column, wrap, and sliver list that allow drag and drop of the children. https://pub.dartlang.org/packages/reorderables

Reorderable table, row, column, wrap, and sliver list that allow drag and drop of the children. https://pub.dartlang.org/packages/reorderables

** Kindly submit PR if you encounter issues and please make sure you're using stable channel releases. ** Maintaining open source software ain't easy.

Aug 5, 2022

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Aug 15, 2022

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Aug 4, 2022

A Flutter package that extends IndexedStack to allow for lazy loading.

lazy_load_indexed_stack A package that extends IndexedStack to allow for lazy loading. Motivation If you use the IndexedStack with bottom navigation,

Aug 1, 2022

A Flutter plugin than allow expand and collapse text dynamically

A Flutter plugin than allow expand and collapse text dynamically

readmore A Flutter plugin than allow expand and collapse text. usage: add to your pubspec readmore: ^1.0.2 and import: import 'package:readmore/readm

Aug 7, 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

Apr 16, 2021

Plugin that allow Flutter to communicate with a native WebView.

interactive_webview Plugin that allow Flutter to communicate with a native WebView. Warning: This is not a display WebView. This plugin is designed to

Aug 10, 2022

Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

Mar 11, 2022

Leverages libphonenumber to allow for asynchronous and synchronous formatting of phone numbers in Flutter apps

Leverages libphonenumber to allow for asynchronous and synchronous formatting of phone numbers in Flutter apps

Leverages libphonenumber to allow for asynchronous and synchronous formatting of phone numbers in Flutter apps. Includes a TextInputFormatter to allow real-time AsYouType formatting.

May 19, 2022

Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Breaking News Latest news for almost 55 country. Feature of saving article and search ariticles. Used API https://newsapi.org/ Note: if data is not ge

Mar 30, 2022

Basic banking app - A Banking App that allow transfer money between multiple customers using SQLite database

Basic banking app - A Banking App that allow transfer money between multiple customers using SQLite database

basic_banking_app A Basic Banking App that allow transfer money between multiple

Feb 10, 2022

The Integration Test Helper has pre-configured methods that allow for faster test deployment for end to end (e2e) test coverage.

The Integration Test Helper has pre-configured methods that allow for faster test deployment for end to end (e2e) test coverage.

The Integration Test Helper has pre-configured methods that allow for faster test deployment for end to end (e2e) test coverage (using Android and iOS

Apr 7, 2022

shared_versions is a command line tool that allow share the versions for multiple packages in Flutter

shared_versions shared_versions is a CLI tool that allow share the versions for multiple packages in Flutter. Usage shared_versions will match the pac

Apr 1, 2022

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components to make it look like our Now UI Design, minimalistic and easy to use.

Jul 7, 2022

Flutter package for Android and iOS allow you to show a wide range of hyperlinks either in the input field or in an article view

Flutter package for Android and iOS allow you to show a wide range of hyperlinks either in the input field or in an article view

Tagtly package help you to detect a lot of hyperlink text such as.. email, url, social media tags, hashtag and more either when user type in text field or when appear a text read only.

Jul 25, 2022

The most complete flutter plugin packages for open various settings screen in Android and Ios

open_settings The most complete flutter plugin packages for open various settings screen in Android and Ios For Android: this plugin currently support

Mar 24, 2022

A beginner friendly flutter app displaying the time across various cities in the world.

A beginner friendly flutter app displaying the time across various cities in the world.

World Time App in FLUTTER My first kinda big Flutter project. It is a revision of all basics and some advanced concepts of Flutter I've learnt so far.

Aug 17, 2021

Store and Cart Examples using various state management in Flutter.

Store and Cart Examples using various state management in Flutter.

Jun 20, 2022

Plant monitoring using Node MCU (with various sensors), Flutter & Firebase

Plant monitoring using Node MCU (with various sensors), Flutter & Firebase

IoT based plant monitoring system which is connected to Firebase. A Flutter app is used to display the live data from the sensors attached to the plan

Aug 7, 2022

Related

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

Apr 16, 2021
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

May 20, 2022
In this repo you can expertise how to build various User Interface in Flutter
In this repo you can expertise how to build various User Interface in Flutter

?? Flutter UI ?? Introduction The language used here is Dart, which is a object oriented programming language with the sdk called Flutter,It's a googl

Jun 17, 2022
Flutter - Making a Christmas Tree 🎄| Tween Animation | Tween Animation

flutter_christmas A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Dec 23, 2021
A flutter widget that show the camera stream and allow ML vision recognition on it, it allow you to detect barcodes, labels, text, faces...
A flutter widget that show the camera stream and allow ML vision recognition on it, it allow you to detect barcodes, labels, text, faces...

Flutter Camera Ml Vision A Flutter package for iOS and Android to show a preview of the camera and detect things with Firebase ML Vision. Installation

Jul 26, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

cupertinew ⚠️ Experimental and work in progress ⚠️ A collection of pixel-perfect iOS-styled components and properties for Flutter, following the offic

Jun 17, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

cupertinew ⚠️ Experimental and work in progress ⚠️ A collection of pixel-perfect iOS-styled components and properties for Flutter, following the offic

Jun 17, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

Jun 17, 2022
Build context - Access most used properties in your BuildContext instance.

Languages: English | Brazilian Portuguse BuildContext Access most used properties in your BuildContext instance. This package relies on Dart's extensi

Aug 5, 2022
Mixins is a package for shortening the use of some widgets or properties.

Usage It's not a great package, just help us to code briefly, everyone can make their own easily. To use this plugin, add mixins as a dependency in yo

Aug 2, 2022