美文网首页Flutter
1.搭建 Flutter开发环境

1.搭建 Flutter开发环境

作者: 贝一平 | 来源:发表于2019-06-18 09:37 被阅读29次

Mac 下 Dart 环境安装

选择合适的编辑器: Intellij IDEA

brew install dart --devel

安装过程注意

如果出现 brew updating 时间过长的情况,切换一下源,代码如下

cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

cd 
brew update

即便改了源,也需要一段耐心等待的时间,如果更新中出现如下报错


更新报错

可以使用 rm -rf 命令进行解决,具体如下


解决报错.png

安装 Dart

brew tap dart-lang/dart
brew install dart

如果安装过程中出现如下错误及提示,按照命令做即可。

The following directories are not writable by your user:
/usr/local/sbin

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/sbin

And make sure that your user has write permission.
  chmod u+w /usr/local/sbin

【注意】:只有更新 xcode 到最新版,dart 才能安装成功,更新 xcode 时可能会遇到存储空间不够无法安装等情况,可以去苹果开发者社区直接下载 xcode。即使更新 xcode 到最新版本在安装dart 的过程中还是会遇到各种问题,尽量多试几遍然后上网搜报错解决吧。

查看 Dart 安装信息

brew info dart

为编辑器添加 Dart 插件

welcome 页面 -> config ->plugin:搜索 dart 安装后重启即可

Hello world

首先创建项目,然后新建 dart 文件,文件内容如下:

void main() {
  print("hello world")
}

如果再执行 run 的时候出现如下报错


run-error.png

可以在工具栏【Run】中 edit configurations中取消勾选Checked mode


run-解决.png

Flutter 环境

假如你的Mac无法顺利的访问外网,可以配置 Flutter 镜像
配置如下

open ~ //打开.bash_profile 文件
//将下面两行代码添加到文件
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考https://flutter.io/community/china 以获得有关镜像服务器的最新动态。

下载 SDK,建议下载 stable 版
下载完成之后 将 Flutter 解压到项目目录

 cd ~/项目目录
 unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

添加环境变量
还是打开.bash_profile 文件

 export PATH= ~/Desktop/wendu/wendu/app/flutter/bin:$PATH

更新.bash_profile 文件

export PATH="/Users/shangbing/Desktop/wendu/wendu/app/flutter/bin:$PATH"

检测环境及配置是否成功

flutter doctor

注意: 如果你使用终端是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

根据 doctor 的提示对环境进行安装或修改即可

IOS 开发环境

配置 xcode 命令

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

快速打开模拟器

open -a Simulator

安卓开发环境

Flutter requires Android SDK 28 and the Android BuildTools 28.0.3

类似这种报错,就可以到Android studio更新下 SDK,当其实现阶段只要保证IOS 可以也 OK 剩下的可以后续完善

Android studio 安装 Flutter 和 Dart 插件

preferences>plugins
browse repositories:flutter plugin

创建 Flutter 项目

flutter create my_ap
cd my_ap
flutter run
1-1 项目创建成功

使用 flutter包和插件

https://pub.dartlang.org/
https://pub.flutter-io.cn/
就相当于我们前端的 npm 网站

插件的安装及使用

插件的安装

修改 pubspec.yaml 文件

dependencies:
  flutter_color_plugin: ^0.0.2

执行命令:

flutter pub get

当你的项目异常关闭,或者android studio用任务管理器强制关闭,下次启动就会出现上面的一行话,
此时需要打开 flutter/bin/cache/lockfile,删除就行了
或者直接用下面的命令:

rm ./flutter/bin/cache/lockfile

插件的使用

复制 main.dart 改为 plugin_use.dart

//引入plugin
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
void main() => runApp(PluginUse());

main.dart 文件修改

import 'package:my_ap/plugin_use.dart';
//void main() => runApp(MyApp());
void main() => runApp(PluginUse());
//调整类名
class PluginUse extends StatelessWidget { … }
//使用
Text(
  'You have pushed the button this many times:',
  style: TextStyle(color: ColorUtil.color('#ff0000'))
),
1-2 插件的使用.png

相关文章

网友评论

    本文标题:1.搭建 Flutter开发环境

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