Flutter开发总结

Flutter

使用Flutter一直是拒绝的,感觉追不动新技术了。但是当看到用的人越来越多,flutter的书籍已经全面超过OC和Swift了。是时候低下还有几许青丝的头了,虽然学不精,但我学的广。!_!

一、准备工作

找一些网上的免费资料学起来,flutter中文网站看一个大概,一般感觉看不下去,先看个大概吧。然后详细的学习Flutter实战,将所有的代码都敲一遍。做到所有的功能自己实现。
建议使用Mac来开发,那么搭建环境会比较方便。Flutter使用Stable Channel,直接上最新的版本,虽然有一点坑,碰到问题后网上的解决方法有点少。但是办法总比困难多,学习的太顺利,记住的东西太少。
Dart语言的学习感觉花一点时间过一下就好,简单的定义变量,函数,集合看一下,够用。

二、安装及升级

注意:/Public/Flutter/flutter是我本地的路径,需要替换。

  1. 参考https://flutter.dev/community/china上的描述,将flutter从下载到本地。git clone -b stable https://github.com/flutter/flutter.git
  2. 执行flutter doctor进行dart SDK的下载。
  3. vim .bash_profile中添加export PATH=~/Public/Flutter/flutter/bin:$PATH
  4. source .bash_profile 让PATH生效。
  5. 在android studio和VS code安装flutter插件。
  6. flutter upgrade 在/Users/arthurwang/Public/Flutter/flutter 安装flutter路径中进行。

三、 常用布局

  1. Container: 只有一个子Widget。默认充满,包含了padding、margin、color、宽高、decoration等。
  2. Padding: 只有一个子Widget。只用于设置Padding,常用于嵌套child,给child设置padding。
  3. Center:只有一个子Widget。只用于居中显示,常用于嵌套child,给child设置居中。
  4. Stack:可以有多个子Widget。子Widget堆叠在一起。
  5. Column:可以有多个子Widget。垂直布局。
  6. Row: 可以有多个子Widget。水平布局。
  7. Expanded:只有一个子Widget。在Column和Row中充满。(不会超出父视图)
  8. ListView:可以有多个子Widget。
  9. Align: 只有一个子Widget。 绝对布局,可以设置位置。
  10. SizeBox: 强制设置它的孩子宽度或者高度为指定值。传width、height、child。

明白这些布局的使用,基本能够满足页面的布局。

四、组件

  1. MaterailApp:作为APP顶层的主要入口,可配置主题,多语言,路由等。
  2. Scaffold: 用户页面承载Widget,包含appbar、snackbar、drawer等material design设定。
  3. AppBar: 用于Scaffold的appbar,内有标题、二级页面返回按键等。
  4. Text:显示文本,可通过style设置TextStyle来设置字体样式等。
  5. RichText: 福文本。设置TextSpan,可以拼接出富文本场景。
  6. TextField: 文本输入框。
  7. Image: 图片加载。
  8. FlatButton: 按键点击。

明白基本组件,可以构建一般页面了。

五、 网络请求

有两种思路(1)通过flutter和native交互,发送url和params到native,然后返回结果。(2)通过flutter和native交互,从native获取params然后在flutter进行网络请求。
考虑到Android的网络第三方库使用注解来实现请求,所以放弃了思路(1),尝试思路(2)并封装请求。
网络请求官方推荐第三方库Dio


class ApiService {
  // 单例配置
  static ApiService get apiService => _getInstance();
  static ApiService _apiService = ApiService._internal();

  // 网络请求配置
  static const _platform = const MethodChannel("******");
  static Dio _dio = Dio();

  String? _baseUrl;
  static const int _GET = 0;
  static const int _POST = 1;

  // 初始化
  factory ApiService() => _getInstance();

  static ApiService _getInstance() {
    return _apiService;
  }

  ApiService._internal() {
    _dio.options.connectTimeout = 5000;
    _dio.options.receiveTimeout = 3000;
    _dio.options.contentType = Headers.formUrlEncodedContentType;
    _dio.options.responseType = ResponseType.json;

    _setBaseUrl();
  }

  Future<void> _setBaseUrl() async {
    try {
      String? baseUrl = await _platform.invokeMethod("***") as String?;
      if (null != baseUrl) {
        _dio.options.baseUrl = baseUrl;
        _baseUrl = baseUrl;
      }
    } on PlatformException catch (e) {
      // Do nothing
    }
  }

  Future<Map<String, dynamic>?> _request(
      int type, String url, Map<String, String>? params) async {
    if (null == _baseUrl) {
      await _setBaseUrl();
    }

    Map<String, String>? tokenParams;
    try {
      Map<String, String>? paramsMap;
      if (null != params) {
        paramsMap = Map();
        paramsMap["params"] = json.encode(params);
      }

      tokenParams = Map<String, String>.from(
          await _platform.invokeMethod("***", paramsMap));
    } on PlatformException catch (e) {
      // Do nothing
    }

    print("ApiService url is $url, params is $tokenParams");

    Response<Map<String, dynamic>>? response;
    try {
      switch (type) {
        case _GET:
          response = await _dio.get(url, queryParameters: tokenParams);
          break;

        case _POST:
          response = await _dio.post(url, queryParameters: tokenParams);
          break;
      }
    } on DioError catch (e) {
      print("$url 错误 ${e.message}");
      throw RequestError(kUnknownError, "服务器走失了,请稍后重试");
    }

    print("$url response is $response");

    if (0 != response?.data?["status"]) {
      throw RequestError(response?.data?["status"], response?.data?["msg"]);
    } else {
      print("ApiService response.data is ${response?.data}");
      return response?.data;
    }
  }

  // 网络请求

  // 获取信息
  Future<UserInfoEntity> getUserInfo() async {
    Map<String, dynamic>? response =
        await _request(_GET, "url/url/url", null);

    if (null != response) {
      return UserInfoEntity().fromJson(response);
    } else {
      throw RequestError(kUnknownError, "服务器走失了,请稍后重试");
    }
  }

采用工厂模式创建一个网络请求,在创建时设置好配置。之后添加新的接口,只需要在底部依次添加。

 Future<UserInfoEntity> getUserInfo() async {
    Map<String, dynamic>? response =
        await _request(_GET, "url/url/url", null);

    if (null != response) {
      return UserInfoEntity().fromJson(response);
    } else {
      throw RequestError(kUnknownError, "服务器走失了,请稍后重试");
    }
  }

采用处

try {
      UserInfoEntity entity = await ApiService.apiService.getUserInfo();
      userInfoData = entity.data;
      notifyListeners();
    } on RequestError catch (e) {
      print("e.message is ${e.message}, e.code is ${e.code}");
    }

其中的UserInfoEntity为定义的Model,RequestError为自定错误类型。

六、 Json转Model

强烈推荐Android Studio的插件FlutterJsonBeanFactory,使用方法参照官网。如果要修改或重建Model,那么将之前的model删除再创建一次。有一些小的修改,可以用alt+J来刷新。
注意:Json数据如果不能“Make”,那么可以试下将最后一个逗号删除。

七、 状态共享

当用户信息此数据需要用在很多页面,那么考虑采用官方推荐的provider来实现刷新Widget。

void main() => runApp(ChangeNotifierProvider<PersonalCenterProviderModel>.value(
      value: PersonalCenterProviderModel(),
      child: MyApp(),
    ));

建议将Provider添加到顶部,方便在任何页面中获取UserInfo。

class PersonalCenterProviderModel with ChangeNotifier {
  UserInfoData? userInfoData;

  void refreshUserInfo() async {
    try {
      UserInfoEntity entity = await ApiService.apiService.getUserInfo();
      userInfoData = entity.data;
      notifyListeners();
    } on RequestError catch (e) {
      print("e.message is ${e.message}, e.code is ${e.code}");
    }
  }

}

PersonalCenterProviderModel类中可以添加很多方法来更新数据。

PersonalCenterProviderModel _model =
        Provider.of<PersonalCenterProviderModel>(context);
backgroundImage: NetworkImage(_model.userInfoData?.portrait ?? defaultImage),

使用方式,当userInfo中的portrait发生改变时,那么页面会重建。

PersonalCenterProviderModel _model =
      Provider.of<PersonalCenterProviderModel>(context, listen: false);
      _model.refreshUserInfo();

如果仅仅是获取model来调用方法,那么将listen设置为false。

八、Flutter和Native交互

参考module集成到iOS和Android。
iOS的使用方式

- (void)initialFlutterVC
{
    FlutterEngine *flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
    [flutterEngine run];
    [GeneratedPluginRegistrant registerWithRegistry:flutterEngine];
    self.flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self initialFlutterMethods];
    
    self.flutterViewController.modalPresentationStyle = UIModalPresentationFullScreen;
}

打开Flutter页面

- (void)personalButtonDidClick:(id)sender
{
    [self presentViewController:self.flutterViewController animated:YES completion:nil];
}

记得提前初始化flutterEngine,可以加快打开的速度。
Android的使用方式

flutterEngine = new FlutterEngine(this);
        flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
        FlutterEngineCache.getInstance().put(engine_personal_center, flutterEngine);

提前初始化flutterEngine

btn_jump.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(FlutterActivity.
                        withCachedEngine(engine_personal_center).build(HomeActivity.this));
            }
        });

通过缓存打开Flutter页面。

添加交互方法

final String CHANNEL = "qji_flutter/getUserInfo";
        MethodChannel methodChannel = new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL);
        methodChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {
                switch (call.method) {
                    case "*":
                        result.success(API.SERVER_URL);
                        break;
                    case "*":
                        String paramsStr = call.argument("params");
                        Gson gson = new Gson();
                        Type jsonType = new TypeToken<HashMap<String, String>>() {
                        }.getType();
                        HashMap<String, String> params = gson.fromJson(paramsStr, jsonType);
                        result.success(ParamManager.Companion.token(params));
                        break;
                    case "*":
                        EventMessage<String> eventMessage = new EventMessage<>();
                        eventMessage.setTag(EVENT_LOGOUT);
                        EventBus.getDefault().post(eventMessage);

                        UserAccount.getInstance().logout();

                        break;

                    case "*":
                        String path = call.argument("imagePath");
                        if (null == path || path.isEmpty()) {
                            result.error("1", "上传失败", null);
                        } else {
                            uploadImageToOSS(path, result);
                        }

                        break;

                    case "*":
                        // DO Nothing
                        break;
                    default:
                        result.notImplemented();
                        break;
                }
            }
        });

iOS与Android的用法类似,注意必须是同一个flutterEngine,不然会找不到。

九、iOS打包

如果打包的证书不是debug或release,那么需要FLUTTER_BUILD_MODE设置为Release才能进行Ad-hoc和Release打包。
在../qiji_flutter/.ios/Flutter/flutter_export_environment.sh中添加
export "FLUTTER_BUILD_MODE=Release"

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,639评论 1 302
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,591评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,050评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,169评论 0 180
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,976评论 1 258
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,876评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,476评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,229评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,095评论 6 234
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,579评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,356评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,698评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,272评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,168评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,605评论 3 210
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,645评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,035评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,609评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,698评论 2 233

推荐阅读更多精彩内容