Flutter实用工具插件easy_utils的使用

插件介绍

easy_utils 是一个包含多个有用工具的 Flutter 包。只需要运行 flutter pub add easy_utils 即可将其添加到你的项目中。

功能特性

简单发送 HTTP 请求（依赖于 http 库）。
在无需上下文的情况下管理应用程序导航。
即使在为 Web 平台编译相同代码时，也可以检查当前平台。
更多功能…

EasyNav 使用指南

第一步

MaterialApp

在 MaterialApp 实例中添加 EasyNav.navigatorKey。

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: EasyNav.navigatorKey,
    // 其他配置项
  );
}

CupertinoApp

在 CupertinoApp 实例中添加 EasyNav.navigatorKey。

[@override](/user/override)
Widget build(BuildContext context) {
  return CupertinoApp(
    navigatorKey: EasyNav.navigatorKey,
    // 其他配置项
  );
}

使用示例

推送新路由

EasyNav.push(const MyScreen());

推送带有不可见名称的新命名路由

EasyNav.pushNamed(
  '/myRoute',
  // 隐藏路由名称
  invisibleName: true,
)

获取当前路由名称（即使不可见）

var routeName = EasyNav.getCurrentRouteName();

推送新路由并弹出其他路由

EasyNav.replace(const MyScreen());

推送新路由并弹出直到第一个路由

EasyNav.replaceUntil(
  const MyScreen(),
  predicate: (route) => route.isFirst,
);

弹出所有路由直到第一个路由

EasyNav.popUntilFirst();

弹出当前路由

EasyNav.pop();

更多详情请查看 src/navigation/nav_utils.dart 文件。

EasyHttp 使用指南

无需进行第一步，直接使用即可。

支持的 HTTP 方法

GET
HEAD
POST
PUT
DELETE
PATCH
自定义请求类型（如 sendCUSTOM 方法）

使用示例

发送 GET 请求

EasyHttp.instance.sendGET('https://httpbin.org/get');

定义 API 前缀并发送 GET 请求

EasyHttp.instance.prefix = 'https://httpbin.org';
EasyHttp.instance.sendGET('/get');

发送自定义 HTTP 请求

EasyHttp.instance.sendCUSTOM(
  'https://example.com/myRoute',
  method: 'PROPATCH',
);

更多详情请查看 src/network/http_utils.dart 文件。

PlatformUtils 使用指南

以兼容的方式检查运行的操作系统，适用于 Web 平台。

使用示例

检查 Android 操作系统

import 'package:easy_utils/easy_utils.dart' as EasyUtils;

if (EasyUtils.isAndroid) {
  debugPrint('Hello from Android!');
}

更多详情请查看 src/platform 文件夹。

EasyDisplay 使用指南

检查显示特性，支持或不支持 BuildContext。

使用示例

检查物理显示宽度

EasyDisplay.physicalWidth;

使用 `BuildContext` 检查平台亮度

EasyDisplay.create(context).platformBrightness;

使用 `EasyNav` 的 `appContext` 检查黑暗模式是否启用

if (EasyDisplay.createFromAppContext().isDark) {
  debugPrint('Dark mode');
}

更多详情请查看 src/display/display_utils.dart 文件。

完整示例代码

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

void main() => runApp(const MyMaterialApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: EasyNav.navigatorKey,
      debugShowCheckedModeBanner: false,
      title: 'Flutter Easy Utils Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routes: {
        '/': (c) => MaterialHomePage(),
        '/second': (c) => MaterialSecondPage(),
      },
      initialRoute: '/',
    );
  }
}

class MaterialHomePage extends StatelessWidget {
  const MaterialHomePage();

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          centerTitle: false,
          title: Text(EasyNav.appTitle),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                ..._navigationUtils,
                SizedBox(height: 16),
                ..._httpUtils,
                SizedBox(height: 16),
                ..._getDisplayUtils(context),
                SizedBox(height: 16),
                ..._platformUtils,
              ],
            ),
          ),
        ),
      );

  List<Widget> get _navigationUtils => [
        Text('Navigator Utils'),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.pushNamed(
            '/second',
            // 默认值
            routeType: PageRouteType.DEFAULT_APP,
            arguments: 'BLABLABLA',
            invisibleName: true,
          ),
          child: Text('Open second page (App class)'),
        ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(
            MaterialSecondPage(),
            routeType: PageRouteType.DEFAULT_OS,
          ),
          child: Text('Open second page (OS)'),
        ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(
            MaterialSecondPage(),
            routeType: PageRouteType.MATERIAL,
          ),
          child: Text('Open second page (Material)'),
        ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(
            MaterialSecondPage(),
            routeType: PageRouteType.CUPERTINO,
          ),
          child: Text('Open second page (Cupertino)'),
        ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(
            MaterialSecondPage(),
            routeType: PageRouteType.FADE,
          ),
          child: Text('Open second page (Fade)'),
        ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(
            MaterialSecondPage(),
            routeType: PageRouteType.SLIDE,
          ),
          child: Text('Open second page (Slide)'),
        ),
      ];

  List<Widget> _getDisplayUtils(BuildContext context) => [
        Text('Display Utils'),
        SizedBox(height: 16),
        Text(
            'Physical size: ${EasyDisplay.physicalWidth}x${EasyDisplay.physicalHeight}'),
        Text('Media query size (context): ${_getMediaQuerySize(context)}'),
        Text(
            'Media query size (navContext): ${_getMediaQuerySize(EasyNav.context)}'),
        Text(
            'Media query size (appContext): ${_getMediaQuerySize(EasyNav.appContext)}'),
        Text(
            'Media query size (focusContext): ${_getMediaQuerySize(EasyNav.focusContext!)}'),
      ];

  String _getMediaQuerySize(BuildContext context) {
    var mediaQuerySize = EasyDisplay.create(context).mediaQuery.size;
    return '${mediaQuerySize.width}x${mediaQuerySize.height}';
  }

  List<Widget> get _httpUtils => [
        Text('HTTP Utils'),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => EasyNav.push(MaterialHTTPPage()),
          child: Text('Open HTTP page'),
        ),
      ];

  List<Widget> get _platformUtils => [
        Text('Platform Utils'),
        SizedBox(height: 16),
        Text('Apple: $isApple (iOS: $isIOS - macOS: $isMacOS)'),
        Text('Google: $isGoogle (Android: $isAndroid - Fuchsia: $isFuchsia)'),
        Text(
            'Desktop: $isDesktop (Linux: $isLinux - MacOS: $isMacOS - Windows: $isWindows)'),
        Text('Mobile: $isMobile (Android: $isAndroid - iOS: $isIOS)'),
        Text('Web: $isWeb'),
      ];
}

class MaterialSecondPage extends StatelessWidget {
  const MaterialSecondPage();

  [@override](/user/override)
  Widget build(BuildContext context) {
    var routeName = EasyNav.getCurrentRouteName();
    var routeArgs = EasyNav.getCurrentRouteArguments();

    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        title: Text('Second page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Example second page'),
            Text('Route name: $routeName'),
            Text('Route args: $routeArgs'),
          ],
        ),
      ),
    );
  }
}

class MaterialHTTPPage extends StatefulWidget {
  const MaterialHTTPPage();

  State<MaterialHTTPPage> createState() => _MaterialHTTPPageState();
}

class _MaterialHTTPPageState extends State<MaterialHTTPPage> {
  [@override](/user/override)
  void initState() {
    EasyHttp.instance.prefix = 'https://httpbin.org';
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          centerTitle: false,
          title: Text('HTTP page'),
          leading: IconButton(
            onPressed: EasyNav.pop,
            icon: Icon(Icons.arrow_back),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              FutureBuilder(
                future: EasyHttp.instance.sendPOST(
                  '/anything',
                  headers: {
                    'User-Agent': 'EasyUtils/Demo',
                    // 不使用 Content-Type 如果启用 sendBodyAsForm
                    'Content-Type': 'application/json; charset=utf-8'
                  },
                  body: <String, String>{
                    'app_name': 'easy_utils',
                  },
                ),
                builder: (context, snapshot) => Text(
                  snapshot.data?.body ??
                      snapshot.error?.toString() ??
                      'Loading...',
                  style: TextStyle(fontFamily: 'monospace'),
                ),
              ),
            ],
          ),
        ),
      );
}

更多关于Flutter实用工具插件easy_utils的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼

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

当然，easy_utils 是一个在 Flutter 开发中非常实用的工具插件，它提供了一系列便捷的工具函数，可以简化开发流程。以下是一些关于如何使用 easy_utils 插件的代码示例。

首先，你需要在你的 pubspec.yaml 文件中添加 easy_utils 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_utils: ^最新版本号 # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

1. 设备信息获取

easy_utils 提供了获取设备信息的功能，例如设备型号、系统版本等。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String deviceInfo = '';

  @override
  void initState() {
    super.initState();
    _getDeviceInfo();
  }

  Future<void> _getDeviceInfo() async {
    DeviceInfo deviceInfo = await EasyUtils.deviceInfo();
    setState(() {
      this.deviceInfo = '设备型号: ${deviceInfo.model}\n系统版本: ${deviceInfo.version}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Info'),
        ),
        body: Center(
          child: Text(deviceInfo),
        ),
      ),
    );
  }
}

2. 屏幕截图

easy_utils 还可以方便地截取当前屏幕的内容。

import 'package:flutter/material.dart';
import 'package:easy_utils/easy_utils.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Uint8List? screenshot;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screenshot'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _captureScreenshot,
                child: Text('Capture Screenshot'),
              ),
              if (screenshot != null)
                Image.memory(screenshot!),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _captureScreenshot() async {
    RenderRepaintBoundary boundary =
        globalKey.currentContext!.findRenderObject()! as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    setState(() {
      screenshot = pngBytes;
    });
  }

  final GlobalKey globalKey = GlobalKey();
}

注意：在上面的示例中，为了截取屏幕截图，你需要将你想要截取的 widget 包裹在一个 RepaintBoundary 中，并为其分配一个 GlobalKey。这里为了简化示例，省略了这部分代码，实际使用时请确保你的布局中包含 RepaintBoundary。

3. 网络工具

easy_utils 还提供了网络工具，例如检查网络连接状态。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String networkStatus = '';

  @override
  void initState() {
    super.initState();
    _checkNetworkStatus();
  }

  Future<void> _checkNetworkStatus() async {
    bool isConnected = await EasyUtils.isNetworkConnected();
    setState(() {
      networkStatus = isConnected ? '网络连接正常' : '网络已断开';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Status'),
        ),
        body: Center(
          child: Text(networkStatus),
        ),
      ),
    );
  }
}

以上代码展示了如何使用 easy_utils 插件来获取设备信息、截取屏幕截图以及检查网络连接状态。你可以根据项目的实际需求，进一步探索和使用 easy_utils 提供的其他功能。

Flutter实用工具插件easy_utils的使用

Flutter实用工具插件easy_utils的使用

插件介绍

功能特性

EasyNav 使用指南

第一步

MaterialApp

CupertinoApp

使用示例

推送新路由

推送带有不可见名称的新命名路由

获取当前路由名称（即使不可见）

推送新路由并弹出其他路由

推送新路由并弹出直到第一个路由

弹出所有路由直到第一个路由

弹出当前路由

EasyHttp 使用指南

支持的 HTTP 方法

使用示例

发送 GET 请求

定义 API 前缀并发送 GET 请求

发送自定义 HTTP 请求

PlatformUtils 使用指南

使用示例

检查 Android 操作系统

EasyDisplay 使用指南

使用示例

检查物理显示宽度

使用 BuildContext 检查平台亮度

使用 EasyNav 的 appContext 检查黑暗模式是否启用

完整示例代码

1. 设备信息获取

2. 屏幕截图

3. 网络工具

使用 `BuildContext` 检查平台亮度

使用 `EasyNav` 的 `appContext` 检查黑暗模式是否启用