Flutter高效UI构建插件LazyUi的使用

LazyUi简介

LazyUi 是一组用于简化和加速 Flutter 应用开发过程的组件和工具。它是希望编写更简洁代码并快速实现功能的开发者的必备工具。

注意事项

该项目是一系列基于个人需求创建的功能和组件，旨在实现自由定制。在使用过程中可能会遇到许多 bug 和不足之处。

使用方法

要使用此插件，需要在 pubspec.yaml 文件中添加 lazyui 作为依赖项。

dependencies:
  flutter:
    sdk: flutter
  lazyui: ^1.0.0

入门指南

在 main.dart 文件中，通过调用 LazyUi.init() 方法初始化 LazyUi。

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

void main() {
  // 初始化 LazyUi
  LazyUi.init();

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      theme: LzTheme.light,
      home: const HomeView(),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何在项目中使用 LazyUi。

main.dart

import 'package:animated_theme_switcher/animated_theme_switcher.dart';
import 'package:example/app/modules/home/views/home_view.dart';
import 'package:flutter/material.dart';
import 'package:lazyui/lazyui.dart';

void errorHandler(ErrorInfo info) {
  String error = info.error;

  if (error.contains("is not a subtype of type")) {
    final match = RegExp(r"type '(.*?)' is not a subtype of type '(.*?)'")
        .firstMatch(error);

    if (match != null) {
      final from = match.group(2);
      final to = match.group(1);
      String message =
          'There is a change in data type from \'$from\' to \'$to\'';

      if (info.frames.isNotEmpty) {
        error = '$message, file: ${info.frames.first}';
      }
    }
  }

  // 错误信息
  List<String> errorList = [
    error,
    '',
    '<b>App, User & Device</b>',
    'LazyUI, v1.0.0 24.12.02.1',
  ];

  String message = errorList.join('\n');
  logg(message);
}

void main() async {
  // 初始化 LazyUi
  LazyUi.init(locale: 'id_ID', icon: IconType.huge);

  Errors.config(
      botToken: 'a',
      chatId: 'a',
      useBot: true,
      errorBuilder: (info) {
        errorHandler(info);
      });

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      initTheme: LzTheme.light,
      builder: (context, theme) {
        return MaterialApp(
          theme: theme,
          title: 'LazyUi',
          home: const HomeView(),
          builder: LazyUi.builder,
        );
      },
    );
  }
}

home_view.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            LzText('Welcome to LazyUi!', style: LzTextStyle.headline1),
            const SizedBox(height: 16),
            LzButton(
              text: 'Click Me',
              onPressed: () {
                LzToast.show('Button clicked!');
              },
            ),
            const SizedBox(height: 16),
            LzCard(
              child: Column(
                children: [
                  LzText('This is a card', style: LzTextStyle.bodyText1),
                  const SizedBox(height: 8),
                  LzImage.network('https://via.placeholder.com/150'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 初始化 LazyUi：在 main.dart 中调用 LazyUi.init() 方法进行初始化。
2. 错误处理：配置错误处理函数 errorHandler，以便在发生错误时记录详细信息。
3. 主题管理：使用 ThemeProvider 管理应用的主题。
4. 自定义组件：在 HomeView 中使用 LazyUi 提供的组件，如 LzText、LzButton、LzCard 和 LzImage。

更多示例和详细文档可以参考 LazyUi 示例代码。