floating_text 0.2.0 copy "floating_text: ^0.2.0" to clipboard
floating_text: ^0.2.0 copied to clipboard

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

Floating Text #

Platform Pub Package License: MIT License: MIT

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
floating_text down float animation animation with shadow linear animation
Demo 4 Demo 5
animation on button floating_text up float animation

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

35
likes
130
pub points
67%
popularity

Publisher

verified publisherstudentmitra.in

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on floating_text