Change gradient color dynamically in the Flutter
You can use dynamic gradient color concept to design the Instagram login UI

Introduction
Today’s flutter tutorial is about a gradient design. I will show you how to change the gradient color dynamically just like the old Instagram login page UI. We will design a flutter app with a gradient view whose color will change dynamically.
Implementation
Let’s start the implementation part now. Create a new flutter project in Android Studio and name it something like ‘Instagram_gradient_login_UI’. Remove all the boiler code snippets.
Related Post: Dynamic gradient view in android
How to animate gradient in flutter?
Open the ‘main.dart’ and copy the below code.
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation animation;
@override
void initState() {
// TODO: implement initState
animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 5000));
animationController.repeat(reverse: true);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController)..addListener(() {
setState(() {
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
//startAnim();
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment(animation.value,animation.value),
focal: Alignment( 0.3, - animation.value + 0.6),
focalRadius: 1.5,
colors: [Colors.purple,Colors.deepPurple, Colors.purple])
),
)
),
);
}
}
Now run the code. If you have done everything correctly till here then you should get it running. Let me know in the comment section if you are facing any issues.
Let me explain to you what I am doing in the above code. As you can see I am using a RadialGradient
widget. And using the animation.value
I am just updating the center
and the focal
properties of the gradient view. Isn’t simple 🦹🏻♂️?
Subscribe YouTube: More tutorials like this
I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!
FAQs
- How to animate color in flutter?
Animating the colors is nothing but a dynamic gradient view. And you can easily animate the gradient view in flutter using the
Animation Controller
andAnimation
.
android android beginners tutorial android tutorial Animation API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase remote config firebase tutorials flutter flutter for beginner flutter tutorial flutter UI tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial kotlin listview in flutter Lottie animation Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch wifi wifi hacking