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.
Let's see how this can be achived.
1) You will create a Container, with 100.0 margin.
Container(
margin: EdgeInsets.all(100.0),
)
2) Add decoration to it.
decoration: BoxDecoration(
color: 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.
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.orange, Colors.red]
),
),
Here is the final code from main.dart file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double padValue = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Container Example"),
),
body: Container(
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.orange, Colors.red]
),
shape: BoxShape.rectangle,
),
)
),
);
}
}
Srikanth