Flutter可重用组件插件neo_reusables的使用

Flutter可重用组件插件neo_reusables的使用

概述

这个包包含了许多在开始新的Flutter项目时经常使用的可重用组件。

特性

可重用的Widget

• SizeConfig: 用于确保UI元素/小部件在不同屏幕尺寸下按比例缩放。
• NeoText: Text 小部件的高级包装，提高了普通文本小部件的可访问性。
• NeoButton: 允许开发者创建灵活按钮的包装类。
• XMargin 和 YMargin: 提供清晰简洁的方式在元素之间添加间距。
• Navigator: 包含所有导航需求。

可重用的数据

• Resource: 一个封装网络操作的数据模型、状态和错误信息的包装器。

开始使用

首先，你需要导入该库：

import 'package:neo_reusables/neo_reusables.dart';

使用示例

Resource

Resource 类用于表示网络请求的状态。它可以处于初始状态（IDLE）、加载状态（LOADING）、失败状态（FAILED）或成功状态（SUCCESS）。

// 首先创建 Resource 并指定类型，例如这里的 UserModel
Resource<UserModel> resource = Resource.idle();

// 显示加载状态
resource = Resource.loading();

// 显示错误状态
resource = Resource.failed("Error message goes here");

// 显示成功状态
final UserModel userModel = UserModel.fromJson(json);
resource = Resource.success(userModel);

SizeConfig

SizeConfig 用于根据屏幕大小调整UI元素的大小。

1. 在主文件中初始化 SizeConfig:

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(builder: (context) {
        final Size size = MediaQuery.of(context).size;
        SizeConfig.init(context,
            width: size.width, height: size.height, allowFontScaling: true);

        return const MyHomePage(title: 'Flutter Demo Home Page');
      }),
    );
  }
}

1. 使用 SizeConfig 生成可缩放的高度和宽度:

final SizeConfig sizeConfig = SizeConfig();

// 可缩放的高度
sizeConfig.sh(20).toDouble()

// 可缩放的宽度
sizeConfig.sw(20).toDouble()

NeoButton

NeoButton 是一个可以点击的按钮小部件，onClick 和 text 字段是必需的。

NeoButton(
  onClick: () {},
  text: 'Tap',
)

NeoText

NeoText 是一个文本小部件，text 字段是必需的。

NeoText(
  text: "Your text",
)

YMargin

YMargin 提供垂直间距。

YMargin(height: 10)

XMargin

XMargin 提供水平间距。

XMargin(width: 10)

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用上述组件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Neo Reusables Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(builder: (context) {
        final Size size = MediaQuery.of(context).size;
        SizeConfig.init(context,
            width: size.width, height: size.height, allowFontScaling: true);

        return const MyHomePage(title: 'Neo Reusables Home Page');
      }),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 NeoText 包装文本
            NeoText(
              text: "Your counter: $_counter",
            ),
            // 添加垂直间距
            const YMargin(height: 10),
            Row(
              children: [
                // 添加水平间距
                const XMargin(width: 20),
                // 使用 NeoButton 包装按钮
                NeoButton(
                  onClick: () {
                    _incrementCounter();
                  },
                  text: 'Tap',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}