Flutter颜色映射插件color_map的使用
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
更多关于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.ColorMapper
和cmap.ContinuousColorScale
来创建一个颜色映射器,并使用getColorForValue
方法获取对应数值的颜色。
请确保你理解这些代码是如何工作的,并根据你的实际需求进行调整。