Flutter实用工具集合插件fluttils的使用

Flutter实用工具集合插件fluttils的使用

fluttils 是一个帮助你在应用程序中编写更少代码的包。它通过选择一些常用的设计模式并将它们提取到新的类或函数中,避免你每次开发新应用时都必须自己创建这些模式。

示例

使用 BuildContext 扩展方法

void _(BuildContext context, Widget widget) {
  // fluttils:
  // flutter: 
  
  context.pop(); // 等同于 Navigator.of(context).pop();
  
  context.push(widget); // 等同于 Navigator.of(context).push(MaterialPageRoute((_) => widget));
  
  context.push(widget, replace: true); // 等同于 Navigator.of(context).pushReplacement(MaterialPageRoute((_) => widget));
  
  context.screenSize; // 等同于 MediaQuery.of(context).size;
}

使用带参数列表的 Text

import 'package:fluttils/fluttils.dart' as f;

void _(String label) {
    // fluttils:
    // flutter: 
    
    f.Text(label); // 等同于 Text(label);
  
    f.Text(label, [Colors.red]); // 等同于 Text(label, style: TextStyle(color: Colors.red));
    
    f.Text(label, [Colors.white, TextAlign.center, FontWeight.bold]); // 等同于 Text(label, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), textAlign: TextAlign.center);
}

使用简化版 Padding 小部件

import 'package:fluttils/fluttils.dart' as f;

void _(Widget widget) {
  // fluttils:
  // flutter: 

  f.Padding(all: 5, child: widget); // 等同于 Padding(padding: EdgeInsets.all(5), child: widget);

  f.Padding(height: 1, width: 3, child: widget); // 等同于 Padding(padding: EdgeInsets.symmetric(vertical: 1, horizontal: 3), child: widget);
  
  f.Padding(all: 4, left: 2, child: widget); // 等同于 Padding(padding: EdgeInsets.only(left: 2, right: 4, top: 4, bottom: 4), child: widget);
  
  f.Padding(all: 10, left: 15, height: 20, child: widget); // 等同于 Padding(padding: EdgeInsets.only(left: 15, right: 10, top: 20, bottom: 20), child: widget);    
}

使用 MapStack 作为 Stack 的替代品

import 'package:fluttils/fluttils.dart' as f;

void _() {
  // fluttils:
  // flutter: 

  f.MapStack({Alignment.center: Text("a")}); // 等同于 Stack(children: [Align(alignment: Alignment.center, child: Text("a"))]);

  f.MapStack({
    Alignment.topLeft: Icon(Icons.right_arrow),
    Alignment.bottomRight: Icon(Icons.add),
  }); // 等同于 Stack(children: [
    //   Align(alignment: Alignment.topLeft, child: Icon(Icons.right_arrow)),
    //   Align(alignment: Alignment.bottomRight, child: Icon(Icons.add)),
    // ]);
}

使用配置更简单的 Visibility 小部件

import 'package:fluttils/fluttils.dart' as f;

void _(Widget widget) {
  f.Visibility(visible: false, child: widget); // 等同于 Visibility(visible: false, child: widget);
  
  f.Visibility(visible: false, child: widget, level: f.VisibilityLevel.state()); // 等同于 Visibility(visible: false, child: widget, maintainState: true);

  f.Visibility(visible: false, child: widget, level: f.VisibilityLevel.animation()); // 等同于 Visibility(visible: false, child: widget, maintainState: true, maintainAnimation: true);
  
  f.Visibility(visible: false, child: widget, level: f.VisibilityLevel.size()); // 等同于 Visibility(visible: false, child: widget, maintainState: true, maintainAnimation: true, maintainSize: true);

  f.Visibility(visible: false, child: widget, level: f.VisibilityLevel.size(maintainSemantics: true)); // 等同于 Visibility(visible: false, child: widget, maintainState: true, maintainAnimation: true, maintainSize: true, maintainSemantics: true);
}

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

1 回复

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


当然,fluttils 是一个集合了多种实用工具的 Flutter 插件,它可以帮助开发者在开发过程中快速实现一些常见的功能。以下是一些关于如何使用 fluttils 插件的代码案例。

首先,确保你的 Flutter 项目已经添加了 fluttils 依赖。在 pubspec.yaml 文件中添加以下依赖:

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

然后运行 flutter pub get 来安装依赖。

1. 使用 Fluttils.deviceUtils 获取设备信息

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluttils Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Device Brand: ${Fluttils.deviceUtils?.brand}'),
              Text('Device Model: ${Fluttils.deviceUtils?.model}'),
              Text('Screen Width: ${Fluttils.screenUtils?.screenWidth}'),
              Text('Screen Height: ${Fluttils.screenUtils?.screenHeight}'),
            ],
          ),
        ),
      ),
    );
  }
}

2. 使用 Fluttils.networkUtils 进行网络请求

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluttils Network Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  String url = 'https://api.example.com/data'; // 替换为实际的API URL
                  var response = await Fluttils.networkUtils?.get(url);
                  setState(() {
                    responseData = response?.body ?? 'Error fetching data';
                  });
                },
                child: Text('Fetch Data'),
              ),
              Text('Response: $responseData'),
            ],
          ),
        ),
      ),
    );
  }
}

3. 使用 Fluttils.imageUtils 进行图片处理

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

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

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

class _MyAppState extends State<MyApp> {
  ImageProvider imageProvider;

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

  void loadImage() async {
    var imageBytes = await Fluttils.imageUtils?.getAssetImageBytes('assets/images/sample.png'); // 替换为实际的图片路径
    ui.Codec codec = await ui.instantiateImageCodec(imageBytes!);
    FrameInfo frameInfo = await codec.getNextFrame();
    imageProvider = frameInfo.image;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluttils Image Demo'),
        ),
        body: Center(
          child: imageProvider != null ? Image(image: imageProvider!) : CircularProgressIndicator(),
        ),
      ),
    );
  }
}

4. 使用 Fluttils.stringUtils 进行字符串处理

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String originalString = "Hello, Flutter!";
    String capitalizedString = Fluttils.stringUtils?.capitalize(originalString) ?? originalString;
    String reversedString = Fluttils.stringUtils?.reverse(originalString) ?? originalString;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluttils String Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Original String: $originalString'),
              Text('Capitalized String: $capitalizedString'),
              Text('Reversed String: $reversedString'),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用 fluttils 插件中的一些实用工具,包括获取设备信息、进行网络请求、处理图片以及处理字符串。你可以根据项目需求进一步扩展这些功能。

回到顶部