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,)),
],
),
),
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.
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.
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)))
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),
],
),
),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With