Flutter

flutter-Mac开发环境搭建

2020-09-17  本文已影响0人  葱花思鸡蛋
1.获取Flutter SDK

1)去flutter官网下载其最新可用的安装包
下载地址:https://flutter.dev/docs/development/tools/sdk/releases#macos

2)将下载的安装包解压到指定安装目录
可以在根目录下单独新建一个安装文件夹
cmd+shift+g 输入根路径 ~/
新建文件夹- Flutter,把下载的安装包解压后的flutter文件拖进去

或者使用终端操作 :

$ cd ~/   
$ mkdir Flutter  
$ cd ~/Flutter  
$ unzip ~/Downloads/flutter_macos_v1.20.4.zip
flutter-1.png
2.设置flutter相关工具到path中,使用flutter指令
// 使用vim打开bash_profile文件  
$ vim ~/.bash_profile  

输入i,进入插入模式,设置下面环境变量  
export PATH=~/Flutter/flutter/bin:$PATH  
export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn  
点击esc,退出当前模式,输入:wq!或者:x保存内容并退出。

// 更新bash_profile文件  
$source ~/.bash_profile
flutter-2.png
3.测试flutter指令及检查flutter环境
// 查看 flutter 帮助文件   
$flutter -h  
若提示flutter命令不存在,检查第二步是否出错

// 检查flutter依赖项   
$flutter doctor

flutter-3.png

根据提示安装Android Studio
下载地址1:http://www.androiddevtools.cn/

// 需要科学上网
下载地址2:http://developer.android.com/sdk/index.html

// 安装完成后再次检查flutter安装环境  
$flutter doctor
flutter-4.png
// 若出现Android licenses not accepted 错误,按照要求运行命令
$ flutter doctor --android-licenses  
然后根据提示一直y,y到结束为止。

// 完成后继续检查flutter 安装环境  
$flutter doctor
flutter-5.png

出现 • No issues found! 环境配置就完成了!

4.创建flutter项目

打开Android Studio下载flutter插件
Android Studio–>Preferences–>点击Plugins在输入框中输入flutter–>点击安装即可

安装完成后,重启Android Studio,创建项目时可以看到
Create New Flutter Project 选择 Flutter Application 创建项目

flutter-6.png flutter-7.png
5.flutter项目结构分析

android:Andorid相关代码目录,里面代码配置和单独创建Andorid项目有些不一样。

ios:iOS相关代码目录,存放Flutter与ios原生交互的一些代码。

lib:应用源文件,dart文件,核心文件,可以创建不同的文件夹,存放不同文件。flutter开发文件主要在此目录下完成。

test:测试文件。

.gitignore:忽略文件,记录一些不需要关注变更记录的文件,就是不添加到版本记录里面。

.metadata:记录一些Flutter。 project一些基本信息,如版本,项目类型。

.packages:记录一些lib文件的路径。

.iml:是由IntelliJ IDEA创建的模块文件,用于开发Java应用程序的IDE。它存储有关开发模块的信息,该模块可能是Java,Plugin,Android或Maven组件; 保存模块路径,依赖关系和其他设置。

pubspec.lock:这是根据当前项目依赖所生成的文件,记录当前使用的依赖版本。

pubspec.yaml:包含Flutter应用程序的包数据,这个是配置依赖项的文件,比如配置远程public仓库的依赖项,或者本地资源(图片,音视频)。

README.md:项目信息介绍。

6.运行项目

编辑main.dart 文件,可以尝试显示个“Hello world”,把main.dart中所有代码去掉,替换为下面代码:

import 'package:flutter/material.dart';

//这个是Dart中单行函数或者方法的简写
void main() => runApp(MyApp());

//程序继承StatelessWidget,该应用程序成为一个widget,在Flutter中,大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    //注意:一个app只能有一个MaterialApp
    return MaterialApp(
      //标题栏的名字
      title: 'Hello Flutter',
      //这个是Material library提供的一个widget,它提供了默认的导航栏、标题栏
      //包含主屏幕的widget树的body属性
      home:new Scaffold(
        appBar:new AppBar(
          title:const Text("Weclome to Flutter"),
        ),
        body:const Center(
          child:const Text("Hello World"),
        ),
    ),
    );
  }
}

选择模拟器,运行!


flutter-8.png

若无法连接模拟器,可以重启Android Studio,重起仍然无法连接,执行命令行:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

然后重启Android Studio 就能正常连接了。

上一篇下一篇

猜你喜欢

热点阅读