一、flutter介绍
flutter关联词
flutter诞生:
工具:Android Studio和xcode
先安装Dart和Flutter插件
入门: 在macOS上搭建Flutter开发环,官网:https://flutterchina.club/setup-macos/#%E8%BF%90%E8%A1%8C-flutter-doctor
执行flutter doctor(保证以下几个打钩的):
按照官网配置出现问题时参考链接:https://www.jianshu.com/p/4be5a9e094bc
二、创建flutter项目
三、ios下:
1、ios模拟器:
2、在配置 ios真机时注意:
点击try again时 会提示不成功 更换bundle identifier (链接真机的情况下)
添加为信任者
三、Android安装和配置
真机需要在开发者打开usb调试
检测安装的设备
四、安装flutter和Dart插件
打开preferences后:安装dart、flutter后重启
五、flutter项目工程结构
ios、android、lib(main.dart)、test(单元测试)
蓝色框,即lib下的main.dart是整个程序的入口!
main.dart里的代码如下:
对此做如下简单说明:
1、Material是一个对移动端和web端的标准的可视化语言。Flutter提供了丰富的Material widgets(容器)
2、这里通过继承StatelessWidget是的该app自己也变成了一个widget,在Flutter中,基本上每一个事物都是一个widget,包括alignment、padding和layout。
3、widget的主要工作是提供build()函数(方法),用来描述和表达其中的其他的widget的展示方式
4、单独运行ios :打开ios包,双击Runner.xcworkspace文件
5、安卓:通过android studio打开
6、使用外部package
这里使用的是外部包english_words,和其他开源包一样,可以在这里找到。
6.1、pubspec文件管理着Flutter app的资源。在pubspec.yaml文件中,添加english_words和版本号到依赖表中,如下:
6.2、保存的时候,Android studio窗口上方会出现下图:
然后点击黄色中的字进行依赖安装即可,控制台会打印如下信息:
6.3、在main.dart文件中的最上面引入,Android studio会有提示。当然,如果你在下面没有使用该package,这里在展示上会有些许不同。
6.4、对main.dart内容做一个修改,即对该库的使用,具体增加内容如下:
6.5、保存后点击Android studio的右上角的闪电⚡️按钮,做刷新,你会发现每次点击,都会得到不一样的内容。
六、flutter底部导航搭建
lib文件入口
新建tab_navigator.dart
输入快捷键 stf创建 模板
class 命名 TabNavigator
项目有报错,按住错误那,按option+回车 选出导入头文件
StatefulWidget:
Widge()
打开 commond+光标选中跳入类实现
commond+H 打开Widge
return Scaffold(
)
1.设置文字&文字大小&颜色&行数限制&文本对齐
官网:https://api.flutter.dev/index.html
详细参考:https://www.jianshu.com/p/9e6c470ea5bf
BottomNavigation类文档:https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
小程序文档: