一、创建Flutter项目

1.1 file->New–>New Flutter Project

1.2 配置Flutter SDK Path

1.3 填写项目相关信息

二、android studio打开项目面板详解

2-1 编译运行模块控制区（1、2、3、4、5）

1：运行平台，由于本人没有连接移动设备，选择了chrome浏览器运行

2：运行的源码模块
3：启动运行按钮
4：热更新按钮
5：暂停按钮

2-2 布局树查看

Flutter widget inspector 是一个强大的工具，用于可视化和查看 widget 树。

Flutter 框架层使用 widgets 作为核心构建模块来处理从控件（例如文本、按钮和切换等）到布局（例如居中、填充、行和列等）的所有内容。

Flutter inspector 不仅可以帮助你可视化查看 Flutter widget 树，还有其他的作用：了解现有布局
诊断布局问题

2-3 Flutter项目结构

|--flutter_hello -项目名称|--pubspec.yaml  -管理第三方库以及资源的配置文件|--android       -android原生工程|--ios           -IOS原生工程|--lib           -flutter源文件目录|--main.dart  -flutter入口文件

2-3-1 pubspec.yaml

pubspec.yaml 是 Flutter 项目的配置文件，类似于 Android 中的 Gradle 配置文件，下面我们就看看 pubspec.yaml 中各个属性的配置。

name: flutter_hello
description: A new Flutter project.# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1environment:sdk: '>=2.18.2 <3.0.0'# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^1.0.2dev_dependencies:flutter_test:sdk: flutter# The "flutter_lints" package below contains a set of recommended lints to# encourage good coding practices. The lint set provided by the package is# activated in the `analysis_options.yaml` file located at the root of your# package. See that file for information about deactivating specific lint# rules and activating additional ones.flutter_lints: ^2.0.0# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec# The following section is specific to Flutter packages.
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: true# To add assets to your application, add an assets section, like this:# assets:#   - images/a_dot_burr.jpeg#   - images/a_dot_ham.jpeg# An image asset can refer to one or more resolution-specific "variants", see# https://flutter.dev/assets-and-images/#resolution-aware# For details regarding adding assets from package dependencies, see# https://flutter.dev/assets-and-images/#from-packages# To add custom fonts to your application, add a fonts section here,# in this "flutter" section. Each entry in this list should have a# "family" key with the font family name, and a "fonts" key with a# list giving the asset and other descriptors for the font. For# example:# fonts:#   - family: Schyler#     fonts:#       - asset: fonts/Schyler-Regular.ttf#       - asset: fonts/Schyler-Italic.ttf#         style: italic#   - family: Trajan Pro#     fonts:#       - asset: fonts/TrajanPro.ttf#       - asset: fonts/TrajanPro_Bold.ttf#         weight: 700## For details regarding fonts from package dependencies,# see https://flutter.dev/custom-fonts/#from-packages

项目中默认配置，去掉注释部分，剩下如下：

name: flutter_hello
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1environment:sdk: '>=2.18.2 <3.0.0'
dependencies:flutter:sdk: fluttercupertino_icons: ^1.0.2dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^2.0.0flutter:uses-material-design: true

name

此属性表示包名（package name），此属性是非常重要的，引入其他文件时需要使用此包名：

description

description 属性是一个可选配置属性，是对当前项目的介绍。内容其实就是我们创建项目时候声明的

publish_to

这一行可以防止软件包被pub publish发布到pub.dev上，对于私有软件包这行是必需的配置；如果想要把当前软件包发布到pub.dev也可以删除此行

version

此属性应用程序的版本和内部版本号，格式为 x.x.x+x。
version number： + 前面部分，由 2 个小点隔开，
build number:+后面的部分
在 Android 中 version number 对应 versionName，build number 对应 versionCode，在 android/build.gradle 下有相关配置：

environment

Environment 属性下添加 Flutter 和 Dart 版本控制。

environment:sdk: '>=2.18.2 <3.0.0'

上面的版本规定此应用或库只能在高于或等于2.18.2，低于3.0.0的Dart SDK版本上运行。

我们也可以手动添加 Flutter 版本：

environment:sdk: ">=2.18.2 <3.0.0"flutter: "3.3.4"

dependencies

包含应用程序所依赖的包,会编译到项目中

1、依赖 pub.dev 上的第三方库

依赖 pub.dev 上的第三方库是最常用的一种方式

dependencies:transmogrify: ^1.4.0

2、依赖自己的仓库

可以使用hosted来指定仓库的路径，版本约束是可选的，但建议使用。如果没有给出版本约束，则假定为 any。

environment: sdk: >=2.15.0 < 3.0.0dependencies:transmogrify:hosted: https://some-package-server.comversion: ^1.4.0

如果你的包有 2.15 之前的语言版本，你必须使用更详细的托管格

environment:sdk: >=2.14.0 < 3.0.0dependencies:transmogrify:hosted:name: transmogrifyurl: https://some-package-server.comversion: ^1.4.0

3、依赖Git仓库

dependencies:kittens:git: https://github.com/munificent/kittens.git

如果您想依赖特定的提交、分支或标签，请在描述中添加 ref 键

dependencies:kittens:git:url: https://github.com/munificent/kittens.gitref: some-branch

4、依赖本地库

dependencies:transmogrify:path: /Users/me/transmogrify

dev_dependencies

dev_dependencies 仅仅是运行期间的包

flutter

flutter相关的配置，assets资源、fonts字体

1、图片资源的配置

1-1、在该配置文件的同级建立images目录

1-2、在pubspec.yaml中配置

 assets:- images/flutter.jpg

1-3、使用AssetImage方式引入资源

AssetImage("images/flutter.jpg")

2、多分辨率图片的配置

2-1、图片资源
通用图片资源

2.0x屏幕密度的图片

3.0x屏幕密度的图片

2-2、图片资源的配置

  assets:- images/flutter.jpg- images/2.0x/flutter.jpg- images/3.0x/flutter.jpg

2-3、图片资源的应用

const Image(image: AssetImage("images/flutter.jpg"))

2-4、不同分辨率设备显示的图片资源

2-4-1、VIVO X20A手机：屏幕分辨率 1080x2160 屏幕密度：480
使用adb shell wm size查看设备分辨

adb shell wm size

使用adb shell wm density查看设备屏幕密度

adb shell wm density

PS:可以看到该设备加载的是3.0x下的图片

2-4-2、android7.0的设备：屏幕分辨率 1366x768 屏幕密度：160

PS：可以看到该设备加载的是通用密度下的图片

屏幕密度
屏幕密度不知道如何定义，其实屏幕密度就是像素密度的另外一种表示，是以160dpi=1.0为基准的。手机出厂之后屏幕密度，包括X，Y轴方向的像素密度都是固定值。
android将实际的屏幕密度进行划分（low，medium，high，and extra high，extra extra high）
一般情况下的普通屏幕：ldpi是120dpi，mdpi是160dpi，hdpi是240dpi，xhdpi是320dpi ，xxhdpi 是480dpi。
android以像素密度160dpi为基准对屏幕进行划分，当像素密度为160dpi时屏幕密度为1.0，像素密度为120dpi时屏幕密度为0.75，像素密度为320dpi时屏幕密度为2.0.

名称	密度	倍数
ldpi	120dpi	0.75x
mdpi	160dpi	1x
hdpi	240dpi	1.5x
xhdpi	320dpi	2.0x
xxhdpi	480dpi	3.0x
xxxhdpi	640dpi	4.0x

3、字体资源配置

3-1、
目前flutter支持的字体库

.ttf
.ttc
.otf
不支持的字体库：
.woff
woff2

3-2、下载字体库(google的字体库https://fonts.google.com/)，并复制到项目中

3-3、pubspec.yaml里面配置

 fonts:- family: Niramitfonts:- asset: fonts/Niramit-BoldItalic.ttf

3-4、全局使用
在MaterialApp里面them的fontFamily属性设置

 fontFamily: "Niramit",

局部控件设置字体：
pubspec.yaml里面配置

- family: Pacificofonts:- asset: fonts/Pacifico-Regular.ttf

style: TextStyle(fontFamily: "Niramit")

2-3-2 android原生工程

|--android|--build.gradle             -项目构建的gradle文件|--settings.gradle          -包含整个工程的所有 Module 的声明|--gradle.properties        -属性是全局的，可以在各个模块的build.gradle里面直接引用|--local.properties         -常用来声明sdk、ndk的路径|--app                      -app模块|--build.gradle          -app模块的gradle文件|--CMakeLists.txt        -app模块下cpp文件编译配置|--lib                   -app模块依赖的第三方jar包|--src                   -app模块源码|--main|--AndroidMenifest.xml   -app模块的menifest文件|--assets                -本地文件|--cpp                   -c或者cpp源码|--fonts                 -字体库文件|--java                  -源码|--jniLibs               -第三方so库文件|--res                   -布局、图片、字符、自定义属性、尺寸、颜色值等资源文件

2-3-2-1 android/build.gradle

buildscript {ext.kotlin_version = '1.6.10'  //声明kotlin版本repositories {                 //声明依赖的仓库google()mavenCentral()}dependencies {                //声明gradle依赖的版本classpath 'com.android.tools.build:gradle:7.1.2'classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"}
}allprojects {                   //所有模块依赖的仓库repositories {google()mavenCentral()}
}rootProject.buildDir = '../build'
subprojects {project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {project.evaluationDependsOn(':app')
}task clean(type: Delete) {delete rootProject.buildDir      //删除根目录下的buildDir文件夹任务
}

buildscript和allprojects中都有repositories和dependencies，两者的区别就是buildscript中的配置主要是为gradle本身服务的，gradle插件需要依赖的一些库什么的都在这里配置，allprojects则是为项目中的所有module配置的共同模块。

2-3-2-2 settings.gradle

include ':app'def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
def properties = new Properties()assert localPropertiesFile.exists()
localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }def flutterSdkPath = properties.getProperty("flutter.sdk")
assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"

1、使用include来声明项目包含的模块。

2-3-2-3 gradle.properties

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true

1、org.gradle.jvmargs=-Xmx1536M
jvm堆内存大小
1-1、堆大小设置（XX类型参数）
初始化堆内存：-XX:InitialHeapSize=1024m（-Xms1024m -简写）
最大堆内存：-XX:MaxHeapSize=1024m （-Xmx1024m -简写）
1-2、-Xss：线程的堆栈大小：-Xss 默认是 512k~1024k 等价于 -XX:ThreadStackSize=512k 。该值等于零表示使用的是默认值。一般情况下无需设置
1-3、-Xmn：设置年轻代大小。整个堆大小=年轻代大小 + 年老代大小 + 持久代大小。持久代一般固定大小为64m，所以增大年轻代后，将会减小年老代大小。此值对系统性能影响较大，Sun官方推荐配置为整个堆的3/8。
1-4、元空间-XX:MetaspaceSize ：初始化的Metaspace大小，控制元空间发生GC的阈值。GC后，动态增加或降低MetaspaceSize。在默认情况下，这个值大小根据不同的平台在12M到20M浮动。
-XX:MaxMetaspaceSize：限制Metaspace增长的上限，防止因为某些情况导致Metaspace无限的使用本地内存，影响到其他程序
1-5、-XX:NewRatio新生代（Eden + 2*S）与老年代（不包括永久区）的比值 例如-XX:NewRatio=4 表示新生代:老年代 = 1:4 即老年代占整个对的4/5；默认值=2
1-6、-XX:SurvivorRatio：2个Survivor区和Eden区的比值 例如：-XX:SurvivorRatio=8 表示两个Survivor区:Eden区=2:8 ,每个Survivor占 1/10 ；JVM默认=8

2、android.useAndroidX=true
表示“Android插件会启用对应的AndroidX库，而非Support库”；未设置时默认为false；

3、android.enableJetifier=true
表示Android插件会通过重写其二进制文件来自动迁移现有的第三方库（aar包或者jar包等依赖库），以迁移使用AndroidX依赖项；未设置时默认为false；

gradle.properties常用功能配置

org.gradle.jvmargs=-Xmx5120m -XX:MaxPermSize=1280m -Dfile.encoding=UTF-8
#（JVM堆内存大小，要是想运行的快一些，就改大点，整个8192m啥的）org.gradle.daemon=true
#通过开启守护进程，下一次构建的时候，将会连接这个守护进程进行构建，
#而不是重新 fork 一个 gradle构建进程org.gradle.configureondemand=true
#按需加载org.gradle.parallel=true
#并行编译org.gradle.caching=true
#开启 gradle 缓存android.enableBuildCache=true
#开启依赖缓存，这个设置可以让Android Studio 会把依赖的 jar 或 arr 缓存到本地，并且把模块名称设置为 hash 值。每次编译生成的缓存在 $HOME/.android/build-cacheandroid.useAndroidX=true
# 标识当前 module 启用 Androidx ，当把android项目自动迁移到androidX，
AS会自动在这个文件加上这句android.enableJetifier=true
# 表示将项目中使用的第三方库也迁移到 Androidxandroid.injected.testOnly=false
#解决真机无法安装测试包的报错，因为国内一些安卓手机制作商定制的
#Android 系统不允许安装含带这个属性的测试包。哪怕你使用 -t 参数通过 adb 安装也是不行的，这个很常见android.useNewApkCreator=false
#声明使用旧的打包器解决 Android Studio 升级 3.6 之后，
#报错 Entry name 'AndroidManifest.xml' collided，
#因此禁用新版本打包工具，使用旧的打包工具kotlin.incremental=true
kotlin.incremental.java=true
kotlin.incremental.js=true
#kotlin 增量编译kotlin.caching.enabled=true
#kotlin 编译缓存kotlin.parallel.tasks.in.project=true
#kotlin 并行编译kotlin.code.style=official
# Kotlin code style for this project: "official" or "obsolete"# 优化kapt
# 并行运行kapt1.2.60版本以上支持
kapt.use.worker.api=true
# 增量编译 kapt1.3.30版本以上支持
kapt.incremental.apt=true
# kapt avoiding 如果用kapt依赖的内容没有变化，会完全重用编译内容，省掉#`app:kaptGenerateStubsDebugKotlin`的时间
kapt.include.compile.classpath=false

2-3-2-4 local.propertices

sdk.dir=D\:\\Android\\AndroidStudio\\SDK
flutter.sdk=D\:\\Android\\flutter_windows_3.3.4-stable\\flutter
flutter.buildMode=debug
flutter.versionName=1.0.0
flutter.versionCode=1

声明了sdk和flutter sdk的路径

2-3-2-5 app/build.gradle

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {localPropertiesFile.withReader('UTF-8') { reader ->localProperties.load(reader)}
}def flutterRoot = localProperties.getProperty('flutter.sdk')def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {flutterVersionCode = '1'
}def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {flutterVersionName = '1.0'
}apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"android {compileSdkVersion flutter.compileSdkVersionndkVersion flutter.ndkVersioncompileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}kotlinOptions {jvmTarget = '1.8'}sourceSets {main.java.srcDirs += 'src/main/kotlin'}defaultConfig {// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).applicationId "com.example.flutter_hello"// You can update the following values to match your application needs.// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.minSdkVersion flutter.minSdkVersiontargetSdkVersion flutter.targetSdkVersionversionCode flutterVersionCode.toInteger()versionName flutterVersionName}buildTypes {release {// TODO: Add your own signing config for the release build.// Signing with the debug keys for now, so `flutter run --release` works.signingConfig signingConfigs.debug}}
}flutter {source '../..'
}dependencies {implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

flutter版本信息从local.propertices读取脚本

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {localPropertiesFile.withReader('UTF-8') { reader ->localProperties.load(reader)}
}def flutterRoot = localProperties.getProperty('flutter.sdk')def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {flutterVersionCode = '1'
}def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {flutterVersionName = '1.0'
}

gradle插件依赖

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android编译打包配置

android {compileSdkVersion flutter.compileSdkVersion    //sdk版本ndkVersion flutter.ndkVersion                  //ndk版本compileOptions {                              //Java 编译版本sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}kotlinOptions {                              //kotlin编译版本jvmTarget = '1.8'}sourceSets {                                //显式的指定特定的文件和目录，我们利用这个特性来完成代码和资源的灵活配置main.java.srcDirs += 'src/main/kotlin'  //显示指定项目java源码路径}defaultConfig {// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).applicationId "com.example.flutter_hello"     //应用唯一标识ID,必须保持唯一// You can update the following values to match your application needs.// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.minSdkVersion flutter.minSdkVersion    //应用支持的最小sdk版本targetSdkVersion flutter.targetSdkVersion  //应用当前sdk版本versionCode flutterVersionCode.toInteger() //应用版本号versionName flutterVersionName             //应用版本名称multiDexEnabled true                       //支持分包}signingConfigs {//签名配置release {  //正式包的签名配置storeFile file("platform.jks")storePassword "platform123"keyAlias "platform"keyPassword "platform123"}debug {//测试包的签名配置storeFile file("platform.jks") //签名文件storePassword "platform123"   //保存密码keyAlias "platform"           //别名keyPassword "platform123"     //密码}}buildTypes {//应用打包编译release {  //应用正式包的编译配置// TODO: Add your own signing config for the release build.// Signing with the debug keys for now, so `flutter run --release` works.signingConfig signingConfigs.release //使用上面配置的正式环境的签名文件}}
}

模块依赖配置管理

dependencies {implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

2-3-2-6 AndroidMenifest.xml

该xml文件配置了应用程序组件（activity,service,provider,receiver）、应用程序的包名、应用程序需要的权限。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.flutter_hello">     //程序包名<applicationandroid:label="flutter_hello"  //程序名称android:name="${applicationName}"android:icon="@mipmap/ic_launcher"> //程序Icon<activity   //Activity组件注册android:name=".MainActivity"android:exported="true"android:launchMode="singleTop"android:theme="@style/LaunchTheme"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize"><!-- Specifies an Android theme to apply to this Activity as soon asthe Android process has started. This theme is visible to the userwhile the Flutter UI initializes. After that, this theme continuesto determine the Window background behind the Flutter UI. --><meta-dataandroid:name="io.flutter.embedding.android.NormalTheme"android:resource="@style/NormalTheme"/><intent-filter><action android:name="android.intent.action.MAIN"/><category android:name="android.intent.category.LAUNCHER"/></intent-filter></activity><!-- Don't delete the meta-data below.This is used by the Flutter tool to generate GeneratedPluginRegistrant.java --><meta-dataandroid:name="flutterEmbedding"android:value="2" /></application>
</manifest>

2-3-3 IOS原生工程

2-3-4 lib flutter工程

|--lib|--main.dart                     -flutter入口文件

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(fontFamily: "Pacifico",primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',style: TextStyle(fontFamily: "Niramit")),Text('$_counter',style: const TextStyle(fontFamily: "Niramit")),const Image(image: AssetImage("images/flutter.jpg"))],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), );}
}

runApp

void runApp(Widget app) {WidgetsFlutterBinding.ensureInitialized()..scheduleAttachRootWidget(app)..scheduleWarmUpFrame();
}

将app绑定到根组件上

MyApp

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(fontFamily: "Pacifico",primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}

MyApp继承自StatelessWidget，StatelessWidget是无状态组件的基类，作为页面的根组件，一般不需要全局的刷新UI,所以通常使用无状态的组件，来提升UI构建性能，MyApp最后构建的组件是MaterialApp。MaterialApp是支持android材料设计效果的组件，在IOS上通常会使用CupertinoApp，CupertinoApp是支持了IOS设计风格的组件；还有WidgetsApp，WidgetsApp是普通效果的组件。

MaterialApp支持的相关属性：

const MaterialApp({super.key,this.navigatorKey,//导航键this.scaffoldMessengerKey,//脚手架键this.home,//主页Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{},//应用程序顶级路由表this.initialRoute,//如果构建了导航器，则会显示第一个路由的名称this.onGenerateRoute,//路由管理拦截器this.onGenerateInitialRoutes,//生成初始化路由this.onUnknownRoute,//当onGenerateRoute无法生成路由时调用List<NavigatorObserver> this.navigatorObservers = const <NavigatorObserver>[],//创建导航器的观察者列表this.builder,//在导航器上面插入小部件this.title = '',//程序切换时显示的标题this.onGenerateTitle,//程序切换时生成标题字符串this.color,//颜色this.theme,//页面主题this.darkTheme,//深色主题this.highContrastTheme,//系统请求“高对比度”使用的主题this.highContrastDarkTheme,//系统请求“高对比度”暗黑模式下使用的主题颜色this.themeMode = ThemeMode.system,//使用哪种模式的主题（默认跟随系统）this.locale,//初始区域设置this.localizationsDelegates,//本地化代理this.localeListResolutionCallback,//失败或未提供设备的语言环境this.localeResolutionCallback,//负责计算语言环境this.supportedLocales = const <Locale>[Locale('en', 'US')],//本地化地区列表this.debugShowMaterialGrid = false,this.showPerformanceOverlay = false,this.checkerboardRasterCacheImages = false,//打开栅格缓存图像的棋盘格。this.checkerboardOffscreenLayers = false,//打开渲染到屏幕外位图的层的棋盘格this.showSemanticsDebugger = false,this.debugShowCheckedModeBanner = true,this.shortcuts,this.actions,this.restorationScopeId,this.scrollBehavior,//可滚动小部件的行为方式this.useInheritedMediaQuery = false,//})

MyHomePage

class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',style: TextStyle(fontFamily: "Niramit")),Text('$_counter',style: const TextStyle(fontFamily: "Niramit")),const Image(image: AssetImage("images/flutter.jpg"))],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),),);}
}

因为demo功能是点击‘+’号，会做数字增加的效果，UI是要变化的，所以MyHomePage继承了StatefulWidget，通过调用setState方法，来重新build控件。

Scaffold

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',style: TextStyle(fontFamily: "Niramit")),Text('$_counter',style: const TextStyle(fontFamily: "Niramit")),const Image(image: AssetImage("images/flutter.jpg"))],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),),);}
}

其实MyHomePage的整体页面构建出来的顶级页面是Scaffold。何为Scaffold？下面内容源于源码截取

/// Implements the basic Material Design visual layout structure.实现了基本的 Material Design 视觉布局结构。
///
/// This class provides APIs for showing drawers and bottom sheets. 此类提供用于显示抽屉和底页的 API。/// The Scaffold is designed to be a top level container for
/// a [MaterialApp]. This means that adding a Scaffold
/// to each route on a Material app will provide the app with
/// Material's basic visual layout structure.///Scaffold是作为MaterialApp的顶级容器而设计的。这就意味着为每一个Material app的页面添加一个Scaffold组件后，
///就会为应用提供了Material Design 视觉布局结构

PS:其实就是一句话：MaterialApp和Scaffold必须搭配使用。

Scaffold支持的属性

const Scaffold({super.key,this.appBar,//页面上方导航条this.body,//页面主体this.floatingActionButton,//悬浮按钮this.floatingActionButtonLocation,//悬浮按钮位置this.floatingActionButtonAnimator,//悬浮按钮动画this.persistentFooterButtons,//显示在底部导航条上方的一组按钮this.persistentFooterAlignment = AlignmentDirectional.centerEnd,this.drawer,//左侧抽屉菜单this.onDrawerChanged,//抽屉菜单改变的回调监听this.endDrawer,//右侧抽屉菜单this.onEndDrawerChanged,//右侧抽屉菜单改变回调监听this.bottomNavigationBar,//底部导航条this.bottomSheet,//个持久停留在body下方，底部控件上方的控件this.backgroundColor,//背景色this.resizeToAvoidBottomInset,this.primary = true,//是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏this.drawerDragStartBehavior = DragStartBehavior.start,//控制 drawer 的一些特性this.extendBody = false,//body 是否延伸到底部控件this.extendBodyBehindAppBar = false,//默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果this.drawerScrimColor,//侧滑栏拉出来时，用来遮盖主页面的颜色this.drawerEdgeDragWidth,//侧滑栏拉出来的宽度this.drawerEnableOpenDragGesture = true,//左侧侧滑栏是否可以滑动this.endDrawerEnableOpenDragGesture = true,//右侧侧滑栏是否可以滑动this.restorationId,})

Android Studio创建第一个Flutter项目相关推荐

【Flutter】创建 Flutter 项目 ( Android Studio 创建并运行 Flutter 应用 | 命令行创建并运行 Flutter 应用 | 运行 Flutter 应用三种方式 )
文章目录一.Android Studio 中创建 Flutter 项目二.命令行创建 Flutter 项目三.通过命令行方式运行 Flutter 项目四.通过 Android Studio 可 ...
Flutter入门——创建第一个Flutter项目
Flutter入门--创建第一个Flutter项目一.创建项目第一个项目使用Android Studio创建,步骤如下: 先打开Android Studio,会有一个创建新的Flutter应用的选 ...
mac下创建第一个flutter项目以及遇到的问题
换电脑之后就没整过flutter环境,这周正好得空,就把flutter先搭起来,下面记录过程以及遇到的问题, 解决办法办法. 首先下载Android Studio 点击跳转汉化教程: 1.点击下方链 ...
在Android studio里写一个Flutter程序
在Android studio里写一个Flutter程序前言前言新建一个Flutter工程,选择Flutter Application 选择Flutter 同时配置Flutter sdk路径 n ...
Android Studio 创建第一个Android工程项目
1.打开Android Studio 2.点击 New Project 选择 Empty Activity 3.点击 Next 4.点击 Finish 等待加载完成,取决于网络,第一次加载可能要很久. ...
android资源编译失败,在android studio中打开一个新项目时，Android资源编译失败
用我的android studio打开新项目时出现此错误 Android资源编译失败输出:C:\ Projects \ Popular2 \ app \ src \ main \ res \ draw ...
android studio创建构造方法,使用Android studio创建你的第一个项目
1.创建HelloWorld项目任何编程语言写出的第一个程序毫无疑问都会是Hello World,这已经是自20世纪70年代一直流传下来的传统,在编程界已成为永恒的经典,那么今天就来使用Androi ...
Flutter 学习第四天第一个flutter项目
这个转自我自己的有道云想看图片去那里文档:Day2_26 Dart 面向对象异步语法.md 链接:http://note.youdao.com/noteshare?id=1dc3ee54f0dd ...
Android Studio SVN配置忽略文件 1.用Android Studio创建一个项目，会在根目录和Module目录下自动生成.gitignore文件，貌似是Git的配置文件，
Android Studio SVN配置忽略文件 1.用Android Studio创建一个项目,会在根目录和Module目录下自动生成.gitignore文件,貌似是Git的配置文件,和SVN没有关 ...

Android Studio创建第一个Flutter项目