Flutter 使用总结
Flutter 安装
-
下载:Flutter SDK;
- 配置环境变量:
打开终端,打开环境变量配置:
open ~/.zshrc
;如果没有
.zshrc
,就新建:vim ~/.zshrc
;-
配置环境变量:
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:/xxxflutter的存储地址xxx/bin" # 最后一行举例: # export PATH=${PATH}:/Users/xxx/Documents/code/flutter/bin:$PATH # export PATH="$PATH:/Users/xxx/Documents/code/flutter/bin" # Flutter配置 #export PATH="$PATH:/Users/andy/Documents/code/flutter/bin" #export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH #export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录,替换为你自己的即可 #export PATH=${PATH}:${ANDROID_HOME}/tools #export PATH=${PATH}:${ANDROID_HOME}/platform-tools #export PUB_HOSTED_URL=https://pub.flutter-io.cn
保存并退出编辑:
:wq
;重新保存一下配置:
source ~/.zshrc
,来刷新一下,让我们的配置立即生效;运行一下看是否配置好:
flutter doctor
;
- 配置环境变量:
-
下载:Android Studio;
-
Android Studio
安装:Flutter
插件;打开Android Studio
,打开路径:Android Studio
->Preferences
->Plugins
->Marketplace
->搜索Flutter
,下载Flutter
; - 安装:
Dart
插件;(下载Flutter
插件,会让先下载Dart
插件) - 重启
Android Studio
让插件生效; - 配置
Flutter SDK
路径(前提是要先打开一个Flutter
项目,才能在Languages & Frameworks
下面看到Flutter
和Dart
配置入口),就是下载的Flutter SDK
的存放路径:打开路径:Android Studio
->Preferences
->Languages & Frameworks
->Flutter
->Flutter SDK path
,选择下载的Flutter SDK
的存放路径; - 配置
Dart
路径:一般配置好Flutter SDK
路径,Dart
路径会自动配置,可在路径:Android Studio
->Preferences
->Languages & Frameworks
->Dart
->Dart SDK path
,查看是否配置成功。
-
下载:Xcode;
打开
Android Studio
的命令行,执行:flutter doctor
,使用Flutter
的语法进行检测;
Flutter 语法
-
命令行
// 配置检测:首次执行Flutter命令的时候,会自动下载依赖项并自行编译。如果有问题,按照提示,依次解决。 flutter doctor // 打包apk flutter build apk // 清空缓存 flutter clean // 更新依赖 flutter pub upgrade
-
解决ListView嵌套ListView不显示和滑动冲突:
-
解决方法如下:
shrinkWrap: true, //为true可以解决子控件必须设置高度的问题 physics: NeverScrollableScrollPhysics(), //禁用滑动事件
-
示例代码如下:
@override Widget build(BuildContext context) { return Container( child: ListView( children:
[ _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:
[ 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); }, ), ); }
-
常见错误
-
iPhone真机运行,报错:
无法打开“iproxy”,因为无法验证开发者
,这个问题可能是因为权限不够,执行这句命令就可以搞定:sudo xattr -d com.apple.quarantine /Users/zions/development/flutter/bin/cache/artifacts/usbmuxd/iproxy
执行
flutter
语法报错:command not found: flutter
:应该是环境变量配置有问题,重新走一下上面的配置环境变量的步骤。-
在
Android Studio
的终端执行flutter doctor
报错:-
错误一:
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
解决方法:参考错误二;
-
错误二:
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
应用即可; -
错误三:执行
Run
报错:Error running pod install Error launching application on iPhone 13 Pro.
解决方法:
1. ; -
错误四:执行
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 芯片的原因:
- 执行:
sudo arch -x86_64 gem install ffi
; - 执行:
arch -x86_64 pod install
; // M1 芯片在 Cocoapods 执行pod install
下载第三方库前面都需要添加arch -x86_64
;
- 执行:
-
错误五:报错:
Could not build the application for the simulator. Error launching application on iPhone 13 Pro.
解决方案:
执行:
flutter clean
,重新运行项目,如果不行试试下一步;-
执行:
flutter channel
,查看您当前使用的flutter
的分支;执行结果:
// 查看当前我的flutter处于stable(稳定)分支 Flutter channels: master dev beta * stable
官网上有一句话:我们强烈建议跟踪flutter的stable分支,这是Flutter稳定分支。 如果你需要查看最新的变化,你可以跟踪master分支,但注意这是开发分支,所以稳定性要低得多。
执行:
flutter channel master
或flutter channel beta
,切换到官方master
主分支或beta
分支开发即可;
-
错误六:更新
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
-
解决方案一:(亲测有效-Andy)
You need to upgrade your dependencies to fix this issue, so run: flutter pub upgrade
-
解决方案二:
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.
-
-
错误七:定位问题:
Android
定位没有问题;iOS
定位失败,获取不到位置信息:解决办法:
NSLocationUsageDescription 用于定位使用 NSLocationAlwaysUsageDescription 用于始终定位你的当前位置 NSLocationWhenInUseUsageDescription 用于定位您的当前位置 最好还要加上-这个必须要加上,不然定位还是会失败 NSLocationAlwaysAndWhenInUseUsageDescription 用于定位您的当前位置
-
错误八:更新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-
解决办法:
- 更新第三方库
camera
的版本号,在pubspec.yaml
里面配置; - 执行
flutter pub upgrade
更新版本库;
- 更新第三方库
-
错误九:更新
Flutter
报错:CamcorderProfile deprecated in Android API level 31
;解决办法:
- 更新
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' }
- 更新
-
错误十:模拟器运行报错:
Uld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation) note: Using new build system note: Planning note: Build preparation complete note: Building targets in dependency order
解决办法一:
可能是该静态库不支持在模拟器下编译,可使用真机或Generic iOS Device,一般就不会出现这个错误了;
解决办法二:
在Build Phases-->Compile Sources(items)中,添加报错的.m文件,点左下角的"+",在弹出框中找到报错的.m文件,选中,add
解决办法三:
在自制的MYPayBucket.framework中,TARGET--》BuildSetting--》Valid Architectures中添加x86_64;如下图所示。 具体原因,真机arm格式,模拟器x87格式,所以MYPayBucket.framework不支持。添加x86_64格式就行。
-
11. 错误十一: `Android Studio`升级后,执行`flutter doctor`报错:
```
Doctor summary (to see all details, run flutter doctor -v):
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
[✓] Flutter (Channel stable, 2.10.2, on macOS 13.2.1 22D68 darwin-arm, locale zh-Hans-MY)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
✗ Could not determine java version
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (version 2022.1)
✗ Unable to find bundled Java version.
[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.2)
[✓] VS Code (version 1.75.1)
[✓] Connected device (1 available)
[!] HTTP Host Availability
✗ HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host: Operation timed out
! Doctor found issues in 3 categories.
```
解决办法一:
1. 在`应用程序`中找到`Android Studio`;
2. 右键,选择`显示包内容`;
3. 打开`Contents`;
4. 新建`jre`文件夹;
5. 复制`jar`文件夹下的`Contents`文件夹到新建的`jre`文件夹;
解决方法二:建一个软链
1. 打开终端;
2. 执行:`ln -s /Applications/Android\ Studio.app/Contents/jbr /Applications/Android\ Studio.app/Contents/jre`