创建新应用

  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 工具栏:

    frc 9117278dba2d8297d7508e29d0ce8270 - 《Flutter For Android学习日记》创建第一个Flutter应用
    Main IntelliJ toolbar
  2. target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 Tools>Android>AVD Manager 并在那里创建一个

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

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

    frc 021dab23af0e5429d12ae792fff1494e - 《Flutter For Android学习日记》创建第一个Flutter应用
    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 .
  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. 运行应用程序,你应该看到如下界面.

frc afbe5a7db47eb9635e62ec2a5e414543 - 《Flutter For Android学习日记》创建第一个Flutter应用
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树对其到屏幕中心。

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