Flutter开发 6.开始第一个flutter工程

Flutter开发 6.开始第一个flutter工程

1. 创建工程

为了更好的理解工作原理，我们将使用命令行的方式来创建工程，首先在命令行模式下切换目录到你的flutter工程目录，我的叫flutter_workspace , 然后使用flutter create 命令来创建一个工程first_flutter_demo

% flutter create first_flutter_demo
Creating project first_flutter_demo...
Running "flutter pub get" in first_flutter_demo...                  3.8s
Wrote 96 files.

All done!
In order to run your application, type:

  $ cd first_flutter_demo
  $ flutter run

Your application code is in first_flutter_demo/lib/main.dart.

2. 在VSCode中打开工程

可以打开pubspec.yaml文件，如果需要加载第三方库,需要加在此文件中，这个文件就相当于AndroidStudio中用的build.gradle(App)和Xcode下用的Cocospod,添加完后在vscode的终端窗口执行flutter pub get来同步代码.

$ flutter pub get       
Running "flutter pub get" in first_flutter_demo...               1,357ms

3.添加运行配置项

4. 安装模拟器

在扩展插件中安装一个Android iOS Emulator

添另好配置项目，还需要添加一个模拟器，用来显示运行效果。右上角模拟器的小图标

我们选用一个iOS的模拟器用来测试

因为这里没有最新款的型号，就用一个旧一些的iphone 12 pro max吧。

安装成功后，在vscode右下方的状态栏上可以看到当前使用的模拟器

5. 启动应用

这是系统为我们生成的默认工程的样子。

打开lib/main.dart文件, 修改一下标题文字

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'zzFlutter'), //修改这个标题字符串
    );
  }
}

修改标题后，直接保存文件，并不需要重新启动，模拟器就已经变更了

这是flutter 热重载（hot reload）的能力，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态，旧版本的flutter还需要手动去hot reload一下才可以同步到模拟器，但我发现目前的版本已经不需要了， 直接保存文件，就将修改同步到模拟器看到了效果。