Flutter 第三方库

360 阅读2分钟

0. Provider

Provider 是Google 官方推荐的一种 Flutter 页面状态管理组件,本质上就是对 InheritedWidget 的包装,使它们更易于使用和重用。这里只对其使用做简单汇总.

参考文档1

参考文档2

创建需要监听的对象需要继承自ChangeNotifier

class Model extends ChangeNotifier {
  int _count = 3;
  int _age = 10;

  int get count => _count;
  int get age => _age;

  ager(int value) {
    _age = value;
    debugPrint('value---------$value');
    notifyListeners();
  }

  counter(int value) {
    _count = value;
    debugPrint('value---------$value');
    notifyListeners();
  }
}

ChangeNotifierProvider

更新UI一般建议Selector 代替 Consumer,consumer在数据模型变化后就会刷新,而Selector 只在数据模型特定的值发生变化时更新。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
    
      // 使用时需要用ChangeNotifierProvider进行包裹
      body: ChangeNotifierProvider<Model>(
          create: (_) => Model(),
          builder: (context, child) {
             
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  
                  //局部刷新1
                  Selector<Model, int>(
                    //布局UI
                    builder: (context, age, child) {
                      return Text(age.toString());
                    },
                    //判断新旧不同时才会刷新
                    shouldRebuild: (previous, next) {
                      return previous != next;
                    },
                    //筛选具体字段
                    selector: (context, model) {
                      return model.age;
                    },
                  ),
                  
                  //局部刷新2
                  Consumer<Model>(builder: (context, model, child) {
                  
                    return Text(
                      Provider.of<Model>(context).count.toString(),
                      // context.watch<Model>().count.toString(),
                      // context.read<Model>().counter(2);

                    );
                  }),
                  ElevatedButton(
                    onPressed: () {
                      Provider.of<Model>(context, listen: false).counter(2);
                      Provider.of<Model>(context, listen: false).ager(4);
                    },
                    child: const Text('Press'),
                  ),
                ],
              ),
            );
          }),
    );
  }
}

1. IDKit

可以快速实现单项或者多项选择

2. bruno

UI组件库

3. fsuper

封装UI

Simulator Screen Shot - iPhone 14 Pro - 2023-10-13 at 15.29.11.png

4. sprintf

字符串格式化

String name = 'zhangsan';

List<String> pet = ['dog','cat'];

String test = sprintf('his name is %s',[name]);

String test2 = sprintf('%s has two pets %s and %s',[name,pet[0],pet[1]]);

5. date_format

日期格式化库

print(formatDate(DateTime(2020, 12, 23), [yyyy, '-', mm, '-', dd]));
//2020-12-23

print(formatDate(DateTime(2020, 2, 21), [yy, '-', M, '-', d]));
//20-feb-21

print(formatDate(
      DateTime(2020, 12, 23, 15, 40, 10), [HH, ':', nn, ':', ss]));
//15:40:10

print(formatDate(
      DateTime(2020, 12, 23, 15, 40, 10), [HH, ':', nn, ':', ss, z]));
//15:40:10+0100

6. flutter_scrollview_observer

flutter_scrollview_observer 内部实现原理是基于官方 ScrollController提供的 jumpTo 和 animateTo 方法,侵入性低,且防抖动。

列表滚动定位