flutter基础之编写您的第一个 Flutter App

 创建 Flutter app

1. 选择 File>New Flutter Project
2. 选择 Flutter application 作为 project 类型, 然后点击 Next
3. 输入项目名称 (如 myapp), 然后点击 Next
4. 点击 Finish
5. 等待Android Studio安装SDK并创建项目.

看下项目组成

我们主要编辑Dart代码所在的 lib/main.dart 文件,替换 lib/main.dart.
删除lib / main.dart中的所有代码，然后替换为下面的代码(如上图)，它将在屏幕的中心显示“Hello World”.

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'),
        ),
      ),
    );
  }
}

运行应用程序，你应该看到如下界面.

flutter项目分析

1.Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。

2.main函数为程序入口,使用了(=>)符号, 这是Dart中单行函数或方法的简写。

3.应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。 在Flutter中，大多数东西都是widget(通俗的说一切皆控件！)，包括对齐(alignment)、填充(padding)和布局(layout)

4.Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂

5.widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。

6.示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心

使用外部依赖包

flutter同样也支持依赖包,在project目录下有个pubspec.yaml文件(类似Android的xx.gradle和maven项目pom.xml)

比如

始使用一个名为english_words的开源软件包 ，其中包含数千个最常用的英文单词以及一些实用功能.

您可以 在pub.dartlang.org上找到english_words软件包以及其他许多开源软件包

1.pubspec文件管理Flutter应用程序的assets(资源，如图片、package等)。 在pubspec.yaml中，将english_words（3.1.0或更高版本）添加到依赖项列表，如下面高亮显示的行：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

2.在Android Studio的编辑器视图中查看pubspec时，单击右上角的 Packages get，这会将依赖包安装到您的项目。您可以在控制台中看到以下内容：

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

3.在 lib/main.dart 中, 引入 english_words, 如高亮显示的行所示:

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

4.使用 English words 包生成文本来替换字符串“Hello World”.

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.如果应用程序正在运行，请使用热重载按钮 () 更新正在运行的应用程序。每次单击热重载或保存项目时，都会在正在运行的应用程序中随机选择不同的单词对。 这是因为单词对是在 build 方法内部生成的。每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时 build 都会运行.