1.InteIIiJ IDEA 搭建dart开发环境
1.下载InteIIiJ IDEA
如果有能力,请购买原版本
InteIIiJ IDEA破解教程链接破解教程
2.下载fluttersdk
Flutter因为是新出的框架,所以对系统还是有一定的要求的。
- MacOS (64-bit)
- 磁盘空间:大于700M,如果算上Android Studio等编辑工具,尽量大于3G。
- 命令号工具:bash、mkdir、rm、git、curl、unzip、which、brew 这些命令在都可以使用。
下载Flutter SDK包
下载网址
压缩包下载好以后,找个位置进行解压。我这里解压到根目录下
配置环境变量
打开终端工具
vim ~/.bash_profile
添加命令
##flutter
export PATH=/Users/liyanjun/flutter/bin:$PATH
提示:这行命令你要根据你把压缩包解压的位置来进行编写,写的是你的路径
配置完成后,需要用source
命令重新加载一下 ,具体命令如下:
source ~/.bash_profile
检查是否安装成功
flutter -h
可能你会遇到,每次都要
source ~/.bash_profile
一下,才能让加入的命令剩下。这时候需要在.zshrc
文件加一行source .bash_profile
3.InteIIiJ IDEA配置dart
1.Preference->Plugins搜索dart,下载dart插件
最好搜索flutter ,会把flutter和dart一起下载
2.配置dartsdk
如图所示
4.第一个程序HelloWorld
新建project,选择dart
创建好的工程中,新建file
输入代码
void main(){
print("Hello World!");
}
运行即可
之后我们就可以用InteIIiJ IDEA 练习dart语言了
2.vscode搭建dart开发环境
1.下载vscode
2.安装flutter插件(会一起安装dart)
- 打开
VS Code
,选择菜单View > Command Palette..
- 输入
install
,选择Extensions: Install Extensions
- 搜索
flutter
找到Flutter
插件并安装,同时会安装Dart
插件 - 安装完后点击
ReloadtoActivate
来启用插件
在Command Palette
里执行Flutter: Run Flutter Doctor
来验证安装是否正确
3.创建Flutter工程并调试
- 打开
Command Pallete
- 选择
Flutter: New Projec
t来创建Flutter项目helloworld, 也可使用命令flutter create helloworld
来创建 - 按照官网里面的helloworld替换lib/main.dart文件里的示例代码为在页面中央打印HelloWorld。代码如下
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
//等价于
// @override
// Widget build(BuildContext context) {
// AppBar appbar = AppBar(title: Text('Welcome wode hahh 1231 12Flutter'));
// Center center = Center(child: Text('Hello121112131212 World'));
// Scaffold home = Scaffold(appBar: appbar, body: center);
// MaterialApp app = MaterialApp(title: 'Welcome to flutter', home: home);
// return app;
// }
// }
}
-
选择菜单Device > Start Debugging (或者按F5键)来运行和调试应用
运行效果如图
Flutter支持热加载,修改完只要保存即可看到效果