Flutter插件okmsbun_flutter的使用方法

本包是一个旨在消除样板代码并促进项目快速设置的实用工具包。

目录

• 开始使用
• 用法
  • 添加Lint规则
  • ImageWidget
  • BufferingFutureBuilder
  • EstimatedAppBar
    • EstimatedAppBar
    • EstimatedAppBarContainer
  • 扩展
    • DioExtension
    • NumDurationExtension
    • ContextThemeExtension
    • ContextMediaQueryExtension

Flutter插件okmsbun_flutter开始使用

在您的包的pubspec.yaml文件中添加以下行：

dependencies:
  okmsbun_flutter: latest

用法

添加Lint规则

如果您想要更严格、更精确且清晰的Lint规则，可以包含以下Lint规则。您可以在此处访问所有这些Lint规则。

在您的包的analysis_options.yaml文件中添加以下行：

include: package:okmsbun_flutter/okmsbun_flutter_lints.yaml

在您的包的pubspec.yaml文件中添加以下行：

dev_dependencies:
  flutter_lints: latest

ImageWidget

ImageWidget 是使用 cached_network_image 和 flutter_svg 包构建的。

Image Widget 是一个旨在从单个部件展示具有诸如svg和其他（jpg、png等）扩展名的图像的部件。

// 网络图片
ImageWidget.network(
    imageUrl: 'https://network-image.(svg|jpg|png...)',
    boxFit: BoxFit.cover,
    height: 300,
    ...
  )

// 资源图片
ImageWidget.asset(
    assetPath: 'assets/image.(svg|jpg|png...)',
    boxFit: BoxFit.cover,
    height: 300,
    ...
  )

// 字节图片
ImageWidget.bytes(
    bytes: bytes,
    boxFit: BoxFit.cover,
    height: 300,
    ...
  )

BufferingFutureBuilder

BufferingFutureBuilder 是一个帮助显示旧数据而不是进度条的部件，当新的请求或数据更改时使用 FutureBuilder。一旦新的数据到达，它将用新数据替换旧数据。

BufferingFutureBuilder<String>(
    future: () async {
      await Future.delayed(const Duration(seconds: 3));
      return 'Hello World from Future';
    },
    builder: (data) => Text(data ?? ''),
    onLoadedData: 'Hello World from onLoadedData',
    ...
  )

EstimatedAppBar

EstimatedAppBar

此部件返回一个空的AppBar，只包含背景颜色而没有其他属性，并由一个可编辑的空容器组成。此AppBar会自动纠正 'statusBarColor', 'statusBarBrightness', 'statusBarIconBrightness', 'systemStatusBarContrastEnforced' 的值。通过这种方式，它旨在确保状态栏中文本和图标的可读性。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: EstimatedAppBar(
      backgroundColor: Colors.black || Colors.white,
      child: Container(
        color: Colors.black,
        child: const FlutterLogo(size: 50),
      ),
    ),
  );
}

黑色背景

白色背景

仅当背景颜色改变时，状态栏中文本和图标的颜色才会自动改变。

EstimatedAppBarContainer

EstimatedAppBar 是一个 PreferredSizeWidget。如果您想创建自己的 PreferredSizeWidget，可以使用 EstimatedAppBarContainer。

class MyEstimatedAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyEstimatedAppBar({required this.backgroundColor, required this.child});

  final Color backgroundColor;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return EstimatedAppBarContainer(
      backgroundColor: backgroundColor,
      child: child,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

扩展

DioExtension

DioResponseExtension 将 dioResponse 对象转换为详细映射。只需执行 response.toMap 即可。

final Response response = await Dio().get('https://pokeapi.co/api/v2/pokemon?limit=1');
final Map<String, dynamic> responseMap = response.toMap;
final String responseEncode = jsonEncode(responseMap);
print(responseEncode);

上述代码的输出如下：

{
  "data": {
    "count": 1302,
    "next": "https://pokeapi.co/api/v2/pokemon?offset=1&limit=1",
    "previous": null,
    "results": [
      {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon/1/"
      }
    ]
  },
  "requestOptions": {
    "method": "GET",
    "sendTimeout": null,
    "receiveTimeout": null,
    "connectTimeout": null,
    "data": null,
    "path": "https://pokeapi.co/api/v2/pokemon?limit=1",
    "baseUrl": "",
    "queryParameters": {},
    "onReceiveProgress": null,
    "onSendProgress": null,
    "cancelToken": null,
    "extra": {},
    "headers": {},
    "preserveHeaderCase": false,
    "responseType": "json",
    "receiveDataWhenStatusError": true,
    "followRedirects": true,
    "maxRedirects": 5,
    "persistentConnection": true,
    "requestEncoder": null,
    "responseDecoder": null,
    "listFormat": "multi"
  },
  "statusCode": 200,
  "statusMessage": "OK",
  "isRedirect": false,
  "redirects": [],
  "extra": {},
  "headers": {
    "preserveHeaderCase": false,
    "map": {
      "x-timer": ["S1703133027.794235,VS0,VE1"],
      "date": ["Thu, 04 Jan 2024 11:07:34 GMT"],
      "content-encoding": ["gzip"],
      ...
    }
  }
}

您也可以以相同的方式将 DioException 对象转换为 Map。

...
} on DioException catch (e) {
  print(jsonEncode(e.toMap));
} catch (e) {
...

它将给出与响应对象相同的详细输出。

NumDurationExtension

NumDurationExtension 是一个帮助您轻松使用 Duration 的扩展。此扩展受 flutter_animate 包的启发。

final Duration 1Microseconds = 1.microseconds;
final Duration 1Ms = 1.ms;
final Duration 1Milliseconds = 1.milliseconds;
final Duration 1Second = 1.seconds;
final Duration 1Minute = 1.minutes;
final Duration 1Hour = 1.hours;
final Duration 1Day = 1.days;

ContextThemeExtension

ContextThemeExtension 是一个帮助您轻松使用 ThemeData, TextTheme, 和 ColorScheme 的扩展。

final ThemeData theme = context.theme;
final TextTheme textTheme = context.textTheme;
final ColorScheme colorScheme = context.colorScheme;

ContextMediaQueryExtension

ContextMediaQueryExtension 是一个帮助您轻松使用 MediaQuery 的扩展。

final MediaQueryData mediaQuery = context.mediaQuery;
final Size appSize = context.appSize;
final double width = context.width;
final double height = context.height;
final EdgeInsets padding = context.padding;
final Brightness brightness = context.brightness;
final Orientation orientation = context.orientation;