Flutter 3 基础03: 初始化"自己"的 Flutter 项目

在上一篇文章中，我们创建了第一个 Flutter 项目。这个项目最大的特点就是可以直接成功运行，不需要做任何修改，不仅进一步验证了我们 Flutter 开发环境成功搭建，也是我们项目开发的一个不错的起点。

这个项目是 Android Studio 根据默认配置模板生成的，换句话说，每个人生成的项目都是一样的。本文会对这个默认项目进行一些修改，使其成为我们自己的项目。

启动 Android Studio, 打开 hello_world 项目。

重命名应用类

在左侧的项目视图中，展开 lib 目录，找到并打开 main.dart 文件，找到下列代码：

dart 复制代码

class MyApp extends StatelessWidget {

在 MyApp 上右击，在弹出的菜单中，选择 Refactor -> Rename.

在弹出的重命名对话框中，输入 HelloApp，或者你喜欢的名字，点击 Refactor 按钮。

此时，其他两处引用 MyApp 的地方，名称也自动改为了 HelloApp.

如果你还没有运行一个虚拟机，现在就点击运行按钮，看看应用发生了什么改变。

修改主页的标题名称

我们会发现，虚拟机上的应用界面没有任何变化，因为我们的改动没有影响到界面的布局和内容。接下来，我们修改主页的标题。

在 main.dart 文件中，找到下列代码：

dart 复制代码

home: const MyHomePage(title: 'Flutter Demo Home Page'),

把 Flutter Demo Home Page 改为 Hello Flutter, Ctrl+S 或者 Command+S 保存文件。你会发现，主页的标题已经发生了改变。

清理功能代码

项目默认的代码是实现了计数器功能。点击 + 按钮，计数增加 1，并显示在屏幕中央。但是，我们实际开发的项目并不需要计数器功能，因此，我们删除相关的代码。

继续保持 main.dart 文件打开，找到以下代码，直接删除这些代码。

dart 复制代码

int _counter = 0;  
  
void _incrementCounter() {  
  setState(() {  
    _counter++;  
  });  
}

floatingActionButton: FloatingActionButton(  
  onPressed: _incrementCounter,  
  tooltip: 'Increment',  
  child: const Icon(Icons.add),  
),

在 main.dart 文件中，继续找到下列代码，

dart 复制代码

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,  
      ),  
    ],  
  ),  
),

替换为以下代码：

dart 复制代码

body: SafeArea(
  child: Container(),
),

注意：代码中包含了大量注释，如果影响了对代码的阅读，可以将其删除。

保存代码，虚拟机自动刷新页面。你会发现，经过一番清理之后，首页变得更加清爽了，像一张白纸，等待构建我们自己的页面设计。

重构首页类的名称

在 main.dart 文件中，找到下列代码：

dart 复制代码

class MyHomePage extends StatefulWidget {

采用重命名应用类一节中使用的方法，把 MyHomePage 重命名为 HomePage.

修改应用名称

在 main.dart 文件中，找到下列代码：

dart 复制代码

return MaterialApp(  
  title: 'Flutter Demo',

把 Flutter Demo 改为 Hello World Flutter App，或者你喜欢的名字。

注意：这里的 title 与首页的 title 不同，他表示应用的标题，或者说应用的名称，可以让手机设备识别我们的应用，不会在我们的应用页面上显示。

修改主题色

如果你对色彩敏感，就会发现页面的主要颜色是偏紫色的。你也可以修改为自己喜欢的颜色。

在 main.dart 文件中，找到下列代码：

dart 复制代码

colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

你可以通过代码提示，找到自己喜欢的颜色，比如 lightBlue, 替换 deepPurple.

保存代码修改，等待虚拟机刷新。

提交代码

我们已经完成了项目初始代码的"个性化"处理，到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

shell 复制代码

git add .
git commit -m 'init.'