Flutter插件fluiver的使用_ fluiver是一个包含表达式扩展、常见助手和基本小部件的全面包

Flutter插件fluiver的使用_ fluiver是一个包含表达式扩展、常见助手和基本小部件的全面包

fluiver 是一个包含表达式扩展、常见助手和基本小部件的全面包。其表达性模仿了IDE的行为，而不仅仅是减少代码冗余，这与许多其他包的不同之处在于它的设计理念。

Flutter插件fluiver的使用扩展

BuildContext

屏幕大小

context.screenWidth => MediaQuery.of(context).size.width
context.screenHeight => MediaQuery.of(context).size.height

亮度

context.isPlatformDark => MediaQuery.of(context).platformBrightness == Brightness.dark
context.isPlatformLight => MediaQuery.of(context).platformBrightness == Brightness.light
context.isThemeDark => Theme.of(context).brightness == Brightness.dark
context.isThemeLight => Theme.of(context).brightness == Brightness.light

方向

context.isOrientationPortrait => MediaQuery.of(context).orientation == Orientation.portrait
context.isOrientationLandscape => MediaQuery.of(context).orientation == Orientation.landscape

视图填充

context.topViewPadding => MediaQuery.of(context).viewPadding.top
context.bottomViewPadding => MediaQuery.of(context).viewPadding.bottom
context.bottomViewInset => MediaQuery.of(context).viewInsets.bottom

文本方向

context.isLTR => Directionality.of(context) == TextDirection.ltr
context.isRTL => Directionality.of(context) == TextDirection.rtl

ColorScheme

// 公式
Color {$type}Color => Theme.of(context).colorScheme.{$type}Color!

// 示例
Color primaryColor => Theme.of(context).colorScheme.primaryColor
Color tertiaryColor => Theme.of(context).colorScheme.tertiaryColor
Color onErrorColor => Theme.of(context).colorScheme.onErrorColor

TextTheme

// 公式
TextStyle {$type}TextStyle => Theme.of(context).textTheme.{$type}!

// 示例
TextStyle headlineLargeTextStyle => Theme.of(context).textTheme.headlineLarge!
TextStyle bodyLargeTextStyle => Theme.of(context).textTheme.bodyLarge!
TextStyle labelMediumTextStyle => Theme.of(context).textTheme.labelMedium!

BorderRadius

添加双精度值

// 公式
myBorderRadius + BorderRadius.add$type$(double value);

// 方法
addAll
addLeft
addTop
addRight
addBottom
addTopLeft
addTopRight
addBottomRight
addBottomLeft

EdgeInsets

添加双精度值

// 公式
myEdgeInsets + EdgeInsets.add$type$($type$: value);

// 方法
addAll
addLeft
addTop
addRight
addBottom

设置双精度值

// 公式
myEdgeInsets.copyWith($type$: value);

// 方法
setLeft
setTop
setRight
setBottom
setHorizontal
setVertical

仅

// 公式
EdgeInsets.only($type$: value);

// 方法
setLeft
setTop
setRight
setBottom
setHorizontal
setVertical

TextStyle

颜色

// 公式
TextStyle get withColor{$type} => textStyle.copyWith(color: {$type});

// 示例
TextStyle get withColorWhite38 => textStyle.copyWith(color: Colors.white38);
TextStyle get withColorWhite   => textStyle.copyWith(color: Colors.white);
TextStyle get withColorBlack70 => textStyle.copyWith(color: Colors.black70);

主题颜色

// 公式
TextStyle get with{$type}Color => textStyle.copyWith(color: Theme.of(context).colorScheme.{$type});

// 示例
TextStyle get withPrimaryColor(BuildContext context)   => textStyle.copyWith(color: Theme.of(context).colorScheme.primary);
TextStyle get withSecondaryColor(BuildContext context) => textStyle.copyWith(color: Theme.of(context).colorScheme.secondary);
TextStyle get withErrorColor(BuildContext context)     => textStyle.copyWith(color: Theme.of(context).colorScheme.error);

字重

// 公式
TextStyle get withWeight{$type} => textStyle.copyWith(fontWeight: FontWeight.w${type});

// 示例
TextStyle get withWeight100 => textStyle.copyWith(fontWeight: FontWeight.w100);
TextStyle get withWeight400 => textStyle.copyWith(fontWeight: FontWeight.w400);
TextStyle get withWeight700 => textStyle.copyWith(fontWeight: FontWeight.w700);

文本装饰

// 公式
with{$type} => textStyle.copyWith(decoration: TextDecoration.{$type});

// 示例
withUnderline   => textStyle.copyWith(decoration: TextDecoration.underline);
withOverline    => textStyle.copyWith(decoration: TextDecoration.overline);
withLineThrough => textStyle.copyWith(decoration: TextDecoration.lineThrough);

大小

withSize(double size) => textStyle.copyWith(fontSize: size);

DateTime

TimeOfDay toTime(); /// Creates [TimeOfDay] from [DateTime]
DateTime truncateTime(); /// Sets '0' everything other than [year, month, day].
DateTime withTimeOfDay(TimeOfDay time); /// copies [hour, minute] from [time] and sets '0' everything smaller

DateTime addYears(int years);
DateTime addMonths(int months);
DateTime addWeeks(int weeks);
DateTime addDays(int days);
DateTime addHours(int hours);
DateTime addMinutes(int minutes);
DateTime addSeconds(int seconds);

bool get isToday;
bool get isTomorrow;
bool get isYesterday;

bool isWithinFromNow(Duration duration); /// Checks is difference between [DateTime.now()] and [DateTime] is smaller than [duration]

Map

bool any(bool Function(K key, V value) test); // Similar to [Iterable.any]
bool every(bool Function(K key, V value) test); // Similar to [Iterable.every]

MapEntry<K, V>? firstWhereOrNull(bool Function(K key, V value) test); // Similar to [Iterable.firstWhereOrNull]
Map<K, V> where(bool Function(K key, V value) test); // Similar to [Iterable.where]
Map<T, V> whereKeyType<T>(); // Similar to [Iterable.whereType]
Map<K, T> whereValueType<T>(); // Similar to [Iterable.whereType]

MapEntry<K, V>? entryOf(K k); // Similar to `[]` operator but returns [MapEntry]

Set

Set<E> subset(int start, [int? end]); // Creates a new sub [Set]

String

String capitalize();
String capitalizeAll({String separator = ' ', String? joiner});
/// Retrieves first letters of each word separated by [separator] and merge them with [joiner]
String initials({String separator = ' ', String joiner = ''});

Iterable

[1, 2, 3].to2D(2) // [[1, 2], [3]]
[[1, 2], [3]].from2D // [1, 2, 3]
[Foo(), Foo(), Foo()].widgetJoin(() => Divider()) // [Foo(), Divider(), Foo(), Divider(), Foo()]

Iterable<int>

int sum(); // sum of every element
double average(); // average value of iterable
Uint8List toBytes(); // Create a byte array from this

Iterable<double>

double sum(); // sum of every element
double average(); // average value of iterable

IterableNum<T extends num>

T get lowest; // lower value in iterable
T get highest; /// highest value in iterable

原则

只实现了常用的小部件和辅助工具。

对于扩展，以下比较解释了背后的动机：

context.mediaQuery // BAD: 因此，它未被实现
MediaQuery.of(context) // GOOD: 更快读取，更具特征性

// MediaQuery.of(context).viewInsets.bottom
context.mediaQuery.viewInsets.bottom // BAD: 点的数量相同
context.bottomViewInset // GOOD: 少两个点，更好的可读性

// Theme.of(context).textTheme.bodyMediumTextStyle!
context.bodyMedium // BAD: 表达力较弱
context.bodyMediumTextStyle // GOOD: 表达力更强，更好的自动代码补全

包名称

受 google/quiver-dart 启发

flutter + quiver = fluiver

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用fluiver插件。

import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluiver Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello World',
                style: Theme.of(context).textTheme.bodyLarge!,
              ),
              SizedBox(height: 20),
              Text(
                'This is a demo of fluiver.',
                style: Theme.of(context).textTheme.bodyLarge!.copyWith(
                      color: Theme.of(context).colorScheme.primary,
                    ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}