Flutter 使用总结

Flutter 安装

1. 下载：Flutter SDK；

   1. 配置环境变量：

      1. 打开终端，打开环境变量配置：open ~/.zshrc；

      2. 如果没有.zshrc，就新建：vim ~/.zshrc；

      3. 配置环境变量：

         export PATH
         export PATH export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 
         export PUB_HOSTED_URL=https://pub.flutter-io.cn # 国内用户需要设置
         export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 国内用户需要设置
         export PATH=${PATH}:/flutter的存储地址/flutter/bin:$PATH
         
         # 最后一行举例：
         # export PATH=${PATH}:/Users/xxx/Documents/code/flutter/bin:$PATH
         

      4. 保存并退出编辑：:wq；

      5. 重新保存一下配置：source ~/.zshrc，来刷新一下，让我们的配置立即生效；

      6. 运行一下看是否配置好：flutter doctor；

2. 下载：Android Studio；

   1. Android Studio安装：Flutter插件；打开Android Studio，打开路径：Android Studio->Preferences->Plugins->Marketplace->搜索Flutter，下载Flutter；
   2. 安装：Dart插件；（下载Flutter插件，会让先下载Dart插件）
   3. 重启Android Studio让插件生效；
   4. 配置Flutter SDK路径（前提是要先打开一个Flutter项目，才能在Languages & Frameworks下面看到Flutter和Dart配置入口），就是下载的Flutter SDK的存放路径：打开路径：Android Studio->Preferences->Languages & Frameworks->Flutter->Flutter SDK path，选择下载的Flutter SDK的存放路径；
   5. 配置Dart路径：一般配置好Flutter SDK路径，Dart路径会自动配置，可在路径：Android Studio->Preferences->Languages & Frameworks->Dart->Dart SDK path，查看是否配置成功。

3. 下载：Xcode；

4. 打开Android Studio的命令行，执行：flutter doctor，使用Flutter的语法进行检测；

Flutter 语法

1. 命令行

   // 配置检测：首次执行Flutter命令的时候，会自动下载依赖项并自行编译。如果有问题，按照提示，依次解决。
   flutter doctor
   
   // 打包apk
   flutter build apk
   
   // 清空缓存
   flutter clean
   
   // 更新依赖
   flutter pub upgrade
   
   

2. 解决ListView嵌套ListView不显示和滑动冲突：

   1. 解决方法如下：

      shrinkWrap: true, //为true可以解决子控件必须设置高度的问题
      physics: NeverScrollableScrollPhysics(), //禁用滑动事件
      

   2. 示例代码如下：

      @override
      Widget build(BuildContext context) {
          return Container(
              child: ListView(
                  children: <Widget>[
                      _topSearchView(),
                      _listView(),
                  ],
              ),
          );
      }
      

      Widget _topSearchView(){
          return Container(
              width: ScreenUtil().setWidth(750),
              height: ScreenUtil().setHeight(80),
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.fromLTRB(10, 5, 5, 10),
              decoration: BoxDecoration(
                  color:Colors.white,
                  borderRadius: BorderRadius.circular((10.0)),
                  border: Border.all(
                      width:0.5,color:Colors.black12,
                  )
              ),
              child: Row(
                  children: <Widget>[
                      Icon(Icons.search),
                      Text('搜索')
                  ],
              )
          );
      }
      
      Widget _listView(){
          return Container(
              child: ListView.builder(
                  shrinkWrap: true, //为true可以解决子控件必须设置高度的问题
                  physics:NeverScrollableScrollPhysics(),//禁用滑动事件
                  itemCount: 10,
                  itemBuilder: (context,index){
                      return _item(context,index);
                  },
              ),
          );
      }
      

常见错误

1. iPhone真机运行，报错：无法打开“iproxy”，因为无法验证开发者，这个问题可能是因为权限不够，执行这句命令就可以搞定：

   sudo xattr -d com.apple.quarantine /Users/zions/development/flutter/bin/cache/artifacts/usbmuxd/iproxy
   

2. 执行flutter语法报错：command not found: flutter：应该是环境变量配置有问题，重新走一下上面的配置环境变量的步骤。

3. 在Android Studio的终端执行flutter doctor报错：

   1. 错误一：

      cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
      

      然后执行：path/to/sdkmanager --install "cmdline-tools;latest"后报错：

      zsh: no such file or directory: path/to/sdkmanager
      

      解决方法：参考错误二；

   2. 错误二：

      Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.`
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
      

      然后执行：flutter doctor --android-licenses后报错：

      Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.
      

      解决方法：
      1. 打开SDK Manager -> Appearance & Behavior -> System Setting -> Android SDK -> SDK Tools；
      2. 选中Android SDK Command-line Tools (latest)；
      3. 点击下方Apply；
      4. 进行下载操作；
      5. 下载完成后，点击finish关闭下载页，然后点击Appley应用即可；

   3. 错误三：执行Run报错：

      Error running pod install
      Error launching application on iPhone 13 Pro.
      

      解决方法：
      1. ；

   4. 错误四：执行Run报错：

          ――― TEMPLATE END ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
      
          [!] Oh no, an error occurred.
      
          Search for existing GitHub issues similar to yours:
          https://github.com/CocoaPods/CocoaPods/search?q=dlopen%28%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.4%2Flib%2Fffi_c.bundle%2C+0x0009%29%3A+tried%3A+%27%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.4%2Flib%2Fffi_c.bundle%27+%28mach-o+file%2C+but+is+an+incompatible+architecture+%28have+%27arm64%27%2C+need+%27x86_64%27%29%29%2C+%27%2Fusr%2Flib%2Fffi_c.bundle%27+%28no+such+file%29+-+%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.4%2Flib%2Fffi_c.bundle&type=Issues
      
          If none exists, create a ticket, with the template displayed above, on:
          https://github.com/CocoaPods/CocoaPods/issues/new
      
          Be sure to first read the contributing guide for details on how to properly submit a ticket:
          https://github.com/CocoaPods/CocoaPods/blob/master/CONTRIBUTING.md
      
          Don't forget to anonymize any private data!
      
          Looking for related issues on cocoapods/cocoapods...
      
      Error output from CocoaPods:
      ↳
          Searching for inspections failed: undefined method `map' for nil:NilClass
      
      Error running pod install
      Error launching application on iPhone 13 Pro.
      

      解决方案：可能是因为 M1 芯片的原因：

      1. 执行：sudo arch -x86_64 gem install ffi；
      2. 执行：arch -x86_64 pod install； // M1 芯片在 Cocoapods 执行 pod install 下载第三方库前面都需要添加arch -x86_64；

   5. 错误五：报错：

      Could not build the application for the simulator.
      Error launching application on iPhone 13 Pro.
      

      解决方案：

      1. 执行：flutter clean，重新运行项目，如果不行试试下一步；

      2. 执行：flutter channel，查看您当前使用的flutter的分支；

         执行结果：

         // 查看当前我的flutter处于stable(稳定)分支
         Flutter channels:
           master
           dev
           beta
         * stable
         
         

         官网上有一句话：我们强烈建议跟踪flutter的stable分支，这是Flutter稳定分支。 如果你需要查看最新的变化，你可以跟踪master分支，但注意这是开发分支，所以稳定性要低得多。

      3. 执行：flutter channel master或flutter channel beta，切换到官方master主分支或beta分支开发即可；

   6. 错误六：更新Flutter版本后报错：

      /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_math_fork-0.3.3/lib/src/widgets/selectable.dart:407:7: Error: The non-abstract class 'InternalSelectableMathState' is missing implementations for these members:
      
      TextSelectionDelegate.copySelection
      TextSelectionDelegate.cutSelection
      TextSelectionDelegate.pasteText
      TextSelectionDelegate.selectAll Try to either
      provide an implementation,
      inherit an implementation from a superclass or mixin,
      mark the class as abstract, or
      provide a 'noSuchMethod' implementation.
      class InternalSelectableMathState extends State ^^^^^^^^^^^^^^^^^^^^^^^^^^^ /C:/src/flutter/packages/flutter/lib/src/services/text_input.dart:985:8: Context: 'TextSelectionDelegate.copySelection' is defined here. void copySelection(SelectionChangedCause cause); ^^^^^^^^^^^^^ /C:/src/flutter/packages/flutter/lib/src/services/text_input.dart:965:8: Context: 'TextSelectionDelegate.cutSelection' is defined here. void cutSelection(SelectionChangedCause cause); ^^^^^^^^^^^^ /C:/src/flutter/packages/flutter/lib/src/services/text_input.dart:973:16: Context: 'TextSelectionDelegate.pasteText' is defined here. Future pasteText(SelectionChangedCause cause); ^^^^^^^^^ /C:/src/flutter/packages/flutter/lib/src/services/text_input.dart:979:8: Context: 'TextSelectionDelegate.selectAll' is defined here. void selectAll(SelectionChangedCause cause); ^^^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_datetime_picker-1.5.1/lib/flutter_datetime_picker.dart:311:32: Warning: Operand of null-aware operation '??' has type 'Color' which excludes null.
      
      'Color' is from 'dart:ui'. color: theme.backgroundColor ?? Colors.white, ^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_neumorphic-3.1.0/lib/src/widget/button.dart:200:14: Error: 'AnimatedScale' is imported from both 'package:flutter/src/widgets/implicit_animations.dart' and 'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'. child: AnimatedScale( ^^^^^^^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_neumorphic-3.1.0/lib/src/widget/switch.dart:167:20: Error: 'AnimatedScale' is imported from both 'package:flutter/src/widgets/implicit_animations.dart' and 'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'. child: AnimatedScale( ^^^^^^^^^^^^^
      
      FAILURE: Build failed with an exception.
      
      * Where:
      Script '/Users/hsh/Documents/code/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 1102
      
      * What went wrong:
      Execution failed for task ':app:compileFlutterBuildDebug'.
      > Process 'command '/Users/hsh/Documents/code/flutter/bin/flutter'' finished with non-zero exit value 1
      
      * Try:
      Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
      
      * Get more help at https://help.gradle.org
      
      BUILD FAILED in 29s
      Exception: Gradle task assembleDebug failed with exit code 1
      

      1. 解决方案一：(亲测有效-Andy)

         You need to upgrade your dependencies to fix this issue, so run:
         
         flutter pub upgrade
         

      2. 解决方案二：

         Solution: just add flutter_math_fork: ^0.5.0 to your dependencies in pubspec.yaml to force Flutter to use the newer version of the package.
         

   7. 错误七：定位问题：Android定位没有问题；iOS定位失败，获取不到位置信息：

      解决办法：

      NSLocationUsageDescription
      用于定位使用
      NSLocationAlwaysUsageDescription
      用于始终定位你的当前位置
      NSLocationWhenInUseUsageDescription
      用于定位您的当前位置
      
      最好还要加上-这个必须要加上，不然定位还是会失败
      NSLocationAlwaysAndWhenInUseUsageDescription
      用于定位您的当前位置
      

   8. 错误八：更新flutter，运行报错；

      /Users/kris/Documents/WorkSpace/flutter/.pub-cache/hosted/pub.flutter-io.cn/camera-0.8.1+7/android/src/main/java/io/flutter/plugins/camera/features/resolution/ResolutionFeature.java:135: 警告: [deprecation] CamcorderProfile中的get(int,int)已过时 return CamcorderProfile.get(cameraId, CamcorderProfile.QUALITY_HIGH); ^ /Users/kris/Documents/WorkSpace/flutter/.pub-cache/hosted/pub.flutter-io.cn/camera-0.8.1+7/android/src/main/java/io/flutter/plugins/camera/features/resolution/ResolutionFeature.java:139: 警告: [deprecation] CamcorderProfile中的get(int,int)已过时 return CamcorderProfile.get(cameraId, CamcorderProfile.QUALITY_2160P); ^ /Users/kris/Documents/WorkSpace/flutter/.pub-cache/hosted/pub.flutter-io.cn/camera-0.8.1+7/android/src/main/java/io/flutter/plugins/camera/features/resolution/ResolutionFeature.java:143: 警告: [deprecation] CamcorderProfile中的get(int,int)已过时 return CamcorderProfile.get(cameraId, CamcorderProfile.QUALITY_1080P); ^ /Users/kris/Documents/WorkSpace/flutter/.pub-cache/hosted/pub.flutter-io.cn/camera-
      

      解决办法：

      1. 更新第三方库camera的版本号，在pubspec.yaml里面配置；
      2. 执行flutter pub upgrade更新版本库；

   9. 错误九：更新Flutter报错：CamcorderProfile deprecated in Android API level 31；

      解决办法：

      1. 更新compileSdkVersion和targetSdkVersion版本号，路径在android/app/build.gradle：

      
      android {
      
      // 重点是要更新这个
      compileSdkVersion 31
      
      sourceSets {
          main.java.srcDirs += 'src/main/kotlin'
      }
      ...
      ...
      ...
      
      
      defaultConfig {
          // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
          applicationId "com.yphsh.nrp.koc"
          minSdkVersion 21
          targetSdkVersion 31
          versionCode flutterVersionCode.toInteger()
          versionName flutterVersionName
          ndk {
              abiFilters 'armeabi', 'armeabi-v7a', 'x86', 'x86_64', 'mips', 'mips64', 'arm64-v8a'
          }