Flutter颜色映射插件color_map的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter颜色映射插件color_map的使用

特性

更多关于颜色映射的信息,请查看 Matplotlib颜色映射选择指南

开始使用

在你的项目中添加color_map依赖项:

dependencies:
  color_map: ^版本号

然后导入插件:

import 'package:color_map/color_map.dart';

使用

颜色映射(Colormap)是可以调用的。它接受从0到1的双精度浮点数。

void main() {
    final cmap = Colormaps.jet;
    final result = [];
    for (int i = 0; i < 256; i++) {
        result.add(cmap(i / 255));
    }
}

颜色映射列表

final colormaps = [
  "Blues", "BrBG", "BuGn", "BuPu", "CMRmap", "GnBu", "Greens", "Greys", "OrRd", "Oranges", "PRGn", "PiYG", "PuBu", "PuBuGn", "PuOr", "PuRd", "Purples", "RdBu", "RdGy", "RdPu", "RdYlBu", "RdYlGn", "Reds", "Spectral", "Wistia", "YlGn", "YlGnBu", "YlOrBr", "YlOrRd", "afmhot", "autumn", "binary", "bone", "brg", "bwr", "cool", "coolwarm", "copper", "cubehelix", "flag", "gist_earth", "gist_gray", "gist_heat", "gist_ncar", "gist_rainbow", "gist_stern", "gist_yarg", "gnuplot", "gnuplot2", "gray", "hot", "hsv", "jet", "nipy_spectral", "ocean", "pink", "prism", "rainbow", "seismic", "spring", "summer", "terrain", "winter", "Accent", "Dark2", "Paired", "Pastel1", "Pastel2", "Set1", "Set2", "Set3", "tab10", "tab20", "tab20b", "tab20c", "magma", "inferno", "plasma", "viridis", "cividis", "twilight", "twilight_shifted", "turbo", "Blues_r", "BrBG_r", "BuGn_r", "BuPu_r", "CMRmap_r", "GnBu_r", "Greens_r", "Greys_r", "OrRd_r", "Oranges_r", "PRGn_r", "PiYG_r", "PuBu_r", "PuBuGn_r", "PuOr_r", "PuRd_r", "Purples_r", "RdBu_r", "RdGy_r", "RdPu_r", "RdYlBu_r", "RdYlGn_r", "Reds_r", "Spectral_r", "Wistia_r", "YlGn_r", "YlGnBu_r", "YlOrBr_r", "YlOrRd_r", "afmhot_r", "autumn_r", "binary_r", "bone_r", "brg_r", "bwr_r", "cool_r", "coolwarm_r", "copper_r", "cubehelix_r", "flag_r", "gist_earth_r", "gist_gray_r", "gist_heat_r", "gist_ncar_r", "gist_rainbow_r", "gist_stern_r", "gist_yarg_r", "gnuplot_r", "gnuplot2_r", "gray_r", "hot_r", "hsv_r", "jet_r", "nipy_spectral_r", "ocean_r", "pink_r", "prism_r", "rainbow_r", "seismic_r", "spring_r", "summer_r", "terrain_r", "winter_r", "Accent_r", "Dark2_r", "Paired_r", "Pastel1_r", "Pastel2_r", "Set1_r", "Set2_r", "Set3_r", "tab10_r", "tab20_r", "tab20b_r", "tab20c_r", "magma_r", "inferno_r", "plasma_r", "viridis_r", "cividis_r", "twilight_r", "twilight_shifted_r", "turbo_r"
];

示例代码

import 'package:flutter/material.dart';
import 'package:color_map/color_map.dart';
import 'package:vector_math/vector_math_64.dart' show Vector4;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Colormaps'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: ListView.builder(
        itemCount: colormapMap.length,
        itemBuilder: (context, index) {
          final colormap = colormapMap.values.elementAt(index);
          return ListTile(
            title: Text(colormapMap.keys.elementAt(index)),
            subtitle: SizedBox(
              height: 50,
              child: ColormapView(colormap: colormap)
            ),
          );
        },
      ),
    );
  }
}

class ColormapView extends StatelessWidget {
  const ColormapView({super.key, required this.colormap});
  final Colormap colormap;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.maxWidth;
        final height = constraints.maxHeight;
        return Row(
          children: List.generate(
            colormap.n,
            (index) => Container(
              width: width / colormap.n,
              height: height,
              color: colormap(index / (colormap.n - 1)).toColor(),
            )
          ),
        );
      },
    );
  }
}

extension ColorTransform on Vector4 {
  Color toColor() {
    return Color.fromARGB(
      (w * 255).toInt(),
      (x * 255).toInt(),
      (y * 255).toInt(),
      (z * 255).toInt(),
    );
  }
}

final colormapMap = {
  "Blues": Colormaps.Blues,
  "BrBG": Colormaps.BrBG,
  "BuGn": Colormaps.BuGn,
  "BuPu": Colormaps.BuPu,
  "CMRmap": Colormaps.CMRmap,
  "GnBu": Colormaps.GnBu,
  "Greens": Colormaps.Greens,
  "Greys": Colormaps.Greys,
  "OrRd": Colormaps.OrRd,
  "Oranges": Colormaps.Oranges,
  "PRGn": Colormaps.PRGn,
  "PiYG": Colormaps.PiYG,
  "PuBu": Colormaps.PuBu,
  "PuBuGn": Colormaps.PuBuGn,
  "PuOr": Colormaps.PuOr,
  "PuRd": Colormaps.PuRd,
  "Purples": Colormaps.Purples,
  "RdBu": Colormaps.RdBu,
  "RdGy": Colormaps.RdGy,
  "RdPu": Colormaps.RdPu,
  "RdYlBu": Colormaps.RdYlBu,
  "RdYlGn": Colormaps.RdYlGn,
  "Reds": Colormaps.Reds,
  "Spectral": Colormaps.Spectral,
  "Wistia": Colormaps.Wistia,
  "YlGn": Colormaps.YlGn,
  "YlGnBu": Colormaps.YlGnBu,
  "YlOrBr": Colormaps.YlOrBr,
  "YlOrRd": Colormaps.YlOrRd,
  "afmhot": Colormaps.afmhot,
  "autumn": Colormaps.autumn,
  "binary": Colormaps.binary,
  "bone": Colormaps.bone,
  "brg": Colormaps.brg,
  "bwr": Colormaps.bwr,
  "cool": Colormaps.cool,
  "coolwarm": Colormaps.coolwarm,
  "copper": Colormaps.copper,
  "cubehelix": Colormaps.cubehelix,
  "flag": Colormaps.flag,
  "gist_earth": Colormaps.gist_earth,
  "gist_gray": Colormaps.gist_gray,
  "gist_heat": Colormaps.gist_heat,
  "gist_ncar": Colormaps.gist_ncar,
  "gist_rainbow": Colormaps.gist_rainbow,
  "gist_stern": Colormaps.gist_stern,
  "gist_yarg": Colormaps.gist_yarg,
  "gnuplot": Colormaps.gnuplot,
  "gnuplot2": Colormaps.gnuplot2,
  "gray": Colormaps.gray,
  "hot": Colormaps.hot,
  "hsv": Colormaps.hsv,
  "jet": Colormaps.jet,
  "nipy_spectral": Colormaps.nipy_spectral,
  "ocean": Colormaps.ocean,
  "pink": Colormaps.pink,
  "prism": Colormaps.prism,
  "rainbow": Colormaps.rainbow,
  "seismic": Colormaps.seismic,
  "spring": Colormaps.spring,
  "summer": Colormaps.summer,
  "terrain": Colormaps.terrain,
  "winter": Colormaps.winter,
  "Accent": Colormaps.Accent,
  "Dark2": Colormaps.Dark2,
  "Paired": Colormaps.Paired,
  "Pastel1": Colormaps.Pastel1,
  "Pastel2": Colormaps.Pastel2,
  "Set1": Colormaps.Set1,
  "Set2": Colormaps.Set2,
  "Set3": Colormaps.Set3,
  "tab10": Colormaps.tab10,
  "tab20": Colormaps.tab20,
  "tab20b": Colormaps.tab20b,
  "tab20c": Colormaps.tab20c,
  "magma": Colormaps.magma,
  "inferno": Colormaps.inferno,
  "plasma": Colormaps.plasma,
  "viridis": Colormaps.viridis,
  "cividis": Colormaps.cividis,
  "twilight": Colormaps.twilight,
  "twilight_shifted": Colormaps.twilight_shifted,
  "turbo": Colormaps.turbo,
  "Blues_r": Colormaps.Blues_r,
  "BrBG_r": Colormaps.BrBG_r,
  "BuGn_r": Colormaps.BuGn_r,
  "BuPu_r": Colormaps.BuPu_r,
  "CMRmap_r": Colormaps.CMRmap_r,
  "GnBu_r": Colormaps.GnBu_r,
  "Greens_r": Colormaps.Greens_r,
  "Greys_r": Colormaps.Greys_r,
  "OrRd_r": Colormaps.OrRd_r,
  "Oranges_r": Colormaps.Oranges_r,
  "PRGn_r": Colormaps.PRGn_r,
  "PiYG_r": Colormaps.PiYG_r,
  "PuBu_r": Colormaps.PuBu_r,
  "PuBuGn_r": Colormaps.PuBuGn_r,
  "PuOr_r": Colormaps.PuOr_r,
  "PuRd_r": Colormaps.PuRd_r,
  "Purples_r": Colormaps.Purples_r,
  "RdBu_r": Colormaps.RdBu_r,
  "RdGy_r": Colormaps.RdGy_r,
  "RdPu_r": Colormaps.RdPu_r,
  "RdYlBu_r": Colormaps.RdYlBu_r,
  "RdYlGn_r": Colormaps.RdYlGn_r,
  "Reds_r": Colormaps.Reds_r,
  "Spectral_r": Colormaps.Spectral_r,
  "Wistia_r": Colormaps.Wistia_r,
  "YlGn_r": Colormaps.YlGn_r,
  "YlGnBu_r": Colormaps.YlGnBu_r,
  "YlOrBr_r": Colormaps.YlOrBr_r,
  "YlOrRd_r": Colormaps.YlOrRd_r,
  "afmhot_r": Colormaps.afmhot_r,
  "autumn_r": Colormaps.autumn_r,
  "binary_r": Colormaps.binary_r,
  "bone_r": Colormaps.bone_r,
  "brg_r": Colormaps.brg_r,
  "bwr_r": Colormaps.bwr_r,
  "cool_r": Colormaps.cool_r,
  "coolwarm_r": Colormaps.coolwarm_r,
  "copper_r": Colormaps.copper_r,
  "cubehelix_r": Colormaps.cubehelix_r,
  "flag_r": Colormaps.flag_r,
  "gist_earth_r": Colormaps.gist_earth_r,
  "gist_gray_r": Colormaps.gist_gray_r,
  "gist_heat_r": Colormaps.gist_heat_r,
  "gist_ncar_r": Colormaps.gist_ncar_r,
  "gist_rainbow_r": Colormaps.gist_rainbow_r,
  "gist_stern_r": Colormaps.gist_stern_r,
  "gist_yarg_r": Colormaps.gist_yarg_r,
  "gnuplot_r": Colormaps.gnuplot_r,
  "gnuplot2_r": Colormaps.gnuplot2_r,
  "gray_r": Colormaps.gray_r,
  "hot_r": Colormaps.hot_r,
  "hsv_r": Colormaps.hsv_r,
  "jet_r": Colormaps.jet_r,
  "nipy_spectral_r": Colormaps.nipy_spectral_r,
  "ocean_r": Colormaps.ocean_r,
  "pink_r": Colormaps.pink_r,
  "prism_r": Colormaps.prism_r,
  "rainbow_r": Colormaps.rainbow_r,
  "seismic_r": Colormaps.seismic_r,
  "spring_r": Colormaps.spring_r,
  "summer_r": Colormaps.summer_r,
  "terrain_r": Colormaps.terrain_r,
  "winter_r": Colormaps.winter_r,
  "Accent_r": Colormaps.Accent_r,
  "Dark2_r": Colormaps.Dark2_r,
  "Paired_r": Colormaps.Paired_r,
  "Pastel1_r": Colormaps.Pastel1_r,
  "Pastel2_r": Colormaps.Pastel2_r,
  "Set1_r": Colormaps.Set1_r,
  "Set2_r": Colormaps.Set2_r,
  "Set3_r": Colormaps.Set3_r,
  "tab10_r": Colormaps.tab10_r,
  "tab20_r": Colormaps.tab20_r,
  "tab20b_r": Colormaps.tab20b_r,
  "tab20c_r": Colormaps.tab20c_r,
  "magma_r": Colormaps.magma_r,
  "inferno_r": Colormaps.inferno_r,
  "plasma_r": Colormaps.plasma_r,
  "viridis_r": Colormaps.viridis_r,
  "cividis_r": Colormaps.cividis_r,
  "twilight_r": Colormaps.twilight_r,
  "twilight_shifted_r": Colormaps.twilight_shifted_r,
  "turbo_r": Colormaps.turbo_r,
};

更多关于Flutter颜色映射插件color_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter颜色映射插件color_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用color_map插件的一个简单示例。color_map插件允许你将数值映射到颜色,这在数据可视化等场景中非常有用。

首先,确保你的Flutter项目中已经添加了color_map依赖。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  color_map: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,我们编写一个示例代码来演示如何使用color_map插件。

import 'package:flutter/material.dart';
import 'package:color_map/color_map.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Map Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ColorMapExample(),
    );
  }
}

class ColorMapExample extends StatefulWidget {
  @override
  _ColorMapExampleState createState() => _ColorMapExampleState();
}

class _ColorMapExampleState extends State<ColorMapExample> {
  final List<double> values = [10, 20, 30, 40, 50];
  final List<Color> colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Map Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Mapped Colors:'),
          Expanded(
            child: ListView.builder(
              itemCount: values.length,
              itemBuilder: (context, index) {
                final double value = values[index];
                final Color color = getMappedColor(value, values, colors);
                return Card(
                  child: ListTile(
                    leading: Container(
                      width: 50,
                      height: 50,
                      color: color,
                    ),
                    title: Text('Value: $value'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Color getMappedColor(double value, List<double> values, List<Color> colors) {
    final double minValue = values.reduce((a, b) => math.min(a, b));
    final double maxValue = values.reduce((a, b) => math.max(a, b));
    final double normalizedValue = (value - minValue) / (maxValue - minValue);
    final int index = (normalizedValue * (colors.length - 1)).toInt();
    return colors[index];
  }
}

注意:上面的代码示例中,getMappedColor函数是一个简单的线性插值实现,用于将数值映射到颜色列表中的一个颜色。然而,color_map插件提供了更高级和灵活的功能。下面是如何使用color_map插件的示例代码:

首先,确保color_map插件已正确安装,然后更新_ColorMapExampleState类中的getMappedColor函数:

import 'package:color_map/color_map.dart' as cmap;

// ... 其他代码保持不变 ...

  Color getMappedColor(double value, List<double> values, List<Color> colors) {
    final cmap.ColorMapper mapper = cmap.ColorMapper(colors: colors);
    final cmap.ContinuousColorScale scale = cmap.ContinuousColorScale.fromList(values, mapper);
    return scale.getColorForValue(value)!; // 注意:这里使用了非空断言操作符,确保返回值不为null
  }

在这个更新后的示例中,我们使用cmap.ColorMappercmap.ContinuousColorScale来创建一个颜色映射器,并使用getColorForValue方法获取对应数值的颜色。

请确保你理解这些代码是如何工作的,并根据你的实际需求进行调整。

回到顶部