使用vscode编辑Flutter

1. 安装插件: Flutter

2. 使用vscode调试

3. 选择设备

4. cmd + shift + p doctor看下控制台

5. F5启动代码

6. 最后,看到启动的simulator

案例分析:

import 'package:flutter/material.dart';
// Material是一种标准的移动端和web端的视觉设计语言。
// Flutter提供了一套丰富的Material widgets。

// main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写
void main() => runApp(new MyApp());

// 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。
class MyApp extends StatelessWidget {
  @override
  // widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to myFirst Flutter',
      // Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to myFirst Flutter'),
        ),
        // body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget
        body: new Center(
          child: new Text('Hello wuzhaolin, this is first flutter demo'),
        ),
      ),
    );
  }
}

• 引入外部包:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; // 引入

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // new
    return new MaterialApp(
      title: 'Welcome to myFirst Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to myFirst Flutter'),
        ),
        body: new Center(
          // child: new Text('Hello wuzhaolin, this is first flutter demo'),
          child: new Text(wordPair.asPascalCase), // 使用
        ),
      ),
    );
  }
}