[Code with me]开发背单词安卓APP | Flutter框架 | 无任何前置知识要求式教程

UI框架：Flutter

编程语言：Dart

Flutter框架搭建和基础建设，可以移步至我的另一篇博客https://blog.csdn.net/m0_59035787/article/details/122273653?spm=1001.2014.3001.5501

搭建flutter基础建设|脚手架

       1. 于C盘新建一个development文件夹

在visual code的终端下索引至如下图片（当然，这个只是我自己的选择，大家可以在其他盘的地方创建。）

        2.并键入以下代码并回车让flutter自动生成基础代码

flutter create adv_basics

        3.在喝杯茶过后的时间，会显示如下情况，跟着照做就行。

---

解释下这两行代码意思：

1. cd adv_basics的意思是进入adv_basics文件夹
2. flutter run的意思是运行该APP

---

运行完会看到这个，选择上面[1][2][3]中的任意一个都行，没有任何关系，之后还可以再重开；

原本有个[4]选项是android虚拟机，但是因为我忘了开android虚拟机，所以没有4选项，如果大家有先打开虚拟机可以用虚拟机运行；

再喝一杯茶的时间，app就运行起来了！

---

接下来，说下如果你和我一样一开始没用虚拟机开，之后该如何用android虚拟机开：

在android studio中打开虚拟机 ，然后在visual code中打开项目；

如果不清楚，依然可以移步到我的最上方提及的博客；

在visual code的右下角那串pixel开头的字母就是你当前选择的虚拟机，点击它可以修改它打开的虚拟机，我这边是默认选对了我的pixel虚拟手机。

点击后会出现这样子的列表让你选择，选择此Pixel虚拟机后。

按图选择run without Debugging即不调试运行，这样的模式下应用了变动也秒响应、秒应用更改，无需等待太久。

之后你可以看到类似这样子的界面，说明flutter已经为你成功搭建起了一个基本脚手架，你可以往里面加东西了。

---

1.开发第一步：从基础开始

请大家把main.dart中的flutter为我们生成的代码全部删除，随着我的解说，再一条一条加入。

题外话1：在dart中APP代码的执行步骤：

main()函数是入口，被自动检测到并执行  ------>  runApp()（此函数需放在main函数内部）它告诉flutter该在屏幕上显示什么(比如说哪个UIwidget显示)  ------>  将你构造的需要显示的widget树传参给runApp()

所以跟着我敲入,你会发现有报错，那是因为runApp()里面还需要添加参数。

void main() {
    runApp();
}

---

题外话2：什么是widget树？

MaterialApp()[此为根widget] ----> Scaffold()[此为屏幕布局widget] ----> Row()[可以横向地显示多个并排的子widget]  ---->  3个Text()  

他就像一棵树，不停分支，每个枝头都有widget，所以叫widget树。

---

不要忘了还需引入flutter包以激活runApp该函数的使用，放在开头哦！

import 'package:flutter/material.dart';

根据之前的题外话1和题外话2，我们需要往runApp()里传递参数MaterialApp()

MaterialApp()中有个参数home用于构建起APP外观，home参数填入Scaffold()，

同样的Scaffold也有参数body，body参数填入什么呢，我们接下来就创造它。

题外话：flutter框架，既然是框架那就是本身有许多的空要让用户来填（就像书架一样），所以会有很多参数需要填，根据填的参数不同，app的外观也不同。

void main() {
  runApp(MaterialApp(
    home: Scaffold(body: ,),
  ));
}

2.创造一个新Screen：

在左边的工作目录里，lib文件夹里面新建一个start_screen.dart文件

        1.里面填入如下，我们创建一个StartScreen类（该类的名字最好和文件名齐平），继承至StatelessWidget，表明该widget在运行时不会有数据的动态变化。

class StartScreen extends StatelessWidget{
}

         2.加上构造器，需要将一个本类的key参数向上传给父类StatelessWidget，所以用super.key来实现

  const StartScreen({super.key});  

        3.添加build方法，它需要接收一个context参数，并返回widget类型对象，我们这边让他随便返回一个Text对象，所以你可以推理出Text是widget的子类，最后别忘了要加上@override表明该build方法是覆盖父类的方法        

  @override                                 
  Widget build(BuildContext context) {      
    return const Text('Start Screen');     
  }

---

题外话：const关键字有助于优化性能，即使多次使用同样的对象，它们都是指向同一个内存地址的对象。

---

 3.将StartScreen类嵌入main类中，同时别忘了import StartScreen类哦

import 'package:adv_basics/start_screen.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: StartScreen(),
    ),
  ));
}

4.最后运行起来，你会得到个类似这样的东西，在最左上角有个不起眼的Start Screen。