Flutter 初识

初识Flutter

什么是Flutter

Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。

Flutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘制 Widget（组件）。这样不仅可以保证在 Android 和iOS 上 UI 的一致性，也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter框架结构

• Framework即框架层，这是一个纯Dart实现的SDK，实现了一套基础库。
• Engine即引擎层，这是Flutter的核心，由C++实现，其中包含了Skia引擎、Dart运行时、文字排版引擎等，在代码调用dart:ui库时，最终会走到引擎层，实现真正的绘制和显示。
• Embedder即嵌入层，Flutter最终渲染、交互是要需要依赖其所在平台的操作系统API，主要将Flutter引擎安装到特定平台上。嵌入层使用当前平台的语言，用于调用当前平台的API。

首个Flutter应用

目录结构

• android:：Android源代码目录。
• ios：IOS源代码目录。
• lib：Flutter项目的核心目录，存放flutter源代码。
• test：测试代码目录。
• pubspec.yaml：Flutter项目的配置文件，类似于Android的build.gradle。

导包

import 'package:flutter/material.dart';

这里指导入Material UI组件库。

应用入口

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

Flutter项目结构

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '任务栏标题',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '首页标题'),
    );
  }
}

在Flutter中，绝大多数组件、布局方式、手势等都是以Widget形式提供的。

• MyApp 表示Flutter应用，继承自StatelessWidget类，本质是一个widget。
• MateriaApp 是Flutter Material库提供的App框架，可以设置应用的名称、主题、首页、路由等。
• home 是Flutter应用的首页。

首页

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

  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(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '首页',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

• MyHomePage 是应用首页，继承自StatefulWidget类，是一个有状态的widget。
• _MyHomePageState 是组建的状态类，记录状态值，当点击按钮时会触发_incrementCounter()，变量_counter会+1，接着会调用setState()，setState()会通知Flutter框架，Flutter框架收到通知会执行build()根据新的状态重构界面，Flutter对该方法做了优化执行变的很快。
• Scaffold 是Material库提供的页面脚手架，可以设置导航栏、标题、页面的内容。

设置app名称、图标

Android设置app名称、图标

• label：设置app名称
• icon：设置图标
• mipmap-mdpi、mipmap-hdpi、mipmap-xdpi、mipmap-xxdpi、mipmap-xxxdpi目录用于存放具体图片，mipmap-mdpi 放置48*48的图标，mipmap-hdpi存放72*72，mipmap-xdpi存放96*96，mipmap-xxdpi存放144*144，mipmap-xxxdpi存放192*192

IOS设置app名称、图标

• CFBundleName：设置app名称

pubspec.yaml配置文件说明

name: myflutter #设置包名
description: A new Flutter project. #当前项目描述

publish_to: 'none' 

version: 1.0.0+1 #版本名+版本号

environment: #支持Dart SDK版本
  sdk: ">=2.12.0 <3.0.0"

dependencies: #项目依赖库
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  uses-material-design: true #使用Material组件

  assets: #资源文件
    - images/logo.png
    - images/pub.png
    - images/user.png
    - images/avatar.jpg