第一个dart程序:HelloWorld([InteIIiJ IDEA和vs安装flutter)

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一起下载


WX20190319-140006@2x.png

2.配置dartsdk
如图所示


image.png

4.第一个程序HelloWorld

新建project,选择dart


image.png

创建好的工程中,新建file


image.png

输入代码
void main(){
  print("Hello World!");
}

运行即可


image.png

之后我们就可以用InteIIiJ IDEA 练习dart语言了

2.vscode搭建dart开发环境

1.下载vscode

下载地址

2.安装flutter插件(会一起安装dart)

  1. 打开VS Code,选择菜单View > Command Palette..
  2. 输入install,选择Extensions: Install Extensions
  3. 搜索flutter找到Flutter插件并安装,同时会安装Dart 插件
  4. 安装完后点击ReloadtoActivate来启用插件

Command Palette里执行Flutter: Run Flutter Doctor来验证安装是否正确

3.创建Flutter工程并调试

  1. 打开Command Pallete
  2. 选择Flutter: New Project来创建Flutter项目helloworld, 也可使用命令flutter create helloworld来创建
  3. 按照官网里面的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;
//   }

// }
}
  1. 选择菜单Device > Start Debugging (或者按F5键)来运行和调试应用
    运行效果如图


    效果图

Flutter支持热加载,修改完只要保存即可看到效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • github地址 什么是Flutter Flutter is Google’s mobile UI framewo...
    wayDevelop阅读 1,771评论 0 2
  • 有关参考英文资料在这里因为本人用的电脑是Mac,所以这里主要是按照Mac的安装步骤来说的。下面开始!!! 一、安装...
    大鹏鸟阅读 10,921评论 2 2
  • 时荏苒而不留 一篇访古散记。 斑驳石痕悲旧影,繁华过后是沧桑。 近日随师幸访坳上新丰等地,入目是青石窄巷,暗...
    且听风临阅读 1,876评论 0 4
  • 文/黎岸兮 我希望有一阵清风 带着讯息 从南方到北方 路过许多城市 看过许多人 我希望到最后 清风还是清风 ...
    黎岸兮阅读 240评论 0 5
  • 姓名:王丽 组别:第377期六项精进努力二组组员 【日精进打卡第57天】 【知-学习】 背诵《大学》开篇5遍共10...
    天黑黑_e3af阅读 78评论 0 0