阅读 761

Flutter开发总结

image.png

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

一、准备工作

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

二、安装及升级

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

  1. 参考flutter.dev/community/c… clone -b stable github.com/flutter/flu…
  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 = "*";
        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"

文章分类
前端
文章标签