Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set Gradient Color to Icons in Flutter?

Tags:

flutter

dart

How can I make the color of my Icons gradient?

See the example below:

Click Here to see the Example

My Code as of now...

appBar: AppBar(
            backgroundColor: Colors.white,
            bottom: TabBar(
              labelColor: (Colors.blue),
              indicatorColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              tabs: [
                Tab(icon: Icon(Icons.search,size: 40,)),
                Tab(icon: Icon(Icons.star,size: 40,)),
                Tab(icon: Icon(Icons.account_circle,size: 40,)),
              ],
            ),
          ),
like image 871
mdv Avatar asked Oct 30 '19 16:10

mdv


People also ask

How do you color your icons on flutter?

Here's how you do it:Step 1: Locate the MaterialApp widget. Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned. Step 3: Inside the ThemeData add the iconTheme parameter and then assign the IconThemeData . Step 4:Inside the IconThemeData add the color parameter and set its color.

How do you make gradient color in flutter?

Note: In order to implement any type of gradient we need to make use of Box Decoration. The Box Decoration constructor can be assigned to the decoration property of Containers. To add gradients to our widget we will be using the gradient property of the BoxDecoration constructor.


1 Answers

You can use ShaderMask
You can run full code below

code snippet

Tab(icon: ShaderMask(
                    blendMode: BlendMode.srcIn,
                    shaderCallback: (Rect bounds) {
                      return ui.Gradient.linear(
                        Offset(4.0, 24.0),
                        Offset(24.0, 4.0),
                        [
                          Colors.blue[200],
                          Colors.greenAccent,
                        ],
                      );
                    },
                    child: Icon(Icons.search)))

enter image description here

full code

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: TabBarDemo(),
    );
  }
}


class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: ShaderMask(
                    blendMode: BlendMode.srcIn,
                    shaderCallback: (Rect bounds) {
                      return ui.Gradient.linear(
                        Offset(4.0, 24.0),
                        Offset(24.0, 4.0),
                        [
                          Colors.blue[200],
                          Colors.greenAccent,
                        ],
                      );
                    },
                    child: Icon(Icons.search))),
                Tab(icon: ShaderMask(
                    blendMode: BlendMode.srcIn,
                    shaderCallback: (Rect bounds) {
                      return ui.Gradient.linear(
                        Offset(4.0, 24.0),
                        Offset(24.0, 4.0),
                        [
                          Colors.blue[200],
                          Colors.greenAccent,
                        ],
                      );
                    },
                    child: Icon(Icons.star))),
                Tab(icon: ShaderMask(
                    blendMode: BlendMode.srcIn,
                    shaderCallback: (Rect bounds) {
                      return ui.Gradient.linear(
                        Offset(4.0, 24.0),
                        Offset(24.0, 4.0),
                        [
                          Colors.blue[200],
                          Colors.greenAccent,
                        ],
                      );
                    },
                    child: Icon(Icons.account_circle))),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}
like image 94
chunhunghan Avatar answered Nov 15 '22 06:11

chunhunghan