Flutter 学习记录

1.bloc使用记录

1）首先我们需要定义三个文件

2）xxx.bloc    发起网络请求获取数据的事件，把数据yield出去

3）xxx.state    根据状态处理UI变化 比如：网络请求success  failed  progress等 并且携带解析数据传回页面

4）xxx.event    触发事件，比如开始点击，选择菜单，确定取消等

5）初始化一个bloc

例：

import 'package:platform_sdk/platform_sdk.dart';

import 'bloc/bloc.dart';

import 'widget/my_joycoin_widget.dart';

class MyJoycoinPage extends StatelessWidget {

  const MyJoycoinPage({Key key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return BlocProvider<MyJoycoinBloc>(

      create: (BuildContext context) => MyJoycoinBloc(

        membershipCenterRepository: PlatformSdk.membershipCnRepository,

      )..add(MyJoycoinStarted(pageNumber: 1)),

      child: MyJoycoinWidget(),

    );

  }

}

6）监听bloc接收数据

import '../bloc/bloc.dart';

import 'package:platform_sdk/platform_sdk.dart';

class MyJoycoinWidget extends StatelessWidget {

  MyJoycoinWidget({Key key});

  @override

  Widget build(BuildContext context) {

    return BlocListener<MyJoycoinBloc, MyJoycoinState>(

        listener: (context, state) {

          if (state is MyJoycoinLoadSuccess) {

            JoyToast(

              '请求成功！',

              context,

              key: Key('myJoycoinReceivePage_message_joyToast'),

            );

          }

        },

        child: BlocBuilder<MyJoycoinBloc, MyJoycoinState>(

            key: Key('myJoycoinReceivePage_title_blocBuilder'),

            builder: (context, state) {

              if (state is MyJoycoinLoadFailure) {

                return Scaffold(

                  body: JoyConnectivityIssue(

                    key: Key('myJoycoinWidget_failure_joyLoadingIndicator'),

                    title: "localization.error.connectivityIssueTitle",

                    description:

                        " localization.error.connectivityIssueDescription",

                    retryButtonTitle:

                        "localization.dealerAppointmentCnStrings.refreshButtonText",

                    onRetryButtonPressed: () {},

                  ),

                );

              }

              if (state is MyJoycoinLoadInProgress) {

                return Scaffold(

                  body: Center(

                    child: JoyLoadingIndicator(

                      key:

                          Key('myJoycoinWidget_inProgress_joyLoadingIndicator'),

                      size: 50,

                    ),

                  ),

                );

              }

              if (state is MyJoycoinLoadSuccess) {

                var dealerList = state.orderInfo;

                return Scaffold(

                  body: Center(

                      child: ListView.builder(

                    key: Key('myJoycoinReceivePage_content_listView'),

                    itemCount: dealerList.length,

                    itemBuilder: (context, index) {

                      var item = dealerList[index];

                      return JoyListItem(

                        key: Key('myJoycoinWidget_enabled'),

                        title: item,

                        trailingLabel: item,

                      );

                    },

                    physics: AlwaysScrollableScrollPhysics(),

                    shrinkWrap: true,

                  )),

                );

              }

              return Container();

            }));

  }

}

1.flutter插件

fish_redux: 闲鱼团队推出的

cached_network_image: 网络图片、缓存图片

flutter_html: 展示html

image_picker: 选择图片、上传图片（单图）

flutter_webview_plugin: web浏览器，目前在ios有个头部滑动bug

qr_flutter: 二维码生成、解码

photo_view: 图片放大等

dio: 网络数据请求等

fluwx: 微信登录、微信分享等

url_launcher: 打开第三方应用、URL链接

awesome_dialog: 提示框

shared_preferences: 本地信息存储

path_provider: 本地路径

crypto: 编码解码

share_extend: 调起系统分享

multi_image_picker: 选择多图

encrypt: 编码解码

fake_alipay: 支付宝SDK

carousel_slider: 图片滚动，上下左右

webview_flutter: 我个人比较倾向的web浏览器

uni_links: 设置applink、deeplink、scheme等

flui: 骨架屏、加载中等Flutter上使用的UI

fake_push: 腾讯信鸽推送