How to add multiple colors to a container?

<p>In this example, I'm sharing code on how to add multiple colors to a container. Here is how the final output is going to look. ![](https://fluttercentral.com/Uploads/9853a6c1-a530-4463-aebb-69b07250874f.PNGwidth="50%height="auto](</p> <p>Let's see how this can be achived.</p> <ol> <li>You will create a Container, with 100.0 margin. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #4ec9b0;](Container( margin: color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](all(color: #b5cea8;](100.0), )</li> <li>Add decoration to it. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](decoration: color: #4ec9b0;](BoxDecoration( color: color: #4ec9b0;](Colors.red ),</li> <li>Modify decoration property of the Container to show a List of Colors. In order to achieve this, we will add gradient and pass List of Colors. Along with the direction of colors to be displayed. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](decoration: color: #4ec9b0;](BoxDecoration( gradient: color: #4ec9b0;](LinearGradient( begin: color: #4ec9b0;](Alignment.topLeft, end: color: #4ec9b0;](Alignment.topRight, colors: [color: #4ec9b0;](Colors.orange, color: #4ec9b0;](Colors.red] ), ), Here is the final code from main.dart file. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();} color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](0; color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Container Example"), ), body: color: #4ec9b0;](Container( margin: color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](all(color: #b5cea8;](100.0), decoration: color: #4ec9b0;](BoxDecoration( gradient: color: #4ec9b0;](LinearGradient( begin: color: #4ec9b0;](Alignment.topLeft, end: color: #4ec9b0;](Alignment.topRight, colors: [color: #4ec9b0;](Colors.orange, color: #4ec9b0;](Colors.red] ), shape: color: #4ec9b0;](BoxShape.rectangle, ), ) ), ); }}</li> </ol> <p>Thanks,Srikanth</p>