如何在Flutter中为图标设置渐变色？

Question

如何使图标的颜色渐变？

请参见下面的示例：

Click Here to see the Example

截至目前我的代码...

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,)),
              ],
            ),
          ),

Answer 1

您可以使用ShaderMask您可以在下面运行完整的代码

代码段

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)))

完整代码

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),
            ],
          ),
        ),
      ),
    );
  }
}