Flutter自定义组件集合插件main_widgets的使用

Flutter自定义组件集合插件main_widgets的使用

SmartUIComponents Widget

SmartUIComponents 是一个用于高效 UI 状态管理的 Flutter 包，处理加载、空视图、内容显示、缓存和下拉刷新等功能，并且可以自定义组件。

安装

要使用 MainScreen 组件，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖项：

dependencies:
  main_widgets: <latest_version>

1. 初始化主屏幕组件：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    MainWidgetsUtil.init(
      context,
      designSize: const Size(375, 812),
      minTextAdapt: true,
    );
    return MaterialApp(
      home: const HomeScreen(),
    );
  }
}

Widgets 使用

以下是使用这些参数在 MainScreen 组件中的示例：

SmartScreen

SmartScreen(
  isLoading: true, // 数据正在加载
  isEmpty: false, // 数据可用
  child: YourMainContentWidget(), // 主内容显示
  onRefresh: () async {
    // 刷新数据的逻辑
  },
  emptyWidget: CustomEmptyWidget(
    message: "No data available",
  ), // 可选的空视图组件
  message: "Please check back later.", // 可选的空状态消息
);

SmartCachedImages

SmartCachedImages(
  imageUrl: 'https://example.com/image.jpg',
)
)

SmartEmptyWidget

SmartEmptyWidget(
  message: 'The message of EmptyWidget',
)

SmartLoadingWidget

const SmartLoadingWidget()

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    MainWidgetsUtil.init(
      context,
      designSize: const Size(375, 812),
      minTextAdapt: true,
    );
    return StyledToast(
      backgroundColor: Colors.red,
      textStyle: const TextStyle(
        color: Colors.black,
        fontSize: 16,
      ),
      locale: const Locale('ar'),
      child: MaterialApp(
        localizationsDelegates: context.smartLocalizeDelegates,
        title: 'Flutter Demo',
        locale: const Locale('ar'),
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: false,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(SmartLocalize.home),
      ),
      body: SmartScreen(
        builder: (context {
          return Column(
            children: [
              Text(SmartLocalize.goodAfternoon),
              SizedBox(height: 120),
              SmartUserImage(
                displayName: 'ssssss ssss',
                photo: '',
              ),
              DefaultProfileImage(
                displayName: 'ssssss ssss',
              ),
              SmartWelcomeWidget(
                userImage: '',
                dateFormat: DateFormats.weekDay,
                firstName: 'ssssss ssss',
                onTap: () {
                  print('lsllslslslsl');
                },
              ),
              Card(
                child: SmartStatusWidget(
                  text: '30%',
                  backgroundColor: Colors.red,
                  textColor: Colors.white,
                  child: SizedBox(
                    height: 200,
                    width: 120,
                    child: Column(
                      children: [
                        SmartCachedImages(
                          imageUrl: '',
                          height: 120,
                        ),
                        Text('title'),
                        Text('subtitle'),
                      ],
                    ),
                  ),
                ),
              ),
              SmartTagWidget(
                text: 'hello',
                textColor: Colors.white,
                backgroundColor: Colors.red,
              ),
              TextButton(
                onPressed: () => showToastError(
                  msg: 'show Toast Error',
                ),
                child: const Text('Show Toast Error'),
              ),
              TextButton(
                onPressed: () => showToastSuccess(
                  msg: 'show Toast Success',
                ),
                child: const Text('Show Toast Success'),
              ),
            ],
          );
        },
      ),
    );
  }
}