Flutter学习笔记（一）

记得flutter出来的时候，官方推荐的是使用IntelliJ IDEA，当时个人尝试了一下，比较麻烦，整个过程比较漫长。
进入2018年，再去看的时候，官方推荐使用Android Studio和VS code。我选择了使用Android Studio，整个过程相当惊喜，就是按钮那么一点，整个过程和配置就完成了，不过前提是你要先安装Dart和Flutter的插件。
下面对整个使用过程做一个简单的记录！

一、创建

创建完成后，整体的架子如下所示：

image.png

蓝色框，即lib下的main.dart是整个程序的入口！

main.dart里的代码如下：

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 to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

对此做如下简单说明：
1、Material是一个对移动端和web端的标准的可视化语言。Flutter提供了丰富的Material widgets（容器）
2、这里通过继承StatelessWidget是的该app自己也变成了一个widget，在Flutter中，基本上每一个事物都是一个widget，包括alignment、padding和layout。
3、widget的主要工作是提供build()函数（方法），用来描述和表达其中的其他的widget的展示方式

二、使用外部package

这里使用的是外部包english_words，和其他开源包一样，可以在这里找到。
1、pubspec文件管理着Flutter app的资源。在pubspec.yaml文件中，添加english_words和版本号到依赖表中，如下：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

2、保存的时候，Android studio窗口上方会出现下图：

image.png

然后点击黄色框中的字进行依赖安装即可。在控制台会打印如下信息：

image.png

3、在main.dart文件中的最上面引入，Android studio会有提示。当然，如果你在下面没有使用该package，这里在展示上会有些许不同。
4、对main.dart内容做一个修改，即对该库的使用，具体增加内容如下：

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();  // 新增
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
//          child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),  // 新增
        ),
      ),
    );
  }
}

5、保存后点击Android studio的右上角的闪电⚡️按钮，做刷新，你会发现每次点击，都会得到不一样的内容。