上一篇文章已经配置好了开发环境,现在迫不及待的开始“试驾”我的,flutter小程序,哈哈
1.构建和运行flutter的方法很多,比如Android Studio, VS Code, Terminal+编辑器,选择Terminal+编辑器写程序的人可以称得上是大牛了,由于我是菜鸟,这里我选择Android Studio的方式构建呦,VS Code大同小异。
(1)选择 File>New Flutter Project
(2)选择 Flutter application 作为 project 类型, 然后点击 Next
(3)输入项目名称 (如 myapp
), 然后点击 Next
(4)点击 Finish
(5)等待Android Studio安装SDK并创建项目
应用程序的代码就位于lib/main.dart文件里
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } }
PS:应用名称要全部小写
2. device:模拟器或者手机, PS:Android 4.1(API level 16)或更高版本的Android设备。
3.run
点击菜单项上的run,第一次启动会比较慢,国内用户也可以加入阿里云的镜像
4.热重载
flutter的热重载可以加快开发速度,每次改代码不要重新编译。
更改一个字符串,保存(command+s) 或者点击带闪电(⚡️)标志的绿色图标,无需重新运行,在手机上就可以看到更改的内容了。
5.工程主要文件
(1)lib/main.dart main方法所在的文件,项目的入口
main函数使用了(=>
)符号, 这是Dart中单行函数或方法的简写,
-
该应用程序继承了 StatelessWidget,这将会使应用本身也成为一个widget。 在Flutter中,大多数东西都是widget,包括对齐(alignment)、填充(padding)和布局(layout)
-
Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂
-
widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
-
本示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心。
(2)pubspec.yaml 对第三方package的引用依赖
6.添加外部的依赖包package
可以在https://pub.dev/flutter上搜索你想要添加的package,我们就拿english_words举例子
打开pubspec.yaml文件将
english_words: ^3.1.5 添加到 dependencies下面,然后点击package get,当在控制台看到 flutter packages get Running "flutter packages get" in startup_namer... Process finished with exit code 0
说明已经依赖进去了
接下来就是使用了,在main.dart 文件中引入
import 'package:english_words/english_words.dart';
下面我们在代码中使用这个包里面的WordPair类,生成随机的单词,代替Hello World,然后可以直接热重载界面。生成随机单词代替了Hello World。
7.代码格式
整理了部分flutter的采用Dart语言编写代码格式
(1)项目名称单词小写下划线连接
(2)导包:单引号,且以分号结尾
(3)字符串:单引号扩起来,例如 new Text('Welcome to Flutter')
(4) 变量定义以分号结尾
(5)变量以下划线_开头,会强制使变量变为私有的
(6)i除以2的语法:i ~/ 2