在准备好Flutter开发环境之后,就可以着手开发应用程序了。后续我们将主要以Android为主作介绍,也会展示Windows桌面版运行的效果,当然代码是同一份。
环境
操作系统:Windows10
Flutter版本:2.2.2 stable
Dart版本:2.13.3
开发工具:Android Studio Arctic Fox | 2020.3.1、 Visual Studio Code 1.58.2、Visual Studio 2019
接下来的操作将在Android Studio中进行,也可以在更为轻便的Visual Studio Code中进行,看个人喜好而定。
步骤
1.安装插件:搜索Dart和Flutter插件,然后安装即可。

2.创建Flutter工程:点击Project,在弹出的对话框中选择Create New Flutter Project,然后根据提示创建工程即可。


3.代码实现:工程添加完成后会自动生成示例代码,此处重点要关注的是lib文件夹下面的main.dart文件,也就是程序的主文件,当然也包括主函数main。

代码解读
1.main函数:类似Java或者C/C++等编程语言中的主函数,是程序的入口。其中调用的runApp函数,入参是一个Widget,也就是一个组件,用于展示界面效果。可以类比Android中的组件概念。
2.MyApp类:根组件,继承于StatelessWidget组件,所谓的无状态组件,主要用于绘制界面。

3.MyHomePage:页面组件,继承于StatefulWidget组件,即有状态组件,顾名思义是包含状态的组件。譬如,包含计数器变量,可以通过按钮点击改变其值。

4._MyHomePageState:页面组件的状态类,继承于State状态类,主要包含界面构建以及数据构建。一般通过页面组件的重载函数createState来关联。


运行
▶选择运行的设备,可选择Web版、桌面版或者模拟器,还可以真机联调,与Android类似。此处选择桌面版,点击运行:


▶右上角的调试提醒文本可以去掉,在MyApp类中的MaterialApp增加一个参数debugShowCheckedModeBanner,设置为false即可。

▶由于Flutter是热加载的方式,所以保存代码后可以立即看到效果。对于开发而言,这也是非常友好的,所见即所得。
延伸
▶对于一个Flutter应用而言,主要包括main函数,MyApp主类,然后在主类中添加其他页面展示,包括路由,语言,主题等等都可以在主类中设置。譬如,要修改标题,直接修改MyApp类build函数中的MaterialApp类中的title参数即可;修改主题,设置ThemeData相关参数即可。

▶Flutter应用中设置状态的操作,在其他语言中其实也有类似的处理,此处的setState函数,很容易联想到微信小程序中setData的操作。
▶Flutter应用默认使用Material Design设计,Android原生中有类似的效果,也可以根据需要自行设计风格。社区有丰富的图标和插件可以使用,对于一般的开发而言,已经够用。
▶Flutter应用的主配置文件是pubspec.yaml,主要包括工程名,版本号,本地资源文件以及插件依赖等,后续我们将逐步介绍。
说明:
以上示例代码,我们会更新到github和gitee,可根据需要下载,具体路径如下:
github:https://github.com/iounce/flutter-demo
gitee:https://gitee.com/iounce_admin/flutter-demo




