Skip to content

Render components in different colors in Flutter

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 100x100 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


Read More

Tags:

Leave a ReplyCancel reply

Exit mobile version