CODEWITHSUNDEEP
flutterdartanimationborder
who-aditya-nawandar
who-aditya-nawandar

Reputation: 1342

Flutter - How to create a wiggly animation?

I am new to flutter and I am trying to create something like this:

enter image description here

It doesn't have to be exactly like this but something similar and more importantly, easy to implement, is what I am looking for.

I don't even know where to start.

Upvotes: 1

Views: 1129

Answers (3)

Kaushik Chandru
Kaushik Chandru

Reputation: 17772

Use blobs

Create an animated blob like this

Blob.animatedRandom(
 size:200,
 edgesCount:5,
 minGrowth:4,
 duration:  Duration(milliseconds:500),
 styles:  BlobStyles(
 color:  Colors.red,
 fillType:  BlobFillType.stroke,
 strokeWidth:3,
 ),
),

Wrap it with an animated container and rotate it in loops. Adjust values as required. You can also use it in a stack to achieve results as shown in the question.

Upvotes: 3

Vicky_Vignesh
Vicky_Vignesh

Reputation: 592

For the Animation like below, you can implement with https://lottiefiles.com as @Ruchit advised. This is the best and way more time saving option available.

I have updated some with your color scheme

From pub.dev Lottie package you can implement to your Application

NOTE: You can check with your designer if available and get the json file

Here is the output little similar to yours Here is the output little similar to yours

Upvotes: 1

Ruchit
Ruchit

Reputation: 2700

if you want to display only animation that is not depend or control by any flutter variable then lottie is easiest way to do it, it is as simple as display an image.

select animation from lotties free market, then import package lottie from pub.dev, link

and then use as you display an image like below,

// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),

// Load a Lottie file from a remote url
Lottie.network('https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),

here's something i found that is may suitable for your need.

Upvotes: 1

Related Questions