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中打开工程

flutter plugin android 工程开发_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.添加运行配置项

flutter plugin android 工程开发_vscode_02

4. 安装模拟器

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

flutter plugin android 工程开发_vscode_03


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

flutter plugin android 工程开发_命令行_04


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

flutter plugin android 工程开发_flutter_05


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

flutter plugin android 工程开发_flutter_06


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

flutter plugin android 工程开发_flutter_07

5. 启动应用

flutter plugin android 工程开发_vscode_08


flutter plugin android 工程开发_命令行_09


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

打开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 plugin android 工程开发_flutter_10


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