flutter笔记之初体验


安装

安装flutter

  • 首先下载flutter包, 解压到 ~/repo 目录,并配置 ~/.bashrc

    export PATH=$PATH:$HOME/repo/flutter/bin
    
  • source ~/.bashrc使其生效

    注意:首次运行flutter,macos可能会提示无法打开dart,需要到 系统偏好 -> 安全性与隐私 点击允许

    └──╼ flutter --version
    Flutter 2.2.1 • channel stable • https://github.com/flutter/flutter.git
    Framework • revision 02c026b03c (9 天前) • 2021-05-27 12:24:44 -0700
    Engine • revision 0fdb562ac8
    Tools • Dart 2.13.1
    
  • 第一步,禁用 google analytics

    └──╼ flutter config --no-analytics
    
      ╔════════════════════════════════════════════════════════════════════════════╗
                       Welcome to Flutter! - https://flutter.dev                  
                                                                                  
       The Flutter tool uses Google Analytics to anonymously report feature usage 
       statistics and basic crash reports. This data is used to help improve      
      ......
       See Google's privacy policy:                                               ║
       https://policies.google.com/privacy                                        
      ╚════════════════════════════════════════════════════════════════════════════╝
    
    Analytics reporting disabled.
    
    You may need to restart any open editors for them to read new settings.
    
  • 第二步, 执行 flutter doctor 检查依赖环境

    └──╼ flutter doctor
    Running "flutter pub get" in flutter_tools...                      10.6s
    Doctor summary (to see all details, run flutter doctor -v):
    [] Flutter (Channel stable, 2.2.1, on macOS 11.3.1 20E241 darwin-x64, locale zh-Hans-CN)
    [] Android toolchain - develop for Android devices
         Unable to locate Android SDK.
          Install Android Studio from: https://developer.android.com/studio/index.html
          On first launch it will assist you in installing the Android SDK components.
          (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
          If the Android SDK has been installed to a custom location, please use
          `flutter config --android-sdk` to update to that location.
    
    [] Xcode - develop for iOS and macOS
         Xcode installation is incomplete; a full installation is necessary for iOS development.
          Download at: https://developer.apple.com/xcode/download/
          Or install Xcode via the App Store.
          Once installed, run:
            sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
            sudo xcodebuild -runFirstLaunch
         CocoaPods not installed.
            CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
            Without CocoaPods, plugins will not work on iOS or macOS.
            For more info, see https://flutter.dev/platform-plugins
          To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
    [] Chrome - develop for the web
    [!] Android Studio (not installed)
    [] VS Code (version 1.56.2)
    [] Connected device (1 available)
    
    ! Doctor found issues in 3 categories.
    

安装java

  • 安装

    └──╼ brew install openjdk@8
    

    刚开始我安装的是 openjdk@11, 但在启动 sdkmanager 时会报

    └──╼ /usr/local/share/android-sdk/tools/bin/sdkmanager
    Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
    Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
    

    查找网上的资料,即使设置了 JAVA_OPTS, 但还是有问题,所以我安装 openjdk@8 而不是 openjdk@11

    └──╼ export JAVA_OPTS='-XX:+IgnoreUnrecognizedVMOptions --add-modules java.se.ee'
    └──╼ /usr/local/share/android-sdk/tools/bin/sdkmanager
    Error occurred during initialization of boot layer
    java.lang.module.FindException: Module java.se.ee not found
    
  • 配置环境变量

    export JAVA_HOME=/usr/local/opt/openjdk@8
    export PATH=$JAVA_HOME/bin:$PATH
    

    如果未设置 JAVA_HOME 环境变量,后续执行 flutter doctor 可能会报

    The operation couldnt be completed. Unable to locate a Java Runtime.
    Please visit http://www.java.com for information on installing Java.
    

安装android sdk

  • 安装sdk

    └──╼ brew install android-sdk
    
  • 安装sdk组件 首先执行 sdkmanager --list 找到组件最新版本或者选择合适版本

    └──╼ sdkmanager platform-tools
    └──╼ sdkmanager 'platforms;android-29'
    └──╼ sdkmanager 'build-tools;31.0.0-rc4'
    └──╼ sdkmanager --licenses
    

    如果未执行 sdkmanager --licenses 并同意相关协议,在执行 flutter doctor 后可能会提示

    [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc4)
        ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
    
  • 配置环境变量

    export ANDROID_SDK_ROOT=/usr/local/share/android-sdk
    export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH
    

初体验

创建一个新的项目

└──╼ flutter create myapp
└──╼ cd myapp

注意不要在 flutter sdk 目录里创建项目

Cannot create a project within the Flutter SDK. Target directory '$HOME/repo/flutter/src/myapp' is within the Flutter SDK at
'$HOME/repo/flutter'.

配置android模拟器

  • 安装模拟器

    └──╼ sdkmanager emulator
    └──╼ sdkmanager 'system-images;android-29;google_apis;x86_64'
    
  • 创建新的android模拟器

    └──╼ avdmanager -s create avd -n testAndroid -k "system-images;android-29;google_apis;x86_64"
    └──╼ avdmanager list avd
    

启动flutter项目

  • 启动模拟器

    └──╼ flutter emulators
    1 available emulator:
    
    testAndroid • testAndroid •  • android
    
    To run an emulator, run 'flutter emulators --launch <emulator id>'.
    To create a new emulator, run 'flutter emulators --create [--name xyz]'.
    
    You can find more information on managing emulators at the links below:
    https://developer.android.com/studio/run/managing-avds
    https://developer.android.com/studio/command-line/avdmanager
    └──╼ flutter emulators --launch testAndroid
    
  • 查看可用驱动

    └──╼ flutter devices
    2 connected devices:
    
    Android SDK built for x86 64 (mobile) • emulator-5554 • android-x64    • Android 10 (API 29) (emulator)
    Chrome (web)                          • chrome        • web-javascript • Google Chrome 90.0.4430.212
    
  • 启动项目

    └──╼ flutter run -d emulator-5554
    

    至此,我的第一个flutter应用体验完成。 很久没学习新的技术,感觉自己都快落伍了,脑子也快生锈了,很早之前就打算自己写一个私人使用的 app,但总抱着一招鲜吃遍天的想法,坚持着熟悉的 vue web app, 而且还道听途说对 flutter 有所怀疑,一直没实际体验过。虽然 vue 足够简单,搭配 cordova 也很方便,但毕竟属于 web app,每种语言或者工具应该都有自己最擅长的领域,比如 vue 之于 web,flutter 至于 移动端app,最重要的是,现在技术更新迭代太快,你不学总有人学,学而不思则罔,思而不学则殆,不思不学只会被淘汰

FAQ

启动项目报 Operation timed out

Using hardware rendering with device Android SDK built for x86 64. If you notice graphics artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Exception in thread "main" java.net.ConnectException: Operation timed out (Connection timed out)
        at java.net.PlainSocketImpl.socketConnect(Native Method)
        at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
        at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
        ......
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        76.2s
Exception: Gradle task assembleDebug failed with exit code 1

这是因为无法下载 gradle 的包和依赖,需要科学上网或者修改为国内源

  1. 修改项目目录下的 android/gradle/wrapper/gradle-wrapper.properties 文件

    - distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
    + distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-6.7-all.zip
    
  2. 修改项目目录下 android/build.gradle

    - google()
    - jcenter()
    + maven { url 'https://maven.aliyun.com/repository/google' }
    + maven { url 'https://maven.aliyun.com/repository/jcenter' }
    + maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    
  3. 修改 flutter sdk 目录下 packages/flutter_tools/gradle/flutter.gradle

    buildscript {
         repositories {
    !        // google()
    !        // jcenter()
    !        maven {
    !            url 'https://maven.aliyun.com/repository/jcenter'
    !        }
    !        maven {
    !            url 'http://maven.aliyun.com/nexus/content/groups/public'
    !        }
    !        maven {
    !            url 'https://maven.aliyun.com/repository/google'
    !        }
         }
         dependencies {
             classpath 'com.android.tools.build:gradle:4.1.0'
         }
     }
    

参考文档

  • https://flutter.cn/docs/get-started/install/macos

  • https://blog.csdn.net/xiuxiuxiubiubiubiu/article/details/104918561

  • https://www.cnblogs.com/bluestorm/p/14761482.html

作者: honmaple
链接: https://honmaple.me/articles/2021/06/flutter笔记之初体验.html
版权: 知识共享署名-非商业性使用-相同方式共享4.0国际许可协议
wechat