Flutter项目实战

Posted 黄毛火烧雪下

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter项目实战相关的知识,希望对你有一定的参考价值。

1.androidstudio 获取dart支持才会出现 下图,才可以单独运行

2.需要 flutter pub get

3.Android Studio 中使用 FlutterJsonBeanFactory 插件

注意点:需要保证该 Android Studio 窗口下是一个完整的Flutter项目(窗口下有且仅有一个Flutter项目,不能在文件夹内),否则会提示



最终代码中识别的代码

4.仿微信图库选择

名称likes是否维护url缺点
image-picker4635https://pub.flutter-io.cn/packages/image_picker太过简单,多选需要长按,不能限制数量
wechat_camera_picker420https://pub.dev/packages/wechat_camera_picker和crm项目包冲突,解决半天,无法搞定,影响性很大
images_picker140https://pub.flutter-io.cn/packages/images_picker和crm项目包冲突,解决半天,无法搞定,影响性很大

5.系统权限

permission_handler
https://pub.flutter-io.cn/packages/permission_handler

//获取拍照(camera、写)和相册权限()
import 'package:permission_handler/permission_handler.dart';
Future<void> _initData() async 
    Map<Permission, PermissionStatus> statuses = await [
      Permission.photos,
      Permission.camera,
    ].request();
    if (statuses.values.first.isGranted)  
  

6.安全距离

bottom: MediaQuery.of(context).padding.bottom

7.ListView嵌套GridView

由于 GridView 和 ListView 都是可以滚动的组件,所以嵌套的时候要注意把里面的组件改为不可滚动组件。
重要属性:

shrinkWrap: true, //解决无限高度问题
physics:NeverScrollableScrollPhysics(), //禁用滑动事件

8.get

https://pub.dev/packages/get

它集高性能状态管理、智能依赖注入和路由管理于一体,既快速又实用。

class FeedbackController extends GetxController 
 openGallery(int index, int num) async 
		update();
	




GetBuilder<FeedbackController>(builder: (_)
//更新页面


final controller = Get.put(FeedbackController());

///输入框监听
TextField(
         onChanged: (text) 
                     controller
                     ..content = text
                     ..update();
         ,
 )

eg:

import 'package:bruno/bruno.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';
import 'package:permission_handler/permission_handler.dart';

import '../../../../common/global_app_config.dart';
import '../../../../common/utils/keyboard_util.dart';


class FeedbackController extends GetxController 
  int value = 0;
  List<String> photoEntity = [];
  int maxNum = 3; //图片最大选择数
  ///反馈内容
  String content = '';
  int contentMaxNum = 300; //反馈内容最大字数

  /// 获取当前展示个数,用来判断是否显示加号图片
  int getShowNum() 
    int showNum = 0;
    if (photoEntity.length >= 3) 
      showNum = maxNum;
     else 
      showNum = photoEntity.length + 1;
    
    return showNum;
  

  /// 打开相册
  /// [index] 索引
  openGallery(int index, int num) async 
    if (photoEntity.length >= 3) 
      print("超出了3张");
      return;
    
    if (index == photoEntity.length) 
      Map<Permission, PermissionStatus> statuses = await [
        Permission.photos,
        Permission.camera,
      ].request();
      if (statuses.values.first.isGranted) 
        await GlobalConfig.getInstance()
            .syncImagesData(maxNum - photoEntity.length)
            .then((map) 
          var list = map?["path"] as List<Object?>;
          for (var element in list) 
            photoEntity.add(element.toString());
          
          update();
        );
      
    
  

  //调用反馈接口
  requestFeedback(BuildContext context) 
    if (value == 0) 
      BrnToast.show("请选择问题类型", context);
      return;
    
    if (content.isEmpty) 
      BrnToast.show("请填写反馈内容", context);
      return;
    
    KeyboardUtils.hideKeyboard(context);
  

9.flutter 传值给Android

//Flutter

 Future<Map<Object?, Object?>?> syncImagesData(int num) async 
    // 原生响应 getGlobalData 方法
   return await _methodChannel.invokeMethod<Map<Object?,Object?>?>("getImagesData","num": num);
  
  

//Android

 var num: Int = call.argument<Int>("num") ?:0

10.flutter 键盘出现时候导致固定底部的按钮被顶上来

Scaffold(
      resizeToAvoidBottomInset: false,
      )

12.需要重启的场景

  • 加入图片
  • JsonConvert 中加入新的类

13.json 中data为数组格式的解析方式

class JsonConvert 
	static final Map<String, JsonConvertFunction> _convertFuncMap = 
    (FeedBackTypeModelEntity).toString(): FeedBackTypeModelEntity.fromJson,
    (FeedBackModelEntity).toString(): FeedBackModelEntity.fromJson,
		(MessageControl).toString(): MessageControl.fromJson,
		(UsedCarOrderModelEntity).toString(): UsedCarOrderModelEntity.fromJson,
		(UsedCarOrderStatusCountEntity).toString(): UsedCarOrderStatusCountEntity.fromJson,
  ;

  /// 反馈类型数据
  var getFeedbackTypeResult = ValueNotifier<LoadState?>(null);

  void getFeedbackType() 
    getFeedbackTypeResult.value = Loading();
    Network.getInstance().getList<FeedBackTypeModelEntity>(
        "api/app/feedback/type", (result) 
          print("111111111$result.data");
      getFeedbackTypeResult.value = Loaded(result.data);
    , (error) 
      LoadError(error.code, error.message);
    );
  

###14.返回到主页
跳转入口加入

   Navigator.pushAndRemoveUntil(context,
             MaterialPageRoute(builder: (context) => FeedBackResultPage()),
             (Route<dynamic> route) => false);

14.flutter抓包

    client.findProxy = (uri) 
         //proxy all request to localhost:8888
         return 'PROXY 172.20.28.248:8888';
       ;

15.返回

返回上一层

Navigator.pop(context);

返回到原生

SystemNavigator.pop();

以上是关于Flutter项目实战的主要内容,如果未能解决你的问题,请参考以下文章

Flutter微信项目实战01基本框架搭建

Flutter学习-项目实战

最强Android 项目集成 Flutter 实战分享!不看看?

最强Android 项目集成 Flutter 实战分享!不看看?

Flutter 项目实战之网络抓包

Flutter 项目实战之网络抓包