前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

下载Flutter SDK

SDK

配置环境变量

Windows
MacOS

Android Studio中安装Flutter和Dart插件

直接在Android Studio中进行插件搜索

flutter.png

在无法正常搜索到插件的情况下，也可以直接在网页上先下载插件然后再进行安装，但是注意需要找到对应的插件版本

https://plugins.jetbrains.com/plugin/6351-dart
https://plugins.jetbrains.com/plugin/9212-flutter

flutter.png

新建Flutter项目

在安装好插件之后，在AndroidStudio中直接可以新建一个Flutter项目

flutter.png

运行项目

这里使用的是Android真机进行运行

QQ浏览器截图20210906091635.png

时隔将近四年，又一次运行了Flutter的Demo

device-2021-09-06-091557.png

后续会在MacOS上尝试运行IOS设备

项目结构

项目结构.png

android Android原生代码目录
ios IOS原生代码目录
web Web代码的目录
lib Flutter的核心目录，编写Flutter平台的相关代码
test 测试代码目录
pubspec.yaml Flutter的依赖配置文件，包含Flutter的依赖，版本等

代码介绍

在main.dart文件中，生成了我们新建项目的代码，来学习下它的内容和对应UI的效果

import 'package:flutter/material.dart';

导入了material的Dart支持，主要用于使用MaterialApp组件

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

Dart文件的程序入口，它启动了MyApp

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyApp类继承自StatelessWidget，使用MaterialApp组件定义了整个APP的根样式

title: 标题
theme: 风格
home: 主页面

StatelessWidget 静态组件，定义后不会再改变
StatefulWidget 动态组件，开发中需要改变状态

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

MyHomePage 有交互，所以继承自StatefulWidget,createState()就是需要对其设置的状态处理
_MyHomePageState继承自State,它由两部分功能，UI以及对应的事件处理，Scaffold定义了Material的结构

appBar 表示页面的标题部分
body 表示标题以下的正文部分
floatingActionButton 表示基于整个页面的悬浮按钮

除过UI部分，这部分的其他就是用于控制FAB的点击事件以及状态和UI的刷新