How can I create Instagram's changing gradient background in flutter

Question

How can I create Instagram like auto changing gradient background color in flutter

Answer 1

I do not know exactly what you mean by "Instagram-like auto changing gradient" but I am guessing you mean a smooth color transition in a container. For that, there are two main approaches.

• The simplest one: use an Animated Container and assign its color property to a local variable that you can change later on using setState() . AnimatedContainer will interpolate the values between the initial and the final color in the states, creating the effect.

• Use an Animated Builder to create a Tween that interpolates colors and control when and how it should change with an AnimationController . In this Medium article you can find more information on this approach.

Answer 2

I also don't know exactly what you mean by "Instagram-like auto changing gradient": but I'm assuming you to reach the same look that instagram gradient has: such as this one

it can be done like this:

 Container(
    margin:
        EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(10)),
    padding: EdgeInsets.all(getProportionateScreenWidth(12)),
    height: getProportionateScreenHeight(44),
    width: getProportionateScreenWidth(44),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomRight,
        colors: [
          Colors.purple,
          Colors.pink,
         Colors.orange,
        ],
      ),
      // color: color,
      shape: BoxShape.circle,
    ),
    child: SvgPicture.asset(icon!,color: Colors.white,),
  ),