第一个Flutter应用解析（一）

1、创建项目

1.1 新建

1.2 选择Flutter SDK的位置

1.3 项目名称

英文单词加下划线起名规范，其他默认即可。

1.4 点击运行

• 发生报错显示我们的JAVA版本不符合
  

1.5 更改版本设置

1.6 再次启动项目

2、分析页面代码

以下是lib/main.dart的源代码（为了阅读方便，删掉了注释）：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

2.1 导包

import 'package:flutter/material.dart'

此代码的作用是导入Material UI组件库。Material是一种标准的移动端和Web端的视觉设计语言，Flutter默认提供了一套丰富的Material风格的UI组件。

2.2 应用入口

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

//也可以写作, "=>"符号为Dart中单行函数或者方法的简写方式
// void main() => runApp(const MyApp());

在Flutter应用中main函数为应用程序的入口。main函数中调用了runApp方法，它的功能是启动Flutter应用。runApp接受一个Widget参数，在示例代码中接收了一个MyApp对象，MyApp()是Flutter应用的根组件。

2.3 应用结构

class MyApp extends StatelessWidget {
  /* 声明了一个常量构造函数，它使得Flutter在编译时就确定MyApp对象的结构，而不是在运行时动态创建。
  这可以提升一定性能，在编译时优化常量对象的创建过程，并且在多个地方使用同一个常量对象时可以减少内存使用。
   */
  const MyApp({super.key});
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 应用名称
      title: 'Flutter Demo',
      // 主题设置
      theme: ThemeData(
        // 主题颜色
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // 是否使用Material 3的设计规范
        useMaterial3: true,
      ),
      // 应用首页路由
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• MyApp类代表Flutter应用，继承了StatelessWidget类，即应用本身也是一个Widget；
• 在Flutter中，大多数东西都是Widget，包括对齐（alignment）、填充（padding）、布局（layout）等属性；
• Flutter调用组件的bulid方法构建页面，Wiget的主要功能是提供一个bulid方法描述如何构建UI（在bulid方法内部组合拼装、组合其他基础的Widget来实现）；
• home为Flutter应用的首页，也是一个Widget。

2.4 首页

2.4.1 MyHomePage

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

MyHomePage是Flutter应用的首页，其继承于StatefulWidget类，表明它是一个有状态的组件（Stateful Widget）;除了有状态组件，还有无状态组件（Stateless Widget）。

• Stateful Widget可以拥有状态，这些状态在Widget生命周期中是可以发生改变的，而Stateless Widget则是不可变的；
• Stateful Widget至少由两个类组成：
  • 一个StatefulWidget类；
  • 一个State类；StatefulWidget类本身不发生改变，但State类中持有的状态在Widget生命周期中则可能发生变化。

2.4.2 _MyHomePageState

class _MyHomePageState extends State<MyHomePage> {
  // 用于记录按钮点击的总次数
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

• 当按钮被点击时会调用此函数，该函数首先自增_counter，然后调用了setState方法，setState方法的作用是通知Flutter框架有状态发生了改变。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

初始化完成后，Flutter框架会调用Widget的bulid方法来构建Widget树，最终将Widget树渲染到设备屏幕上。

• Scaffold是Material组件库中提供的一个组件，它提供了默认的导航栏、标题和包含主屏幕Widget树的body属性；
• body的组件树包含了一个Center属性，将所有子组件树对齐到屏幕中心；Center的子组件是Column，它的作用是将其子组件沿着屏幕垂直方向排列；此例中将两个Text组件垂直排列；
• floatingActionButton代表页面右下角的带"+"的悬浮按钮，onPressed属性代表接受一个回调函数，在示例中调用一开始的_incrementCounter方法。