Flutter插件flutter_lab的使用_FlutterLab 的 Flutter 包，一个 UI 设计工具。

Flutter package for FlutterLab, a UI design tool. Quickly change the parameters of widgets (color, size, alignment, padding, position, opacity, etc.) FlutterLab 的 Flutter 包，一个 UI 设计工具。可以快速更改小部件的参数（颜色、大小、对齐方式、内边距、位置、不透明度等）。

安装FlutterLab

要安装FlutterLab，请根据您的操作系统选择相应的安装方法：

• macOS → 下载
• Windows → 下载 （从GitHub下载）

使用

首先，在你的项目中引入flutter_lab包：

import 'package:flutter_lab/flutter_lab.dart';

然后，将MyApp()用FlutterLab包裹起来，以连接到FlutterLab应用：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  runApp(
    const FlutterLab(
      child: MyApp(),
    ),
  );
}

接下来，你可以将一些常用的Widget替换成带有Lab前缀的Widget来管理参数。例如，Container替换为LabContainer，Opacity替换为LabOpacity等。

// 使用LabContainer管理Container参数
LabContainer(
  width: 300,
  height: 200,
  child: LabOpacity(
    opacity: 0.5,
    child: LabRow(
      children: [
        LabPadding(
          padding: EdgeInsets.all(8),
          child: Text("设计"),
        ),
        Stack(
          children: [
            LabPositioned(
              child: Icon(Icons.add),
            ),
          ],
        ),
      ],
    ),
  ),
);

这些Widget可以被替换为带有Lab前缀的版本：

• Container -> LabContainer
• Padding -> LabPadding
• Row -> LabRow
• Column -> LabColumn
• Stack -> LabStack
• Align -> LabAlign
• Positioned -> LabPositioned
• SizedBox -> LabSizedBox
• Opacity -> LabOpacity
• Icon -> LabIcon
• Text -> LabText

详细说明

为了控制特定的Widget，可以使用name参数。name值必须与FlutterLab应用中的Widget名称相同。

LabContainer(
  name: "背景", // 在FlutterLab应用中将该Container重命名为"背景"
  width: 300,
  height: 200,
  child: Row(
    children: [
      LabContainer(
        name: "盒子", // 在FlutterLab应用中将该Container重命名为"盒子"
        color: Colors.blue,
      ),
      LabContainer(
        name: "盒子",
        color: Colors.blue,
      ),
    ],
  ),
);

LabOpacity(
  name: "不透明度2",
  child: ...,
);

LabPadding(
  name: "盒子填充",
  padding: EdgeInsets.all(8),
  child: ...,
);

连接

如果需要，可以在FlutterLab中添加以下参数：

runApp(
  const FlutterLab(
    url: "192.168.1.200", // 默认为"http://localhost"
    port: 3000, // 默认端口为3000
    child: MyApp(),
  ),
);

这个包使用了socket_io_client。如果需要，可以参考这里的连接解决方案。

示例代码

以下是完整的示例代码：

// ignore_for_file: prefer_const_constructors, avoid_unnecessary_containers, prefer_const_literals_to_create_immutables

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    const FlutterLab(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LabContainer(
          alignment: Alignment.center,
          child: LabContainer(
            name: '容器2',
            child: LabIcon(
              Icons.favorite,
              size: 140,
            ),
          ),
        ),
      ),
    );
  }
}