美文网首页
《Flutter For Android学习日记》创建第一个Fl

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

作者: 夏天吃冰棍 | 来源:发表于2020-05-26 17:11 被阅读0次

创建新应用

  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树对其到屏幕中心。

相关文章

网友评论

      本文标题:《Flutter For Android学习日记》创建第一个Fl

      本文链接:https://www.haomeiwen.com/subject/ayjvahtx.html