Flutter自定义材质颜色插件custom_material

Flutter自定义材质颜色插件custom_material_color的使用

特性

本插件可以帮助你为你的应用程序主题创建自定义的MaterialColor。只需要一个简单的十六进制颜色值即可工作。

开始使用

在使用此插件之前，你需要准备一个十六进制颜色值。例如：0x3d4856。

使用方法

首先，在你的项目中引入该插件：

dependencies:
  custom_material_color: ^1.0.0

然后，在你的MaterialApp配置中使用MaterialColorFromHex函数来生成自定义的MaterialColor。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建自定义的 MaterialColor
    final customPrimaryColor = MaterialColorFromHex(0x3d4856);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: customPrimaryColor, // 使用自定义的颜色
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 自定义材质颜色'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(color: Theme.of(context).primaryColor),
        ),
      ),
    );
  }
}

在这个示例中，我们通过MaterialColorFromHex函数生成了一个自定义的MaterialColor，并将其设置为主题的主要颜色。这样，你的应用程序的所有组件都可以使用这个颜色。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建自定义的 MaterialColor
    final customPrimaryColor = MaterialColorFromHex(0x3d4856);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: customPrimaryColor, // 使用自定义的颜色
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 自定义材质颜色'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(color: Theme.of(context).primaryColor),
        ),
      ),
    );
  }
}

bupafengyu 1楼

更多关于Flutter自定义材质颜色插件custom_material_color的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在 Flutter 中，custom_material_color 是一个用于自定义 Material 颜色插件的工具。它允许你创建自定义的 Material 颜色，并将其应用到你的 Flutter 应用中。以下是如何使用 custom_material_color 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  custom_material_color: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 custom_material_color 插件：

import 'package:custom_material_color/custom_material_color.dart';

3. 创建自定义 Material 颜色

你可以使用 CustomMaterialColor 类来创建自定义的 Material 颜色。CustomMaterialColor 构造函数需要两个参数：基础颜色和颜色映射。

final Color myCustomColor = Color(0xFF6200EE);

final MaterialColor myCustomMaterialColor = CustomMaterialColor(
  primary: myCustomColor,
  swatch: {
    50: Color(0xFFF2E7FE),
    100: Color(0xFFD8BFFD),
    200: Color(0xFFC096FC),
    300: Color(0xFFA76DFB),
    400: Color(0xFF8E45FA),
    500: myCustomColor,  // 主颜色
    600: Color(0xFF5600E8),
    700: Color(0xFF4A00C7),
    800: Color(0xFF3D00A6),
    900: Color(0xFF310085),
  },
);

4. 在主题中使用自定义 Material 颜色

你可以将自定义的 Material 颜色应用到你的应用主题中：

MaterialApp(
  title: 'Custom Material Color Demo',
  theme: ThemeData(
    primarySwatch: myCustomMaterialColor,
  ),
  home: MyHomePage(),
);

5. 在 Widget 中使用自定义颜色

你可以在任何需要的地方使用自定义颜色：

Container(
  color: myCustomMaterialColor.shade500,
  child: Text(
    'Hello, Custom Material Color!',
    style: TextStyle(color: Colors.white),
  ),
);

6. 完整示例

以下是一个完整的示例，展示了如何使用 custom_material_color 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Color myCustomColor = Color(0xFF6200EE);

    final MaterialColor myCustomMaterialColor = CustomMaterialColor(
      primary: myCustomColor,
      swatch: {
        50: Color(0xFFF2E7FE),
        100: Color(0xFFD8BFFD),
        200: Color(0xFFC096FC),
        300: Color(0xFFA76DFB),
        400: Color(0xFF8E45FA),
        500: myCustomColor,
        600: Color(0xFF5600E8),
        700: Color(0xFF4A00C7),
        800: Color(0xFF3D00A6),
        900: Color(0xFF310085),
      },
    );

    return MaterialApp(
      title: 'Custom Material Color Demo',
      theme: ThemeData(
        primarySwatch: myCustomMaterialColor,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Material Color Demo'),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).primaryColor,
          padding: EdgeInsets.all(20),
          child: Text(
            'Hello, Custom Material Color!',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}