flutter 官网
网址:https://flutterchina.club/setup-macos/
配置环境变量
- 将flutter下载完成之后, 打开终端命令行 ( 在所下载的文件上一级 )
- 使用vim进行配置环境变量
vim ~/.bash_profile
- 在打开的文件里增加一行代码,意思是配置flutter命令在任何地方都可以使用。
export PATH=/app/flutter/bin:$PATH
( 注意: 此处的 ‘/app/flutter/bin’ 要添我们下载下来对应flutter里面bin的路径 ) - 配置完成后,需要用source命令重新加载一下
source ~/.bash_profile
- 完成这部以后,就算我们flutter的安装工作完成了,但是这还不能进行开发。可以使用命令来检测一下,是否安装完成了。
flutter -h
检查开发环境
flutter doctor
Android Studio
下载地址:http://www.android-studio.org/
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setu
安装完 Android SDK后
- 第一步要作的是允许协议(android-licenses)
flutter doctor --android-licenses
- 完成后,我们再使用flutter doctor进行检测,会看到还是有很多x, 可以进行相应的下载.
- 打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。
Android studio新建Flutter项目
打开Andorid Studio ,我们选择第二项,新建Flutter项目。
建立完项目后可以去 vscode里面进行编写, 在扩展程序中, 下载flutter
Dart语法
Dart是面向对象的语言,即使是函数也是对象,并且属于Function类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。当然你也可以像JavaScript一样,调用一个函数。
( Dart里一切皆对象,包括数字和函数 )
- 创建完成之后, 我们可以如上图写一个小demo
void main() =>runApp(MyApp());
因为这个函数体里只有一行代码,所以可以直接使用=>来省略{},只有函数 体里只有一行时,才可以使用,否则请使用大括号。- StatefulWidget 和 StatelessWidget
StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化。
StatelessWidget:不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字(写上后就在那里了,死也不会变了)。
import 'package:flutter/material.dart'; // 是Flutter实现Material Design设计风格的基础包,,里面有文本输入框(Text)、图标(Icon)、图片(Image)、行排列布局(Align)、列排列布局(Column)、Decoration、异步、动画等等控件,大家可以理解为网页中的按钮、标题、选项框呀等等控件库吧。
void main()=> runApp(new MyApp()); // main()函数是Dart程序的入口
// 继承(关键字 extends)
class MyApp extends StatelessWidget { // StatelessWidget 无状态类. 当你想展现的内容只需要改动控件本身的配置信息就可以实现的.(例如:文本、图片)
@override // 继承 StatelessWidget,必须要重写build的方法
Widget build(BuildContext context) { // 窗口Widget以树形结构组织。 build 方法会携带一个 BuildContext 参数. 可以把Widget想象成一种可视化组件,或者应用中可以与可视化组件进行交互的模块。
return MaterialApp( // 返回一个material类的组件对象
title:'Flutter bottomNavigationBar', // 这个不在窗口中显示
theme:ThemeData.light(), // ThemeData 是MaterialDesign Widget库的主题数据,Material库的Widget需要遵守相应的涉及规范。 这些涉及规范可自定部分都定义在ThemeData,所以我们可以通过ThemeData来自定义应用主题。 通过Theme.of方法来获取当前的ThemeData. Material Design设计规范中有些是不能自定义的,如导航栏高度,ThemeData只包含了可自定义部分。
home:BottomNavigationWidget()
);
}
}
在vsCode中跑flutter项目
跑项目:
flutter run
r 键:点击后热加载,也就算是重新加载吧。(每次修改完代码后, 需要在终端命令行输入 r )
p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
o 键:切换android和ios的预览模式。
q 键:退出调试预览模式。
如果嫌以上方法麻烦也可以直接用Debug模式, 实现我们保存,效果立即就会改变, 如下图.