How to use RGB color in Flutter ? Various Ways

Do you want to know how to use RGB color in Flutter? If yes then you have come to the right place. In this article, you will learn how to color any widgets through flutter RGB color.

How do you specify colors in Flutter?

There are different ways to specify colors in a flutter. You have to use the Color() class for that. Inside it, you can set the color of any widgets of the flutter using various ways.

1. Using hex color code

Color(0xFF42A5F5);

2. Color.fromARGB

Color.fromARGB(int a, int r, int g, int b)

Construct a color from the lower 8 bits of four integers.

3. Color.fromRGBO

Color.fromRGBO(int r, int g, int b, double opacity)

Create a color from red, green, blue, and opacity, similar to rgba() in CSS.

In this example, You will know how to implement flutter RGB color by applying it on different widgets.

1. Applying RGB color on Flutter Container

Flutter Container is the most used widget. It is similar to div layout if you are familiar with web development. Let’s create a Container and apply some color to it.

In flutter, you can change the color of the container using the color attribute. Suppose I want black orange color for the container in RGB then I will use the below code.

color: Color.fromRGBO(255, 165, 0, 1)

Here the first three arguments are for orange color and the last is the opacity for the color. Its value is from 0 to 1.

Complete Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
          child: Container(
              height: 300,
              width: 300,
              color: Color.fromRGBO(255, 165, 0, 1) // Orange color,
              ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

2. Changing color of text using RGB Color

In the same way, you can also change the color of the text using the RGB color. In flutter, you can create a text widget using the Text() constructor and all the styles for the text are done using the style attribute.

For example, I want to change the color of the text to red color then I will define the below attribute.

style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Color.fromRGBO(255, 0, 0, 1))

Complete Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
          child: Text(
            "Welcome to the Code the Best",
            style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Color.fromRGBO(255, 0, 0, 1)),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

3. Apply RGB color on Flutter Button

Now let’s apply RGB color on the Flutter button. Here I will create an Icon Button. You can create the flutter Icon button using the IconButton() class. And to change the color you have defined the color attribute.

Let’s say I want to change the IconButton color to green then I will define the following attribute.

IconButton(
          onPressed: () {
            print("Clicked");
          },
          icon: Icon(Icons.favorite, size: 40),
          color: Color.fromRGBO(0, 128, 0, 1),
        )

Complete Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
            child: IconButton(
          onPressed: () {
            print("Clicked");
          },
          icon: Icon(Icons.favorite, size: 40),
          color: Color.fromRGBO(0, 128, 0, 1),
        )),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

End Notes

There are various ways to change the color of the widget in the flutter. These are the ways to change the color of the widget using the RGB color. You can use the process for any other widgets.

I hope you have liked this article. If you have any doubt then you can contact us for more help.