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](
Let's see how this can be achived.
1) 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), )
2) 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 ),
3) 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, ), ) ), ); }}
Thanks,Srikanth