美文网首页
Flutter环境搭建

Flutter环境搭建

作者: LUJQ | 来源:发表于2019-05-09 11:12 被阅读0次

    Flutter中文网: https://flutterchina.club/

    Flutter似乎是越来越火了,笔者作为一个移动端开发者好像必须得学了
    😂。这里我只是关于macOS环境的Flutter环境搭建做个简单的分享,如有错误欢迎大家指出。

    系统要求

    要安装并运行Flutter,您的开发环境必须满足以下最低要求:

    • 操作系统: macOS (64-bit)
    • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
    • 工具: Flutter 依赖下面这些命令行工具.
      bash, mkdir, rm, git, curl, unzip, which

    获取Flutter SDK

    由于一些flutter命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像

    所以我们使用google为国内开发者搭建的临时镜像。依次执行下列命令:

     export PUB_HOSTED_URL=https://pub.flutter-io.cn
     export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
     git clone -b dev https://github.com/flutter/flutter.git
     export PATH="$PWD/flutter/bin:$PATH"
     cd ./flutter
     flutter doctor
    

    执行完上述命令没有问题的话大概就是这样的:

    屏幕快照 2019-05-09 上午10.40.23.png
    上图问题提示显示:
    (1)Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
    按照提示,运行命令行:flutter doctor --android-licenses
    屏幕快照 2019-05-24 下午1.11.41.png
    然后一直输入y,就行。
    (2)libimobiledevice and ideviceinstaller are not installed. To install with Brew,run:
    意思是提示你安装brew,下面会讲到。

    iOS 设置

    安装 Xcode

    • 安装Xcode 7.2或更高版本
    • 配置Xcode命令行工具以使用新安装的Xcode版本
    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    

    对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

    • 确保Xcode许可协议是通过打开一次Xcode或通过命令
    sudo xcodebuild -license
    

    安装到iOS设备

    要将您的Flutter应用安装到iOS真机设备,您需要一些额外的工具和一个Apple帐户,您还需要在Xcode中进行设置。

      1. 安装 homebrew (如果已经安装了brew,跳过此步骤).
        执行如下命令:
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    • 运行这些命令来安装用于将Flutter应用安装到iOS设备的工具
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
    

    如果这些命令中的任何一个失败并出现错误,请运行brew doctor并按照说明解决问题.

    如果上述执行都没有问题的话,iOS设置算是完成了,下面来建第一个Flutter项目。
    在你想要创建项目的路径下执行

    flutter create flutterapp
    

    flutterapp 为项目名,可自己更改。
    然后项目创建完成,如下:

    屏幕快照 2019-05-09 上午10.58.57.png
    屏幕快照 2019-05-09 上午11.00.03.png

    Android设置

    • 下载并安装 Android Studio.

    • 安装Flutter和Dart插件


      屏幕快照 2019-05-09 上午11.04.32.png
      屏幕快照 2019-05-09 上午11.05.13.png
      屏幕快照 2019-05-09 上午11.05.29.png

    现在呢我们就用Android Studio来创建我们的第一个flutter项目。
    打开Android Studio,会发现多了一个 Start a new Flutter project

    屏幕快照 2019-05-24 下午1.22.23.png
    屏幕快照 2019-05-24 下午1.27.15.png
    屏幕快照 2019-05-24 下午1.29.44.png
    这里需要注意下上图:Flutter SDK path,是你Flutter SDK所在路径,不能选错了。Project name 全部小写
    屏幕快照 2019-05-24 下午1.34.08.png

    设置Android模拟器

    要准备在Android模拟器上运行并测试您的Flutter应用,请按照以下步骤操作:

    1. 启动 Android Studio>Tools>AVD Manager 并选择 Create Virtual Device.
    2. 选择一个设备并选择 Next

    模拟器选好后,这里运行项目会遇到一个
    AS控制台会出现:

    Launching lib/main.dart on Android SDK built for x86 in debug mode...
    Initializing gradle...
    Resolving dependencies...
    * Error running Gradle:
    ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
    Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
    
    FAILURE: Build failed with an exception.
    
    * Where:
    Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25
    
    * What went wrong:
    A problem occurred evaluating project ':app'.
    > Could not resolve all files for configuration 'classpath'.
       > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
         Searched in the following locations:
             https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar
    
    * 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 0s
      Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties
    
    Finished with error: Please review your Gradle project setup in the android/ folder.
    

    解决办法:

    第一步:flutter>packages>flutter_tools>gradle>flutter_gradle 屏幕快照 2019-05-24 下午1.46.13.png
    打开文件,修改成如下:
    buildscript {
        repositories {
            //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'
            }
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    

    第二步:项目路径>android>build.gradle


    屏幕快照 2019-05-24 下午1.46.13.png

    打开文件,修改成如下:

    buildscript {
        repositories {
            //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' }
        }
    
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    
    allprojects {
        repositories {
            //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' }
        }
    }
    

    OK,这里环境就算是搭建完成了。


    屏幕快照 2019-05-24 下午1.54.40.png

    这是笔者关于Flutter环境搭建的简单分享,如有问题和错误,欢迎大家指出讨论。

    相关文章

      网友评论

          本文标题:Flutter环境搭建

          本文链接:https://www.haomeiwen.com/subject/fqvioqtx.html