美文网首页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