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 🦹🏻‍♂️?

Help me to grow our YouTube Channel: 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

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