Floating Text

A light weight flutter package that provides beautiful floating text animations.

Getting Started

Add this package in your project's dependencies.

dependencies:
  floating_text: ^0.2.0

Import the package:

import 'package:floating_text/floating_text.dart'

Use Anywhere instead of Text Widget:

Demo's

Demo 1	Demo 2	Demo 3

Demo 4	Demo 5

Key Features

• Light Weight ( Only 100 Lines of code inside package )
• Support any Text on the Screen
• Custom style for the floating/animated text
• Custom style support for the non floating text
• highly customizable
• Easy to use

Use On Any Widget

RaisedButton(
  onPressed: () {},
  child: FloatingText(
    text: 'Button',
    repeat: true,
    duration: Duration(milliseconds: 500),
  ),
),

Set repeat true for repeating the animation

FloatingText(
text: "WELCOME",
repeat: true,
duration: Duration(milliseconds: 600),
floatingTextStyle: TextStyle(
  color: Colors.blue,
  fontSize: 50,
),
textStyle: TextStyle(
color: Colors.black38,
  fontSize: 60,
)),
onAnimationComplete: () {
  //Do your stuff
},

Use your custom text style

FloatingText(
    text: 'Congratulations',
    repeat: true,
    textStyle: TextStyle(
      fontSize: 40,
      color: Colors.black54,
    ),
    floatingTextStyle: TextStyle(
      color: Colors.red,
      fontSize: 40,
      shadows: [
        BoxShadow(
          color: Colors.yellow,
          blurRadius: 10,
        )
      ],
    ),
  ),

Full Example

FloatingText(
    text: 'Congratulations',
    repeat: true,
    repeatCount: 5,
    isRTL: false,
    duration: Duration(milliseconds: 100),
    textStyle: TextStyle(
      fontSize: 40,
      color: Colors.black54,
    ),
    floatingTextStyle: TextStyle(
      color: Colors.red,
      fontSize: 40,
      shadows: [
        BoxShadow(
          color: Colors.yellow,
          blurRadius: 10,
        )
      ],
    ),
    onAnimationComplete: () {
      print('Animation Completed');
    },
  ),

Parameters

• text (String) - text to display on screen
• repeat (Boolean) - by default false, set true if you want animation to repeat
• repeatCount (Integer) - Number of time animation should repeat. repeat paramater must be true for it to work.
• duration (Duration) - duration of the animation. Default value 200 milliseconds
• isRTL (Boolean) - by default false, set true for RTL support
• textStyle (TextStyle) - text style for floating/animating part of text
• floatingTextStyle (TextStyle) - text style for not floating part of text
• onAnimationComplete (Function - void) - Called once the animation is complete.

Tip: Experiment with different textStyle and non floatingTextStyle to get some new cool effects