Flutter项目目录结构介绍

以我新创建的myflutter项目为例，用vscode打开是这样：

image.png

Flutter 入口文件

lib目录里面的 main.dart 文件就是 flutter项目 的入口文件,
其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定义的一个组件。

void main()=>runApp(MyApp());

一个最简单的Flutter应用程序，只需一个widget即可！如上面示例：将一个widget传给runApp函数即可。

该runApp函数接受给定的Widget并使其成为widget树的根。 在此示例中，widget树由两个widget:Center(及其子widget)和Text组成。框架强制根widget覆盖整个屏幕，这意味着文本“Hello, world”会居中显示在屏幕上。文本显示的方向需要在Text实例中指定，当使用MaterialApp时，文本的方向将自动设定，稍后将进行演示。
在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget， 具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

基础 Widget

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

• Text：该 widget 可让创建一个带格式的文本。

• Row、 Column： 这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。

• Stack： 取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。

• Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

MaterialApp

Flutter提供了许多widgets，可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialAppwidget开始， 该widget在应用程序的根部创建了一些有用的widget，其中包括一个Navigator， 它管理由字符串标识的Widget栈（即页面路由栈）。Navigator可以让您的应用程序在页面之间的平滑的过渡。 是否使用MaterialApp完全是可选的，但是使用它是一个很好的做法。

常用的属性:
home(主页) title(标题) color(颜色) theme(主题) routes(路由) ...

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性:
appBar - 显示在界面顶部的一个 AppBar
body - 当前界面所显示的主要内容 Widget
drawer - 抽屉菜单控件。
...

demo代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '首页',
      home: Scaffold(
        appBar: AppBar(
          title: Text('data'),
          elevation: 30,//设置标题阴影，默认0.0
        ),
        body: MyHome(),
        // drawer: ,
      ),
      theme: ThemeData(//主题颜色
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '首页内容'
      ),
    );
  }
}

demo效果

image.png

参考：
https://flutterchina.club/widgets-intro/
https://flutter.dev