flutter从环境配置到打包(仅安卓)

斯人爱学习
1,658 阅读3分钟

fluter是什么

历史

独立开发： ios: object-c、 swift(苹果14年)、Android：java、kotlin(捷克某软件公司11年，17年谷歌最佳支持)

跨平台：基于js的webview、RN、flutter

环境配置

flutter配置

flutter-sdk

  • 下载最新稳定版 ，进入文件所在页面解压（unzip flutter_macos_1.17.5-stable.zip）
  • 通过git: git clone https://github.com/flutter/flutter.git（不建议，需要翻墙）

配置flutter命令

  • 查看当前所用shell类型 echo $SHELL
    • bash: 编辑$HOME/.bash_profile 或 $HOME/.bashrc
    • zsh：编辑$HOME/.zshrc
  • 在上述对应文件中加入如下内容：
# Flutter
# Flutter SDK
export FLUTTER_HOME=$PATH:$HOME/Desktop/applications/flutter
export PATH=$PATH:$FLUTTER_HOME/bin

# 上海交通大学提供的国内镜像
# pub mirror	
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
# flutter mirror
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn/

# Dart SDK(flutter自带dart-sdk, 所以不需要额外下载)
export DART_HOME=$FLUTTER_HOME/bin/cache/dart-sdk
export PATH=$PATH:$DART_HOME/bin

# android sdk
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
  • 重启窗口或执行source $HOME/.bash_profile 或source $HOME/.rc, 然后执行flutter --vesion判断flutter是否安装成功
  • flutter doctor检查相关依赖项的安装情况（对于缺少了的依赖项，安装完之后重新跑flutter doctor查看是否正确设置）

Android平台配置

下载android studio进行安装，之后配置模拟器和安装flutter、dart等插件 真机调试：关于设置安卓设备: 进入开发者模式之后开启usb调试，并开启usb安装（否则运行项目的时候回报错提示：Failure [INSTALL_FAILED_USER_RESTRICTED: Install canceled by user]），可通过flutter doctor判断设备是否连入

iOS平台配置

  • 可在app store搜索并下载
  • 打开Xcode，通过点击右上角 Xcode -> Open Developer Tools -> Simulator会打开默认的模拟器；可通过 Produe -> Destination去选择其他模拟器

项目创建

命令行

flutter create <project-name>

之后耐心等待安装

安装之后会检查你当前flutter的环境，如上图所示，由于本地还没启动设备，所以执行flutter run会报错。open -a Simulator打开ios模拟器，然后执行 flutter run即可

Android studio

选择对应的模拟器之后点击右上角的启动按钮，就会出现下图(热更新情况下修改代码能实时的反应到界面上)

VS CODE

首先需要确保你的编辑器安装了flutter和dart插件，初次使用flutter命令创建项目时，编辑器右下角会提示找不到sdk位置，此时点击配置将位置选为你电脑上flutter文件所在位置即可

  • shift + command + P（View -> Command Palette）
  • 输入flutter，选择Flutter: New Project
  • 输入项目名之后回车
  • 选择项目放置位置后，点击右下角蓝色按钮
  • 项目创建成功之后，默认显示lib/main.dart文件
  • 点击编辑器右下角的设备选择（此处的设备是通过Android studio创建的模拟器）
  • 此时点击右上角的启动
  • 项目启动之后会打开模拟器并在浏览器中开启调试界面

右下角提示Dart DevTools was unable to launch Chrome so your default browser was launched instead.（修改.vscode/launch.json，配置runtimeExecutable为当前电脑中Chrome浏览器的绝对地址）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      // "url": "http://localhost:8080",
      "file": "${workspaceFolder}/index.html",
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "/Applications/Google Chrome.app"
    }
  ]
}

打包

安卓打包

  1. 获取安卓签名文件 keytool -genkey -v -keystore 自定义路径/自定义别名.keystore -alias 自定义别名 -keyalg RSA -keysize 2048 -validity 10000 -storepass 自定义密码 -keypass 自定义密码

如果提示No Java runtime present, requesting install，则需要下载javaSE

  1. 导入签名文件
  • 将第一步生成的签名文件放到当前项目android/app文件夹下
  • 在android文件夹下新建key.properties文件，写入如下内容
storePassword=123456
keyPassword=123456
keyAlias=todo
storeFile=sharekey.jks
  1. 生成spk文件

flutter build apk

ios 打包

待补充

avatar
文章
阅读
粉丝