Flutter入门
- 官网
- Flutter SDK下载
- 创建Flutter项目
- 在ios上运行
- 第一个Flutter项目
- 效果图
- 代码
- 总结
官网
Flutter开发手册网址如下
Flutter SDK下载
下载地址
第一步:进入官网,选择自己相对应的系统

第二步:选择对应版本SDK并下载到本地

创建Flutter项目
第一步:打开AndroidStudio,选择New Flutter Project
-> 然后在Flutter SDK path
填入刚才所下载的SDK地址 -> next

第二步:
填入项目名称、项目地址、项目类型、Android和IOS的开发语言以及需要跨平台的平台

在ios上运行
第一步:当创建完成后,系统会自动有一个默认项目,如果需要在使用iOS模拟器或者iphone真机上运行,需要打开XCode
,将自己的电脑和xcode绑定,第一次连接iphone真机时,还需在手机上点击信任此链接

第二步:绑定成功后,点击AndroidStudio如下链接,会跳转到xcode

第三步:添入自己的appid与本机进行绑定,只需一次即可
第四步:在xcode点击运行即可看见第一个项目,也可选择创建虚拟机,后续在Android Studio中打开虚拟机即可,无需运行xcode
第一个Flutter项目
删掉原有的代码,先按例子入门敲Hello World!
效果图

代码
AppBar:为顶部标题栏属性
Center: 为居中布局
Text属性 | 解释 |
---|---|
style | 文本样式 |
textAlign | 文字对齐方式 |
overflow | 内容溢出 |
maxLines | 最大行数 |
TextStyle属性 | 解释 |
---|---|
fontSize | 文字大小 |
color | 文字颜色 |
decoration:TextDecoration | 下划线类型 |
decorationStyle | 下划线样式 |
部分代码如下:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title)
),
body: const Center(
child: Text(
"Hello World,My name is Sun Zheng Yi,This is first contact flutter to me",//文字内容
textAlign: TextAlign.center,//文字居中
maxLines: 1,//最大行数
overflow: TextOverflow.ellipsis,//溢出部分显示...
style: TextStyle(
fontSize: 20,
color: Color.fromARGB(255, 255, 0, 0),
// color: Colors.red,
decoration:TextDecoration.underline,//给每一行文字添加下划线
decorationStyle: TextDecorationStyle.solid,//下划线样式,Draw a solid line
),
),
),
);
}
总结
对于原生开发的我而言,dart与Java和Kotlin存在很大区别,其次不是通过XML去进行视图展示,跟Web的js和ts有更多相似之处,但优点不言而喻,毕竟是风口上的产物