Flutter Outlook集成插件outlook的使用

Flutter Outlook集成插件outlook的使用

Outlook 插件简介

Outlook 是一个用于简化 Flutter 应用中一致使用 颜色、形状、排版 和 图标 的包。它遵循 Material Design 指南，并通过可序列化的主题表达品牌标识。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  outlook_ui: ^版本号

然后运行以下命令安装：

dart pub add outlook_ui

在 Flutter 中使用

以下是一个完整的示例，展示如何在 Flutter 应用中使用 Outlook 主题。

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

void main() {
  // 创建一个轻量级主题
  OutlookTheme lightTheme = OutlookTheme(
    id: "sunny_bloom", // 主题 ID
    name: 'Sunny Bloom', // 主题名称
    description: "Bright colors for summer season", // 主题描述
    mode: OutlookThemeMode.light, // 主题模式（浅色模式）
    colorScheme: OutlookColorScheme.fromSeed(
      seedColor: const OutlookColor(0xffFFFF00), // 种子颜色
      brightness: OutlookBrightness.light, // 亮度
    ),
    textScheme: const OutlookTextScheme(
      displayLarge: OutlookTextStyle(
        size: 96, // 字体大小
        weight: OutlookFontWeight.w600, // 字体粗细
        style: OutlookFontStyle.normal, // 字体样式
        fontFamily: 'Poppins', // 字体家族
        color: OutlookColor(0xffFFFFFF), // 字体颜色
      ),
      // 其他文本样式可以在这里继续定义
    ),
    shapeScheme: const OutlookShapeScheme(
      small: OutlookShape(
        color: OutlookColor(0xff568730), // 形状颜色
        borderWidth: 1, // 边框宽度
        borderRadius: 2, // 圆角半径
        type: OutlookShapeType.rounded, // 形状类型
      ),
      // 其他形状样式可以在这里继续定义
    ),
    iconScheme: const OutlookIconScheme(
      filled: OutlookIconFill.outlined, // 图标填充类型
      weight: OutlookFontWeight.w300, // 图标字体粗细
      color: OutlookColor(0xff458392), // 图标颜色
      opacity: 1, // 图标透明度
      size: 30, // 图标大小
    ),
  );

  // 将主题序列化为 JSON 并存储
  Map<String, dynamic> storedLightTheme = lightTheme.toMap;
  OutlookTheme retrievedLightTheme = storedLightTheme.toOutlookTheme();

  runApp(MaterialApp(
    title: 'Outlook 主题示例',
    theme: retrievedLightTheme.toMaterialTheme, // 使用序列化后的主题
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Outlook 主题示例'),
      ),
      body: Center(
        child: Text(
          '欢迎使用 Outlook 主题！',
          style: Theme.of(context).textTheme.displayLarge, // 使用主题中的大标题样式
        ),
      ),
    );
  }
}

功能概述

Outlook 提供了以下功能，以帮助开发者快速配置应用的主题：

1. 排版系统 (Typography)：支持 Material Design 的 13 种字体样式。
2. 颜色方案 (Color Scheme)：支持 Material 颜色方案，包含 13 种颜色。
3. 图标系统 (Iconography)：支持多种图标类型（如 solid、light、outlined）及自定义颜色和大小。
4. 形状方案 (Shape Scheme)：支持小、中、大三种类型的形状样式。
5. 图片资源 (Imagery)：支持背景图片、壁纸等用于传达品牌标识。

视觉愿景

Outlook 的目标是让定义和配置应用主题变得尽可能简单，只需定义一个简单的类即可。同时，它支持跨设计语言的适配，包括 Material、Cupertino、Fluent 甚至 CSS。

版本特性 (v0.0.0-dev.3)

• 可以设置基于种子颜色或自定义的颜色方案。
• 支持通过 ShapeScheme 定义三种组件的形状。
• 可以使用 TextScheme 定义排版系统。
• 提供预设图标，并支持自定义图标类型。
• 提供主题获取、更新、创建和删除的可定制用例。
• 可将整个主题序列化为 JSON 并恢复，确保数据一致性。
• 提供适配器将 OutlookTheme 转换为 Material 主题数据。

注意事项

在框架层中使用适配器，避免业务逻辑依赖特定于框架的 Material 包。这是此包的核心理念之一。

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 Outlook 主题。

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

void main() {
  // 创建主题
  OutlookTheme lightTheme = OutlookTheme(
    id: "sunny_bloom",
    name: 'Sunny Bloom',
    description: "Bright colors for summer season",
    mode: OutlookThemeMode.light,
    colorScheme: OutlookColorScheme.fromSeed(
      seedColor: const OutlookColor(0xffFFFF00),
      brightness: OutlookBrightness.light,
    ),
    textScheme: const OutlookTextScheme(
      displayLarge: OutlookTextStyle(
        size: 96,
        weight: OutlookFontWeight.w600,
        style: OutlookFontStyle.normal,
        fontFamily: 'Poppins',
        color: OutlookColor(0xffFFFFFF),
      ),
    ),
    shapeScheme: const OutlookShapeScheme(
      small: OutlookShape(
        color: OutlookColor(0xff568730),
        borderWidth: 1,
        borderRadius: 2,
        type: OutlookShapeType.rounded,
      ),
    ),
    iconScheme: const OutlookIconScheme(
      filled: OutlookIconFill.outlined,
      weight: OutlookFontWeight.w300,
      color: OutlookColor(0xff458392),
      opacity: 1,
      size: 30,
    ),
  );

  // 序列化并存储主题
  Map<String, dynamic> storedLightTheme = lightTheme.toMap;
  OutlookTheme retrievedLightTheme = storedLightTheme.toOutlookTheme();

  runApp(MaterialApp(
    title: 'Outlook 主题示例',
    theme: retrievedLightTheme.toMaterialTheme,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Outlook 主题示例'),
      ),
      body: Center(
        child: Text(
          '欢迎使用 Outlook 主题！',
          style: Theme.of(context).textTheme.displayLarge,
        ),
      ),
    );
  }
}