DEV Community: JH Jeong

Generating Word Cloud in Flutter

JH Jeong — Thu, 30 Mar 2023 14:08:22 +0000

Word Cloud

Generate and Visualize Word Cloud in Flutter

This is an explanation of how to use the package I made.

You can use this package in Pub Dev.

Word Cloud

WordCloudData
WordCloudView
WordCloudTap
WordCloudTapView

WordCloudData

To use the word cloud widget, you must set the desired data into the WordCloudData .



WordCloudData mydata = WordCloudData(data: data_list);

Parameter data needs list of Map that have keys word and value.

For example,



List<Map> data_list= [
  {'word': 'Apple','value': 100},
  {'word': 'Samsung','value': 60},
];

Another way to set the data is using instance method addData.



mydata.addData(String word, Double value);

WordCloudView

After setting the data, you can use the WordCloudView widget.



WordCloudView(
  data: mydata,
  mapwidth: 500,
  mapheight: 500,
)

This is the basic usage of the WordCloudView. Below word cloud is result of example data set.

mapcolor



WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
)

mapcolor set the background color of word cloud.

colorlist



WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

With the colorlist parameter, you can change word's font color. You should input list of Color . Word cloud will select font color Randomly.

shape

It is a parameter that can determine the overall shape of the Word Cloud. You must enter WordCloudShape as a factor.

There are circles and ellipses in the shapes that we support to date.



WordCloudCircle(radius: <double>),
WordCloudEllipse(majoraxis: <double>, minoraxis: <double>),



WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  shape: WordCloudCircle(radius: 250),
)



WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  shape: WordCloudEllipse(majoraxis: 250, minoraxis: 200),
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

fontStyle, fontWeight, fontFamily

You can change the design of the font by fontStyle, fontWeight, fontFamily.

mintextsize & maxtextsize

The value you set in WordCloudData does not become the font size. For proper visualization, it is necessary to adjust the ratio between value and font size of word cloud. Minimum and maximum values correspond to mintextsize and maxtextsize, and the remaining words are determined by the size in between. Initial setting of mintextsize and maxtextsize is 10 and 100.

decoration

Set the decoration for the container in the Word Cloud background.

attempt

The more this value is increased, the word cloud will try to put all the words into the map as much as possible. But it can slow down. The default value is 30.

WordCloudTap

WordCloudTap and WordCloudTapView make the word in word cloud clickable. First, you need to define WordCloudTap and set the words and functions you want to click on in WordCloudTap. The method that sets it up is addWordTap.



WordCloudTap wordtaps = WordCloudTap();

wordtaps.addWordtap(String word, Function function);

At this time, word is included in WordCloudData. Below is an example code using WordCloudTap.



WordCloudTap wordtaps = WordCloudTap();
int count = 0;
String wordstring = '';

//WordCloudTap Setting
for (int  i  =  0; i  <  data_list.length; i++) {
  void tap(){
    setState(() {
      count += 1;
      wordstring = data_list[i]['word'];
    });
  }
  wordtaps.addWordtap(data_list[i]['word'], tap);
}

WordCloudTapView

If you're done setting up WordCloudTap, you can use it as a factor for WordCloudTapView. The difference between WordCloudView and WordCloudTapView is that it requires a parameter wordtap. You can enter a WordCloudTap in wordtap.



WordCloudTapView(
  data:  mydata,
  wordtap:  wordtaps,
  mapcolor:  Color.fromARGB(255, 174, 183, 235),
  mapwidth:  500,
  mapheight:  500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
),

Using a simple 2D physical engine on the Flutter

JH Jeong — Thu, 01 Sep 2022 11:26:54 +0000

We will implement a 2D physical engine using a simple package in Flutter.
In this article, we will implement it using a package, and in the next article, I will introduce how I developed this package.

Easy Physics 2D

The package to be used for physical engine implementation is a package called Easy Physics 2D.
Easy Physics 2D

What this package can implement is the collision, rotation, and acceleration of the ball.
Currently, there is not much that can be done with version 0.0.1, but it will continue to be updated later.

Installation

Add this package to your pubspec.yaml file.

    dependencies:
        easy_physics_2d: '^0.0.1'

Install it.

       $ pub get

Import.

    import 'package:easy_physics_2d/easy_physics_2d.dart';

Usage

    List<dynamic> objList = [];
    var ball;

    @override
    void initState(){
        super.initState();
        ball = myBall(  
                    xPoint: 100,  
                    yPoint: 200,  
                    xVelocity: 0,  
                    yVelocity: 0,  
                    ballRadius: 30,  
                    ballMass: 0.5,  
                    angularVelocity: 0,  
                );
        objList = [ball];
    }

    GravityField(  
        objects: objList,  
        mapX: 350,  
        mapY: 350,  
        mapColor: Colors.white  
    ),

This is the most basic code for using a package. You can add a GravityField widget and add a list of physical objects that you want to put in the field.

    GravityField(  
        objects: objList,  
        gravity: 1000,  
        mapX: 350,  
        mapY: 350,  
        mapColor: Colors.white,
        gravity: 1500,
        frictionConstant: 0.8,
        elasticConstant: 0.9,
    ),

You can change the detailed properties of the field by changing gravity, frictionConstant and elasticConstant.

For the ball objects, you can also change designs.

class _HomePageState extends State<HomePage> {  
    Paint paint1 = Paint()  
      ..color = Color(0xff263e63)  
      ..style = PaintingStyle.stroke  
      ..strokeWidth = 2;  

    Paint paint2 = Paint()  
      ..color = Color(0xff15693b)  
      ..style = PaintingStyle.stroke  
      ..strokeWidth = 2;  

    List<Paint> paintList = [];  

    Path draw1 = Path();  
    Path draw2 = Path();  

    var ball;  
    var ball2;  

    @override  
    void initState() {  
        super.initState();  
        for (double i = 0; i < 20 - 1; i++) {  
            draw1.arcTo(Rect.fromCircle(radius: i, center: Offset(0, 0,)), 0, (1.5 * pi), true);  
            draw2.arcTo(Rect.fromCircle(radius: i, center: Offset(0, 0,)), 1.5 * pi, 0.5 * pi, true);  
        }  

        paintList=[paint1, paint2];  

        ball = myBall(  
                xPoint: 100,  
                yPoint: 200,  
                xVelocity: 0,  
                yVelocity: 0,  
                ballRadius: 30,  
                ballMass: 0.5,  
                angularVelocity: 0,  
                ballPaint: paintList,
                ballPath: [draw1, draw2], 
          );  
        ball2 = myBall(  
                xPoint: 150,  
                yPoint: 100,  
                xVelocity: 0,  
                yVelocity: 0,  
                ballRadius: 20,  
                ballMass: 0.5,  
                angularVelocity: 0,  

        );  
        objList = [ball, ball2];  
    }
}

with the parameter ballPath and ballPaint, you can change Path and Colors of the Ball. At this time, the length of ballPath List and the length of ballPaint List should be the same, and they should be defined in initState.

Each object has the following instance methods, which are easy to use.

var ball = myBall(  
            xPoint: 100,  
            yPoint: 200,  
            xVelocity: 0,  
            yVelocity: 0,  
            ballRadius: 30,  
            ballMass: 0.5,  
            angularVelocity: 0,  
        ); 

double n;
double m;
int range1 = 100;
int range2 = 1500;
double x, y;

ball.addXpos(n); //return void
ball.subXpos(n); //return void
ball.addYpos(n); //return void
ball.subYpos(n); //return void

ball.addXvel(m); //return void
ball.subXvel(m); //return void
ball.addYvel(m); //return void
ball.subYvel(m); //return void

ball.stop(); //return void
ball.shuffle(range1, range2); //return void : set velocity randomly range1 to range2

ball.setPosition(x, y); //return void
ball.addAngle(n); //return void

ball.isBallRegion(x, y); //return true if (x, y) is in Ball area

ball.updateDraw(); //return void: if you want tochange the position, you should run this method.

If you want to move the Ball, please use the instance method to control it.

Example Code

The code below is 2D World implemented using this package.
You can enter the link and play it yourself.
Flutter Physics World!

Github Code : Code

There are three buttons and a slider below.
Press the first button to stop the ball in that position. Gravity continues to be applied because only the speed becomes zero.
The second button randomly specifies the speed of the ball.
The third slider sets the gravity.

Conclusion

It was a toy project that I had been working on since a few months ago. I'm quite proud to have finished in any way. Since there are still so many things to revise and supplement, such updates and revisions will continue to be recorded on blogs.

Finish is Better than Perfect!

Building a Flutter Dev Environment on a Linux Server Without a GUI Environment

JH Jeong — Tue, 16 Aug 2022 06:19:00 +0000

Motivation

Currently, I am in an environment where I cannot use my personal PC and can only use public PC. Public PCs are virtually impossible to install and use multiple programs because the disk is formatted immediately upon reboot. In this situation, I looked up various ways to develop Flutter and succeeded in building an environment. I hope this article will help Flutter developers who are in a similar situation to me.

Sources

Basically, these are the posts I looked up.

Linux Server

I opened the server through Google Cloud Platform.
code-server + gcp
Ubuntu's version was 22.04 LTS and the disk size was set to 64GB.
I'm only going to use free credit anyway, so it doesn't matter if I set it up randomly.

Install Openjdk

$ sudo apt-get install openjdk-8-jdk

Install open jdk.
It probably works without additional variable settings.

$ java

Check if it is installed properly by typing the command above.

Install Flutter SDK

$ sudo snap install flutter --classic

Download the Flutter SDK easily by typing the command above.
In the same environment as mine, the Flutter SDK will be installed in the following folder.
/home/{account name}/snap/flutter/common/flutter

Next, add environmental variables.
You may find .bashrc file in this directory.
/home/{account name}/.bashrc

Open it with vim.
$ vim .bashrc

Add the following to the bottom of the .bashrc file:

export PATH="$PATH:/home/<your account name>/snap/flutter/common/flutter/bin"

$ source .bashrc

Reload the shell by typing the command above.

$ flutter sdk-path

Install cmdline tools

Create a folder with the following structure in the main working directory:

Android
- cmdline-tools
  - latest

Then move the working directory to the 'latest' folder.
Cmdline-Tools
Download the cmdline-tools.zip file for Linux from the link above.
Upload the downloaded file to your Dropbox and create a download link.
At the end of the Dropbox link, There is a factor '?dl=0', which must be eliminated.
This is because the Linux shell does not recognize the '?' character.
Then copy the generated link and type:

$ wget <Link>

$ unzip <filename.zip>

If the structure like the picture above is made, it is a success.

Add the following to /home/{account name}/.bashrc:

export ANDROID_HOME="/home/<your account name>/Android"
export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin/"
export PATH="$PATH:$ANDROID_HOME/emulator/"
export PATH="$PATH:$ANDROID_HOME/platform-tools/"

$ source .bashrc

Reload the shell by typing the command above.

$ sdkmanager --list

Verify that it is added correctly through the command.

Install Packages

$ sdkmanager --install "platform-tools" "platforms;android-29" "build-tools;29.0.2" "emulator" "platforms;android-28" "build-tools;28.0.3"

These are SDK packages that Flutter needs. If you enter the above command, it will be downloaded at once.

Flutter Android SDK Path

It should be set so that the path of the Android SDK can be found on the Flutter.

$ flutter config --android-sdk /home/<your account name>/Android

Flutter Licenses

$ flutter doctor --android-licenses

All you have to do is press y.

Install Chrome

$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

$ sudo apt install ./google-chrome-stable_current_amd64.deb

Install Android Studio

It cannot be used because there is no GUI environment anyway, but it only installs it.

$ sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

$ sudo add-apt-repository ppa:maarten-fonville/android-studio

Conclusion

Perhaps if you have followed all of the above processes, it will be implemented without any problems.

If you follow the above process but get an error, please add a comment.
Maybe I went through it, but I forgot and didn't upload it.
Good Luck Flutter Devs!

Fall and Bounce Animation in Flutter

JH Jeong — Thu, 07 Apr 2022 14:33:07 +0000

As you can see from my previous posts, I have recently been making various animations on Canvas on Flutter. This time, I implemented an animation in which the ball actually falls freely. In the process of making this, I found some parts that I didn't know and misunderstood about Flutter's animation, and I'm going to write several trials and errors.

Skeleton Code

First, the Skeleton code for implementing Bounce Ball is "Drag and Drop" of the previous article.
Drag and Drop in Flutter Canvas
It's because it's fun to have an interaction even if it's.

Widgets

child: AnimatedBuilder(
                animation: _animationController,
                builder: (context, child) {
                  return Container(
                    width: 300,
                    height: 300,
                    color: Colors.white70,
                    child: CustomPaint(
                      painter: _paint(ballPath: ball.draw),
                    ),
                  );
                }
              )

class _paint extends CustomPainter {
  final Path ballPath;

  _paint({
    required this.ballPath,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.brown
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    Path path = Path();
    path.addPath(ballPath, Offset.zero);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Let's wrap the child of the Gesture Detector with the Animated Builder. And I created a _paint class that inherits CustomPainter. At this time, unlike before, the path was handed over as a factor, which is to view the ball as an object. (I'll go into more detail below.)

To draw the ballPath, add it to the path as an addPath function.

Ball Object

The ball will be controlled by turning it into an object. This is because the movement of the ball needs to be manipulated in more detail, so it becomes very complicated when the variables are created separately.

class myBall{
  late double xPos;
  late double yPos;
  late double xVel;
  late double yVel;
  late double ballRad;
  late Path draw;
  double baseTime = 0.002;

  myBall.origin(){
    xPos=100;
    yPos=100;
    xVel=0;
    yVel=0;
    ballRad=20;
    draw=Path();
    for(double i=0; i<ballRad-1; i++){
      draw.addOval(Rect.fromCircle(
          center: Offset(
              xPos, yPos
          ),
          radius: i
      ));
    }
  }

  void stop(){
    xVel=0;
    yVel=0;
  }

  void outVel(){
    if(yVel.abs()<10){
      yVel=0;
    }
    if(xVel.abs()<10){
      xVel=0;
    }
  }

  void setPosition(double x, double y){
    xPos=x;
    yPos=y;
  }

  bool isBallRegion(double checkX, double checkY){
    if((pow(xPos-checkX, 2)+pow(yPos-checkY, 2))<=pow(ballRad, 2)){
      return true;
    }
    return false;
  }

  void updateDraw(){
    draw=Path();
    for(double i=0; i<ballRad-1; i++){
      draw.addOval(Rect.fromCircle(
          center: Offset(
            xPos,
            yPos,
          ),
          radius: i
      ));
    }
  }

  void updateAnimation(double animationValue){
    draw=Path();
    for(double i=0; i<ballRad-1; i++){
      draw.addOval(Rect.fromCircle(
          center: Offset(
            xPos + animationValue*xVel*baseTime,
            yPos + animationValue*yVel*baseTime,
          ),
          radius: i
      ));
    }
  }
}

As instance variables, the position of the ball, the speed value of the ball, and the shape of the ball, Path, were declared. And I added some instance methods to control these variables.

stop() sets all the ball speeds to zero.
outVel() is to stop the ball when the speed of the ball is less than a specific value. This is because the ball cannot be repeated indefinitely in the process of free fall and bounce back.
setPosition() specifies the position of the ball
The isBallRegion() determines whether the coordinates of the factor are included in the ball.
updateDraw() and updateAnimation() modify the path of the ball to make the ball move.

There are some methods that can be operated, which I hope you can check at the Github link at the end of this article.

Free Fall's Variable

Now let's declare some variables for free fall.

  bool isClick = false;
  bool isClickAfter = true;
  var ball = myBall.origin();
  late AnimationController _animationController;
  double baseTime = 0.016;
  double accel = 1000;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 10)
    );
    _animationController.repeat();
  }

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

The isClick is necessary to prevent movement while the ball is clicked.
The isClickAfter is needed to make isClick run as true in the last refresh when isClick becomes false in true.
BaseTime is a variable that tells how many seconds to calculate the movement of the ball. I set the flutter to 60 fps and refresh to 16 ms.
The acceleration of accel is set to 1000, which is similar to the actual 980 cm/s^2.

Free Fall Calculation

builder: (context, child) {
                  if (!isClick) {
                    if (ball.yVel!=0 || isClickAfter) {
                      ball.addYvel(baseTime * accel);
                      ball.subYpos(0.5 * accel * pow(baseTime, 2) - ball.yVel * baseTime);
                      ball.updateAnimation(_animationController.value);
                      isClickAfter=false;
                      if ((ball.yVel>0)&&(ball.yVel.abs()* _animationController.value*baseTime + ball.yPos + ball.ballRad >= 300)) {
                        ball.mulYvel(-0.7);
                        ball.outVel();
                      }
                    }
                  }
                  return Container(
                    width: 300,
                    height: 300,
                    color: Colors.white70,
                    child: CustomPaint(
                      painter: _paint(ballPath: ball.draw),
                    ),
                  );
                }

The following operations were put into the builder of the Animated Builder. Each time the builder plays, the speed of the ball increases by base time and the ball moves. If the velocity of the ball is positive (direction toward the ground) and the position of the ball exceeds the floor, it is determined that it has hit the floor and multiplied by -0.7 to the y-pull velocity. The reason for the negative number is that the direction of the y-axis velocity is changed and multiplied by 0.7, and it is assumed that there is an energy loss.

There was quite a bit of trial and error to make this part. It was due to the variability of the _animationController.value. This is because the _animationController.value went from 0 to 1 as a non-continuous value each time the same Duration was set. For this reason, it was detected several times in a row that the ball speed became zero at once (0.7 X 0.7 X ... = 0) To deal with it, I was able to create several additional restrictions on the if statement to make it work.

Conclusion

I initially intended to implement this using addStatusListener in the same way as this. And it was actually implemented and it looked like it worked well. (First Trial)

However, the more I did it, the more I felt that it was lagging, and I tried to solve this problem. So looking at the code, I wondered why addStatusListener wanted to control the variable. This is because there is no point in using Animated Builder.
I didn't know how Animated Builder was refreshed until now. Whenever _animationController.value changes in the builder in the Animated Builder, refresh together. In other words, I wasn't using Animated Builder, I was just rebuilding the entire screen every specific cycle and creating animations...! So there's gonna be a lot of lags.

But I'm glad I realized it now.
Now I'm going to try to develop it a little bit more and challenge the physical engine.

Full Code

Final Code

Drag and Drop in Flutter Canvas

JH Jeong — Tue, 05 Apr 2022 18:05:29 +0000

Drag and Drop (hereinafter DnD) is often used for interaction when configuring UI. Flutter supports Drag and Drop with a widget called Draggable.
Flutter Dev. Draggable Widget
Flutter's official YouTube shows how to use Draggable Widget kindly.

DnD in Canvas

To DnD the Widget, Flutter supports a widget called Dragable, but I wanted to DnD one path on CustomPaint's Canvas, not a widget. What should I do now? As a result of searching StackOverFlow, it seemed that there was no widget or method for this only(except pub dev). So, I decided to implement it directly as a GestureDetector Widget.

Code

This is the result of implementation. I drew a ball in Canvas, and when I click the ball, it becomes DnD.

Skeleton Code

  dynamic _balls;
  double xPos = 100;
  double yPos = 100;

 @override
  Widget build(BuildContext context) {
    _balls=_paint(
        xPosition: xPos,
        yPosition: yPos,
        ballRad: 20
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("Drag and Drop"),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.lightBlueAccent,
          child: CustomPaint(
            painter: _balls,
          ),
         ),
        )
      );
  }

class _paint extends CustomPainter {
  final xPosition;
  final yPosition;
  final ballRad;

  _paint({
    required this.xPosition,
    required this.yPosition,
    required this.ballRad,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.indigoAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    Path path = Path();

    for(double i=0; i<ballRad-1; i++){
      path.addOval(Rect.fromCircle(
          center: Offset(
            xPosition,
            yPosition
          ),
          radius: i
      ));
    }
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Basically, we have to draw a ball. I create a _paint class that inherits CustomPaint and declares a dynamic type _paint object called _balls. In this case, the _paint designates xPosition, yPosition, and ballRadius as required.

A ball of radius 20 is drawn on the result screen of the above code. Now let's implement DnD.

Is Ball Region?

  bool isBallRegion(double checkX, double checkY){
    if((pow(xPosition-checkX, 2)+pow(yPosition-checkY, 2))<=pow(ballRad, 2)){
      return true;
    }
    return false;
  }

Let's create an instance method that can simply determine if a particular coordinate in Canvas is empty. This can be easily made through the inequality of the circle in the high school math course.

GestureDetector

This is the widget that I will use to implement DnD. GestureDetector Widget is a widget that can recognize various types of gestures of a user. If you look at flutter docs, you can see a lot of methods.

GestureDetector(
          onHorizontalDragDown: (details) {

          },
          onHorizontalDragEnd: (details) {

          },
          onHorizontalDragUpdate: (details) {

          },

          child: Container(
            width: 300,
            height: 300,
            color: Colors.lightBlueAccent,
            child: CustomPaint(
              painter: _balls,
            ),
          ),
        )

Wrap the Gesture Detector on the Custom Paint Widget above. In the GestureDetector, we will use onHorizontalDragDown, onHorizontalDragEnd, and onHorizontalDragUpdate.

onHorizontalDragDown is when you start Drag
onHorizontalDragEnd is used at the end of Drag(=Drop)
onHorizontalDragUpdate is executed when Drag is performed.

details.localPosition.dx
details.localPosition.dy

In each function, the coordinate value of the mouse or touch can be known through the information in details. I'm going to use this information. First, let's declare a variable that can determine whether we are clicking (touching).

bool isClick = false;

This variable becomes true when onHorizontalDragDown and false again when onHorizontalDragEnd to determine if it is being touched.

          onHorizontalDragDown: (details) {
            setState(() {
              if (_balls.isBallRegion(details.localPosition.dx, details.localPosition.dy)) {
                isClick=true;
              }
            });
          },
          onHorizontalDragEnd: (details) {
            setState(() {
              isClick=false;
            });
          },
          onHorizontalDragUpdate: (details) {
            if(isClick){
              setState(() {
                xPos=details.localPosition.dx;
                yPos=details.localPosition.dy;
              });
            }
          },

If we drag a part other than the ball in onHorizontalDragDown, nothing should happen, so let's call the isBallRegion method that we created above in the if statement. As a parameter of the method, details.localPosition, that is, the touch coordinate value is passed over.
In addition, onHorizontalDragUpdate updates the new x-coordinate value and y-coordinate value every moment of drag.

Conclusion

Done. To implement this, I saw various Widgets related to touch such as draggable, FestureDetector, and Inkwell in flutter docs, and I think there will be many things to use in the future. And I'm excited that I can make more fun things through this!

Infinite Variable Animation in Flutter (Reflecting Ball)

JH Jeong — Sat, 02 Apr 2022 16:17:27 +0000

I've been looking into Flutter's animation lately. As Flutter begins to support the web, I think customizing animation is a very essential element for competitiveness in html, css, etc.

Basic Animations in Flutter

Flutter 2.0 basically supports many animation widgets. We can use built-in animation widgets like Fade Transition, Scale Transition widgets. A more complex animation can be implemented through AnimatedBuilder, TweenAnimationBuilder, etc. And we create the AnimationController class to run and control animations. But from what I've experienced, these animations always show the same animations. (You may not understand the meaning of this sentence. If you keep reading my writing, you'll realize what I'm trying to say!) I want to create a more interesting animation on flutter!

Reflecting Ball Animation

   ReflectBall(
          ballRad: 20,
          mapXsize: 300,
          mapYsize: 500,
          xPosition: 100,
          yPosition: 200,
          xSpeed: 4,
          ySpeed: 4,
        );

This is the animation widget I want to create.
Let's take a look at my code that embodies this animation.

Factors

As in the code above, we need several factors to make this animation. Ball's radius, size of space in which the ball moves, initial position of the ball and initial ball speed. Therefore, since these factors are essential, set required in the ReflectBall widget class.

class ReflectBall extends StatefulWidget {
  final double mapXsize;
  final double mapYsize;
  final double xPosition;
  final double yPosition;
  final int ballRad;
  final double xVector;
  final double yVector;
  final double xSpeed;
  final double ySpeed;

  const ReflectBall({Key? key,
    required this.mapXsize,
    required this.mapYsize,
    required this.xPosition,
    required this.yPosition,
    required this.ballRad,
    this.xVector = 1,
    this.yVector = 1,
    required this.xSpeed,
    required this.ySpeed
  }) : super(key: key);

  @override
  _ReflectBallState createState() => _ReflectBallState();
}

Infinite Animation

This animation should basically work endlessly. In general, there are several simple ways to implement infinite animation.

Set Duration very long

AnimationController(
        vsync: this,
        duration: Duration(seconds: 1000)
    );

Strictly speaking, it's not an infinite animation, but you'll be able to create an animation that lasts a long time.

Repeat() Method

_animationController.repeat();

If you run this method in initState() part, the animation will repeat over and over.

addStatusListener

_animationController.forward();
_animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

This is a method of controlling animation through AnimationStatus information. Consider some animation that changes A to B. If this method is used, A to B animation and B to A animation will continue to be repeated in order.

As you all know, if you just use this method, the same animation will continue to run constantly. What I need is not the same animation. In our animation, the ball constantly changes its position and direction depending on the conditions. I defined this ever-changing animation as "Variable Animation" as in the title of this article. And I finally came up with a way to implement it!

Infinite Variable Animation

What is the relationship between Animation and AnimationStatus? If you look at the animations.dart file, you can see the following comments.

  // The result of this function includes an icon describing the status of this
  // [Animation] object:
  //
  // * "&#x25B6;": [AnimationStatus.forward] ([value] increasing)
  // * "&#x25C0;": [AnimationStatus.reverse] ([value] decreasing)
  // * "&#x23ED;": [AnimationStatus.completed] ([value] == 1.0)
  // * "&#x23EE;": [AnimationStatus.dismissed] ([value] == 0.0)

That is, [value] having a value from 0 to 1 determines status. So I wrote the code as follows.

    _animationController.forward();
    _animationController.addStatusListener((status) {
      if(status == AnimationStatus.completed ){
        });
        _animationController.value=0;
        _animationController.forward();
      }
    });

The _animationController.value changes continuously from 0 to 1 by .forward() in the first line. When the value is 1, the animation status becomes completed and enters the if statement. Next, if we set the value to 0, then again .forward() can be executed. In other words, this code functions the same as .repeat().

    _animationController.forward();
    _animationController.addStatusListener((status) {
      if(status == AnimationStatus.completed ){
        setState(() {
          if(xPos >= (widget.mapXsize - widget.ballRad) || xPos <= widget.ballRad){
            xVec*=-1;
          }
          if(yPos >= (widget.mapYsize - widget.ballRad) || yPos <= widget.ballRad){
            yVec*=-1;
          }

          xPos+=widget.xSpeed*xVec;
          yPos+=widget.ySpeed*yVec;

        });
        _animationController.value=0;
        _animationController.forward();
      }
    });

Here, we can add a setState statement to create an animation that keeps changing. In the above code, the code in the setState statement is a code that keeps changing the direction of the ball and the position of the ball. If the ball gets out from the size of the map set, the vector value must be inverted to move the ball in the opposite direction. The position of the ball is multiplied by the speed value, which is a scalar value, and the vector value to set a new position value. Since the screen is two-dimensional, the x-axis and y-axis must be set according to vector decomposition.

Build Widgets

It's almost done now.

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return Container(
          width: widget.mapXsize,
          height: widget.mapYsize,
          color: Colors.lightGreen,
          child: CustomPaint(
            painter: _ball(
              animationValue: _animationController.value,
              xVector: xVec,
              yVector: yVec,
              xPosition: xPos,
              yPosition: yPos,
              ballRad: widget.ballRad,
              xSpeed: widget.xSpeed,
              ySpeed: widget.ySpeed
            ),
          ),
        );
      },
    );
  }

class _ball extends CustomPainter {
  final animationValue;
  final xPosition;
  final yPosition;
  final xVector;
  final yVector;
  final ballRad;
  final xSpeed;
  final ySpeed;

  _ball({
    required this.animationValue,
    required this.xPosition,
    required this.yPosition,
    required this.xVector,
    required this.yVector,
    required this.ballRad,
    required this.xSpeed,
    required this.ySpeed,

  });

  @override
  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()
      ..color = Colors.indigoAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    Path path = Path();

    for(double i=0; i<ballRad; i++){
      path.addOval(Rect.fromCircle(
        center: Offset(
          xPosition + animationValue*xSpeed*xVector,
          yPosition + animationValue*ySpeed*yVector,
        ),
        radius: i
      ));
    }
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

I used Animated Builder and Custom Paint for drawing the ball. To draw a variable ball, painter class need several factors. I used the addOval method with for statement to draw a full ball, but there will be many ways to draw a ball.

Conclusion

I'm not sure if this code I wrote is the perfect code to meet what I'm trying to make. Many improvements may be needed in areas such as optimization. However, I have great significance in that I solved the answers myself that I didn't get through googling. Even if it's not the perfect answer.

If there is a problem with my code or if there is a better direction, please leave a comment! Thank you for reading my long article.

Full Code

import 'package:flutter/material.dart';

class ReflectBall extends StatefulWidget {
  final double mapXsize;
  final double mapYsize;
  final double xPosition;
  final double yPosition;
  final int ballRad;
  final double xVector;
  final double yVector;
  final double xSpeed;
  final double ySpeed;

  const ReflectBall({Key? key,
    required this.mapXsize,
    required this.mapYsize,
    required this.xPosition,
    required this.yPosition,
    required this.ballRad,
    this.xVector = 1,
    this.yVector = 1,
    required this.xSpeed,
    required this.ySpeed
  }) : super(key: key);

  @override
  _ReflectBallState createState() => _ReflectBallState();
}

class _ReflectBallState extends State<ReflectBall> with SingleTickerProviderStateMixin{
  late AnimationController _animationController;
  late double xPos;
  late double yPos;
  late double xVec;
  late double yVec;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    xPos = widget.xPosition;
    yPos = widget.yPosition;
    xVec = widget.xVector;
    yVec = widget.yVector;

    _animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 1)
    );
    _animationController.forward();

    _animationController.addStatusListener((status) {
      if(status == AnimationStatus.completed ){
        setState(() {
          if(xPos >= (widget.mapXsize - widget.ballRad) || xPos <= widget.ballRad){
            xVec*=-1;
          }
          if(yPos >= (widget.mapYsize - widget.ballRad) || yPos <= widget.ballRad){
            yVec*=-1;
          }

          xPos+=widget.xSpeed*xVec;
          yPos+=widget.ySpeed*yVec;

        });
        _animationController.value=0;
        _animationController.forward();
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return Container(
          width: widget.mapXsize,
          height: widget.mapYsize,
          color: Colors.lightGreen,
          child: CustomPaint(
            painter: _ball(
              animationValue: _animationController.value,
              xVector: xVec,
              yVector: yVec,
              xPosition: xPos,
              yPosition: yPos,
              ballRad: widget.ballRad,
              xSpeed: widget.xSpeed,
              ySpeed: widget.ySpeed
            ),
          ),
        );
      },
    );
  }
}

class _ball extends CustomPainter {
  final animationValue;
  final xPosition;
  final yPosition;
  final xVector;
  final yVector;
  final ballRad;
  final xSpeed;
  final ySpeed;

  _ball({
    required this.animationValue,
    required this.xPosition,
    required this.yPosition,
    required this.xVector,
    required this.yVector,
    required this.ballRad,
    required this.xSpeed,
    required this.ySpeed,

  });

  @override
  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()
      ..color = Colors.indigoAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    Path path = Path();

    for(double i=0; i<ballRad; i++){
      path.addOval(Rect.fromCircle(
        center: Offset(
          xPosition + animationValue*xSpeed*xVector,
          yPosition + animationValue*ySpeed*yVector,
        ),
        radius: i
      ));
    }
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

DEV Community: JH Jeong

Generating Word Cloud in Flutter

Word Cloud

Contents

WordCloudData

WordCloudView

mapcolor

colorlist

shape

fontStyle, fontWeight, fontFamily

mintextsize & maxtextsize

decoration

attempt

WordCloudTap

WordCloudTapView

Using a simple 2D physical engine on the Flutter

Easy Physics 2D

Installation

Usage

Example Code

Conclusion

Building a Flutter Dev Environment on a Linux Server Without a GUI Environment

Motivation

Sources

Linux Server

Install Openjdk

Install Flutter SDK

Install cmdline tools

Install Packages

Flutter Android SDK Path

Flutter Licenses

Install Chrome

Install Android Studio

Conclusion

Fall and Bounce Animation in Flutter

Skeleton Code

Widgets

Ball Object

Free Fall's Variable

Free Fall Calculation

Conclusion

Full Code

Drag and Drop in Flutter Canvas

DnD in Canvas

Code

Skeleton Code

Is Ball Region?

GestureDetector

Conclusion

Infinite Variable Animation in Flutter (Reflecting Ball)

Basic Animations in Flutter

Reflecting Ball Animation

Factors

Infinite Animation

Infinite Variable Animation

Build Widgets

Conclusion

Full Code