CODEWITHSUNDEEP
flutterdartcolorstransition
Tobias H.
Tobias H.

Reputation: 494

Flutter smooth color transition container

How can I make say a container with a shaded color like the picture attached?

I do not just use an image, because it would be a lot harder to make thodr small changes to it, and the color needs to be the whole screen width at times, and maybe I'm going to animate it.

https://i.sstatic.net/2QzXC.jpg

Upvotes: 0

Views: 1456

Answers (2)

timilehinjegede
timilehinjegede

Reputation: 14033

You can use the gradient property of the BoxDecoration to get what you want.

I added a demo:

class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              // use your preferred colors 
              Colors.red[900],
              Colors.blue[900],
            ],
            // start at the top
            begin: Alignment.topCenter,
           // end at the bottom
            end: Alignment.bottomCenter,
          ),
        ),
      ),
    );
  }
}

RESULT:

result

Upvotes: 2

Raine Dale Holgado
Raine Dale Holgado

Reputation: 3450

class Gradiant extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
              colors: [Colors.blue[800], Colors.purple, Colors.red],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              stops: [0.2, 0.6, 1]),
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions