Last Updated on 2021-03-18 by Clay
Introduction
When we developing an App using Flutter, presumably everyone hopes to render the colors very beautifully … at least I want to do this.
It’s a pity that I have no any great aesthetics, so I often have to adjust the color of my interface component over and over again. This is a reason why I like Flutter so much. Its hot reload is so convenient.
Today’s main topic is “How to set the color of components in Flutter“.
Let’s start.
Use Colors class to set component’s color
First, let’s look at a simple sample code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Gradient Color Component'),
centerTitle: true,
),
body: setColor(),
),
);
}
}
class setColor extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: 100,
height: 100,
child: Text('TEST'),
);
}
}
Output:
This program is very simple, we just drawn a simple Container which size is 100×100 on the interface, and display a text “TEST”.
This is a bit difficult to judge the position of our Container component, so we can color it.
Select red.
Now we can see the boundaries of the Container.
Color RGBO
Of course, when you see the method of setting colors just now, you must be thinking: Can I only use the preset colors? What if I have a color that I want to use?
Don’t worry. We can use RGB to set the component color.
Replace Colors to Color.fromRGBO().
The values of RGB from 0 to 255, and the opacity is a decimal between 0 to 1, which affects the transparency.
Suppose we set the component to (100, 100, 100, 0.5)：
You can adjust the color you want to try.
Render colors gradually
There is a great way to render the component: gradually change the color.
In Flutter, we can use the gradient in decoration attribute to do it.
This is a sample code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Gradient Color Component'),
centerTitle: true,
),
body: setColor(),
),
);
}
}
class setColor extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: 500,
height: 100,
child: Text('TEST'),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.orange, Colors.yellow]
),
),
);
}
}
Output:
The colors rendered from left to right are red => orange => yellow, isn’t it beautiful?
References
- https://flutter.dev/docs/reference/tutorials
- https://api.flutter.dev/flutter/rendering/RenderImage/color.html