Flutterexperts

TailwindCSS roused flutter Velocity X. It intensely utilizes expansion techniques and accompanies numerous prebuilt widgets. The AnimatedContainer will naturally animate between the old and new properties when utilizing the gave bend and duration. Invalid properties are not animated. Its child and descendants are not animated.

VelocityX is intended to be effectively introduced, and the main point was to make it significantly simpler to compose a User Interface.

In this article, we will explore the VelocityX Animated Box In Flutter. We will also implement a demo and use the velocity-x to create an animated box using the velocity_x package in your flutter applications.

velocity_x | Flutter Package
VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development…pub. dev

Table Of Contents::

Velocity X

Velocity X Widgets

Implementation

Code Implement

Code File

Conclusion

---

---

Velocity X

VelocityX lets you focus on your design, and it accompanies different widget expansions to make it responsive over the devices. A moderate Flutter structure propelled by TailwindCSS and SwiftUI for quickly building custom designs. A system that gives you all of the structure blocks you require to manufacture bespoke plans with no irritating settled styles you need to battle to wrap.

Demo Module ::

This video shows how to create an animated box in a flutter and shows how the animated box will work in your flutter applications using velocity-x. They will change the shape and color of the box. They will be shown on your device.

Velocity X Widgets

There are some popular VelocityX widgets:

• > VxTimeline
• > VxAnimatedBox
• > VxSwiper
• > VxRating
• > VxToast

Note: In this article we will describe VxAnimatedBox widget in flutter.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

velocity_x: ^latest version

Step 2: Import

import 'package:velocity_x/velocity_x.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called animated_box_demo.dart inside the lib folder.

We will implement this screen. There was an animated container on this screen, and the shape of the container will be changed every 4 seconds—shape like rectangle, square, circle, cylinder, etc. We will use the velocity x package to animate the container and change shapes.

final random = Random();
_width = random.nextInt(350).toDouble();
_height = random.nextInt(350).toDouble();

We will create a random instance and use it.

_color = Color.fromRGBO(
  random.nextInt(250),
  random.nextInt(250),
  random.nextInt(250),
  1,
);

We will use random RGBO color when the animated container shapes change, then the color also automatically changes.

Let’s describe VxAnimatedBox() widgets

return VxAnimatedBox()
    .alignCenter
    .seconds(sec: 5)
    .fastOutSlowIn
    .width(_width + 50)
    .height(_height)
    .color(_color)
    .withRounded(value: _radius)
    .p12
    .make()
    .py16();

In VxAnimatedBox(), you will set box shape, height, width, transformation, duration, box-shadow, and also set a background image. We will add curves like bounceIn, easeIn, fastOutSlowIn, etc.

Now we will add a timer in the initState() method.

@override
void initState() {
  super.initState();
  Timer.periodic(2.seconds, 
  (timer) {
    setState(() {});
  });
}

The animation will start according to the time you put on your own free will.

Now we will call class AnimatedBoxDemo() in velocityx_animated_box.dartinside the lib folder.

Container(
  child:Center(
    child: (
        AnimatedBoxDemo()
    ),
  ),

)

Now, run the code and get the output on your devices.

Code File

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';

import 'package:velocity_x/velocity_x.dart';


class AnimatedBoxDemo extends StatefulWidget {
  @override
  _AnimatedBoxDemoState createState() => _AnimatedBoxDemoState();
}

class _AnimatedBoxDemoState extends State<AnimatedBoxDemo> {
  double _width,
      _height,
      _radius;
  Color _color;

  @override
  void initState() {
    super.initState();

    Timer.periodic(2.seconds, (timer) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    final random = Random();
    _width = random.nextInt(350).toDouble();
    _height = random.nextInt(350).toDouble();

    _color = Color.fromRGBO(
      random.nextInt(250),
      random.nextInt(250),
      random.nextInt(250),
      1,
    );


    _radius = random.nextInt(100).toDouble();
    return VxAnimatedBox()
        .alignCenter
        .seconds(sec: 5)
        .fastOutSlowIn
        .width(_width + 50)
        .height(_height)
        .color(_color)
        .withRounded(value: _radius)
        .p12
        .make()
        .py16();
  }
}

Conclusion :

In the article, I have explained the basic type widget of a VelocityX Animated Box; you can modify this code according to your choice. This was a small introduction to VelocityX Animated Box On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up VelocityX Animated Box in your flutter projects. This demo program uses velocity_x packages in a flutter and shows how an animated box will work in your flutter applications. In my next article, we will explore other velocity X widgets, So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter VelocityX Animated Box Demo:

flutter-devs/flutter_velocityX_animated_box_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---