Image 如何从图像中获得主色调?

Image 如何从图像中获得主色调?,image,flutter,dart,colors,color-palette,Image,Flutter,Dart,Colors,Color Palette,我想从图像中提取主色,以便将其作为混合应用于其他图像。我怎样才能做到这一点 在我当前的代码中,我已经手动指定了颜色,但我希望它由应用程序生成 class MyApp extends StatelessWidget { Color face = new HexColor("a8a8a8"); @override Widget build(BuildContext context) { return MaterialApp( home: Sca

我想从图像中提取主色,以便将其作为混合应用于其他图像。我怎样才能做到这一点

在我当前的代码中,我已经手动指定了颜色,但我希望它由应用程序生成

class MyApp extends StatelessWidget {

  Color face = new HexColor("a8a8a8");
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image from assets"),
        ),
        body: Column (
            mainAxisAlignment: MainAxisAlignment.center,
              children:<Widget>[
                Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children:<Widget>[
                      new Image.asset('assets/images/6.jpg',
                        color: face, colorBlendMode:BlendMode.modulate ,
                        fit:BoxFit.cover,
                        height: 50,
                        width: 50,
                      ),


                new Image.asset('assets/images/1.jpg',
              color: face, colorBlendMode: BlendMode.modulate,
            fit:BoxFit.cover,
                  height: 200,
                  width: 200,
          ),
                    ]),
                ])),
    );
  }
}


类MyApp扩展了无状态小部件{
颜色面=新六色(“a8a8a8”);
@凌驾
小部件构建(构建上下文){
返回材料PP(
家:脚手架(
appBar:appBar(
标题:文本(“来自资产的图像”),
),
正文:专栏(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
划船(
mainAxisAlignment:mainAxisAlignment.start,
儿童:[
新建Image.asset('assets/images/6.jpg',
颜色:face,colorBlendMode:BlendMode.modulate,
适合:BoxFit.cover,
身高:50,
宽度:50,
),
新建Image.asset('assets/images/1.jpg',
颜色:face,colorBlendMode:BlendMode.modulate,
适合:BoxFit.cover,
身高:200,
宽度:200,
),
]),
])),
);
}
}

这里有调色板生成器库,即使你在youtube或其他地方搜索,你也可以找到一些结果


我使用调色板生成器找到了解决方案。。 第一导入库

import 'package:palette_generator/palette_generator.dart';
也将其添加到pubspec.yaml文件中

下面的函数将返回调色板

Future<PaletteGenerator>_updatePaletteGenerator ()async
{
  paletteGenerator = await PaletteGenerator.fromImageProvider(
    Image.asset("assets/images/8.jfif").image,
  );
return paletteGenerator;
}
Future\u updatePaletGenerator()异步
{
paletteGenerator=等待paletteGenerator.fromImageProvider(
Image.asset(“assets/images/8.jfif”).Image,
);
返回信号发生器;
}
现在我们可以在未来的构建器中获取它

  FutureBuilder<PaletteGenerator>(
                  future: _updatePaletteGenerator(), // async work
                  builder: (BuildContext context, AsyncSnapshot<PaletteGenerator> snapshot) {
                    switch (snapshot.connectionState) {
                      case ConnectionState.waiting: return Center(child:CircularProgressIndicator());
                      default:
                        if (snapshot.hasError)
                          return new Text('Error: ${snapshot.error}');
                        else {
                         // Color color=new Color(snapshot.data.dominantColor.color);
                          face=snapshot.data.dominantColor.color;
                           return new Text('color: ${face.toString()}');
                              }}})
FutureBuilder(
future:_UpdatePaletGenerator(),//异步工作
生成器:(BuildContext上下文,异步快照){
交换机(快照.连接状态){
案例连接state.waiting:返回中心(子项:CircularProgressIndicator());
违约:
if(snapshot.hasError)
返回新文本('Error:${snapshot.Error}');
否则{
//颜色=新颜色(snapshot.data.dominantColor.Color);
面=snapshot.data.dominantColor.color;
返回新文本('color:${face.toString()}');
}}})

这就是我们如何轻松获取主色的方法

它有不好的文档。我已经读过了,但没有听懂