《Flutter For Android学习日记》创建第一个Fl

创建新应用

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

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart.

运行应用程序

1. 定位到Android Studio 工具栏:

   
   Main IntelliJ toolbar

2. 在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个

3. 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.

4. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:

   
   Starter App on Android

第1步: 创建 Flutter app

创建一个简单的、基于模板的Flutter应用程序，按照创建您的第一个Flutter应用中的指南的步骤， 然后将项目命名为startup_namer（而不是myapp)，接下来你将会修改这个应用来完成最终的APP。

在这个示例中，你将主要编辑Dart代码所在的 lib/main.dart 文件,

提示: 将代码粘贴到应用中时，缩进可能会变形。您可以使用Flutter工具自动修复此问题:

• Android Studio / IntelliJ IDEA: 右键单击Dart代码，然后选择 Reformat Code with dartfmt.
• VS Code: 右键单击并选择 Format Document.
• Terminal: 运行 flutter format <filename>.

1. 替换 lib/main.dart.
   删除lib / main.dart中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示“Hello World”.

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

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

screenshot of hello world app

分析

• 本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。

• main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。

• 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)

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

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

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