Flutter蓝图设计插件blueprint的使用

Flutter蓝图设计插件 blueprint 的使用

blueprint 是一个用于验证 JSON 数据是否符合预定义模式的 Dart 包。它可以帮助开发者确保 API 返回的数据格式正确,特别是在更新后不会破坏现有的数据结构。

Flutter蓝图设计插件blueprint 动机

我们几乎每天都在工作中使用 JSON。虽然空安全(null safety)可以帮助我们避免许多错误,但我们无法测试每次更新后 API 是否仍然完好无损,或者更新是否会破坏数据类型或模式。因此,这个包主要用于测试你用 Dart 编写的 API 或者你使用的 API。

注意

该包依赖于 Dart 版本 >= 2.13.0。如果你使用的是 Flutter,则需要更新到 Flutter >= 2.5。

特性

  • 验证 JSON 数据是否符合任意模式。
  • 支持 Dart 原生类型。
  • 支持 TypeOrNull 类型。
  • 支持 .of() 方法进行深层次验证。
  • 可以抛出异常或返回布尔值作为结果。
  • 强类型,蓝图只是一个 Map,但其值必须是 BluePrintField 的子类。
  • 提供详细的失败信息。
  • 经过充分测试。

支持的类型

数据类型 非空字段 可空字段
String StringF StringOrNull
int IntF IntOrNull
double DoubleF DoubleOrNull
num NumF NumOrNull
bool BoolF BoolOrNull
Map MapF MapOrNull
List ListF ListOrNull

注意事项

  1. 使用 matchMapmatchF 来获取验证结果(true 或 false)。
  2. 设置 throwable 参数为 true 可在不匹配时抛出异常。
  3. MapList 上使用 .of() 方法可以进行深层次验证。
  4. 如果值为空,可空字段规则将直接视为匹配。
  5. 如果值非空,可空字段规则会根据参数进行验证。

示例

示例 1: 简单字段验证

import 'package:blueprint/blueprint.dart';

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 简单的一个字段
    matchMap(
      // JSON 数据
      {'name': 'queen'},
      // 蓝图
      {'name': StringF},
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

示例 2: 列表验证

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 验证列表
    matchMap(
      {
        'ids': [10, 11, 17]
      },
      {
        'ids': ListF,
        // 或者指定列表项的类型
        // 'ids': ListF(IntF()),
      },
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

示例 3: 完整示例

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 完整示例
    matchMap(
      {
        'name': 'ahmed',
        'age': 25,
        'args': [
          {'foo': 5},
        ],
        'passport': {
          'id': 1,
          'type': 'royal',
          'created_at': '10-11-17',
        }
      },

      // 蓝图
      {
        'name': StringF,
        'age': IntF,
        'args': ListF(MapF.of({'foo': IntF})),
        'passport': MapF.of({
          'id': IntF,
          'type': StringF,
          'created_at': StringF,
        })
      },
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

更多关于Flutter蓝图设计插件blueprint的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter蓝图设计插件blueprint的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的Blueprint插件的使用,以下是一个简单的代码案例来展示其基本用法。Blueprint插件通常用于快速原型设计和UI布局的可视化。不过,请注意,Flutter社区中可能有多个名为“Blueprint”的插件,或者你可能指的是一种概念性的蓝图设计而不是具体的插件。这里,我将假设你指的是一种用于UI布局的插件或概念,并展示如何使用Flutter进行UI布局设计。

在Flutter中,我们通常使用内置的Widget来进行UI布局,而不是依赖于特定的“Blueprint”插件。不过,为了模拟蓝图设计的过程,我们可以创建一个简单的Flutter应用,展示如何使用Stack、Container、Column、Row等Widget来设计复杂的布局。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blueprint Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Blueprint Example'),
        ),
        body: BlueprintLayout(),
      ),
    );
  }
}

class BlueprintLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // Background rectangle
        Container(
          color: Colors.grey[200],
          height: double.infinity,
          width: double.infinity,
        ),
        // Top header
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Container(
            color: Colors.blue,
            height: 60,
            child: Center(
              child: Text(
                'Header',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
        // Sidebar
        Positioned(
          top: 60,
          left: 0,
          bottom: 0,
          width: 200,
          child: Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text('Home'),
                ),
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text('Settings'),
                ),
                // Add more list tiles as needed
              ],
            ),
          ),
        ),
        // Main content area
        Positioned(
          top: 60,
          left: 200,
          right: 0,
          bottom: 0,
          child: Container(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Welcome to the Blueprint Layout',
                    style: TextStyle(fontSize: 20),
                  ),
                  SizedBox(height: 16),
                  Text(
                    'This is a simple example of how you might layout a screen in Flutter using Stack, Container, and Positioned widgets.',
                    style: TextStyle(fontSize: 16),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

在这个例子中,我们使用了Stack来堆叠不同的布局元素,如背景、顶部导航栏、侧边栏和主要内容区域。每个部分都使用ContainerColumnRowPositioned等Widget来构建。

  • Stack允许我们将多个Widget堆叠在一起。
  • Container用于创建具有特定颜色、大小和对齐方式的矩形区域。
  • Positioned用于在Stack中精确定位Widget。
  • ColumnRow用于创建垂直和水平的Widget排列。

这个简单的布局可以作为更复杂UI设计的基础。如果你指的是特定的“Blueprint”插件,请提供更多细节,以便给出更准确的代码示例。

回到顶部