Flutter颜色选择插件ncscolor的使用

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

Flutter颜色选择插件ncscolor的使用

NCSColor

NCSColor 是一个简单的 Dart 包，用于将 NCS 颜色转换为 RGB、HSL 和 HEX 值，并且可以将 RGB 转换为 HSL 和 RGB 转换为 HEX。

安装

  1. 将以下内容添加到您的包的 pubspec.yaml 文件中：
dependencies:
  ncscolor: any
  1. 使用 IDE 的 GUI 或通过命令行获取该包：
$ pub get
  1. 在您的应用程序中导入 color.dart 文件：
import 'package:ncscolor/ncscolor.dart';

使用

  • 将 NCS 颜色转换为 RGB

    NCSColor(ncsCode: '2060-R60B').toRgb(); // 返回 {r:1, g:58, b:214}

  • 将 NCS 颜色转换为 HSL

    NCSColor(ncsCode: '2060-R60B').toHsl(); // 返回 {h:281, s:66%, l:53%}

  • 将 NCS 颜色转换为 HEX

    NCSColor(nccCode: '2060-R60B').toHex(); // 返回 #a43ad6

  • 将 RGB 转换为 HSL

    ColorConvert.rgbToHsl(r: 164,b: 58,g:214); // 返回 {h:281, s:66%, l:53%}

  • 将 RGB 转换为 HEX

    ColorConvert.rgbToHex(r: 164,b: 58,g:214); // 返回 #a43ad6

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个 widget 是您应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {


  [@override](/user/override)
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text("NCS-Color"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("NCS : '2060-R60B' "),
            Text("ncs to rgp : ${NCSColor(ncsCode: '2060-R60B').toRgb()}"),
            Text("ncs to hsl : ${NCSColor(ncsCode: '2060-R60B').toHsl()}"),
            Text("ncs to hex : ${NCSColor(ncsCode: '2060-R60B').toHex()}"),
            const Divider(),
            const Text("RGB(r: 164,b: 58,g:214)"),
            Text("rgb to hsl : ${ColorConvert.rgbToHsl(r: 164,b: 58,g:214)}"),
            Text("rgb to hex : ${ColorConvert.rgbToHex(r:  e64,b: 58,g:214)}"),

          ],
        ),
      ),
      // 这个尾部逗号使自动格式化更友好于构建方法。
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用ncscolor插件来选择颜色的代码案例。ncscolor是一个用于颜色选择的Flutter插件，允许用户从调色板中选择颜色。

首先，你需要在pubspec.yaml文件中添加ncscolor依赖：

dependencies:
  flutter:
    sdk: flutter
  ncscolor: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter项目中创建一个页面来使用ncscolor插件。以下是一个简单的示例：

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

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

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

class ColorPickerPage extends StatefulWidget {
  @override
  _ColorPickerPageState createState() => _ColorPickerPageState();
}

class _ColorPickerPageState extends State<ColorPickerPage> {
  Color selectedColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: selectedColor,
              child: Center(
                child: Text(
                  '#${selectedColor.value.toRadixString(16).toUpperCase()}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: Text('Select a Color'),
                      content: NCSColorPicker(
                        onColorChanged: (Color color) {
                          setState(() {
                            selectedColor = color;
                          });
                          Navigator.of(context).pop();
                        },
                        initialColor: selectedColor,
                      ),
                    );
                  },
                );
              },
              child: Text('Choose Color'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. MyApp 是应用程序的入口，它定义了应用程序的主题和主页面。
  2. ColorPickerPage 是一个有状态的页面，用于显示当前选中的颜色和提供一个按钮来选择新颜色。
  3. showDialog 方法被用来显示一个对话框，对话框中包含了一个NCSColorPicker组件，允许用户选择颜色。
  4. 当用户选择一个新的颜色时，onColorChanged回调会被触发，更新selectedColor状态，并关闭对话框。

这个示例展示了如何使用ncscolor插件来选择颜色，并在UI中显示选中的颜色。你可以根据需要进一步定制这个组件，例如添加更多的颜色选择选项或调整UI布局。

回到顶部