Flutter入门

发表于 | 分类于

安装软件和插件

flutter配置

1
2
3
4
5
6
7
8
9
10
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
# 永久添加flutter到PATH, 参考
$ export PATH=$PATH:/Users/jsl/flutter/bin
$ source $HOME/.bash_profile
$ echo $PATH

android studio配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Macintosh HD⁩ ▸ ⁨Users⁩ ▸ ⁨你的用户名 ▸ ⁨.bash_profile
#Android 环境变量
export ANDROID_HOME=/Users/你的用户名/Library/Android/sdk
#Android 模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools 路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平台工具路径
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
#Android NDK路径
ANDROID_NDK_HOME=/Users/你的用户名/Library/Android/ndk/android-ndk-r10e
#FLutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#Flutter环境变量
export PATH=/Users/jph/Documents/flutter/bin:$PATH

xcode配置

1
2
3
4
# 配置cli tool
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
# 启动一个ios模拟器
$ open -a Simulator

创建Flutter项目

命令行创建flutter项目

1
2
3
4
5
$ flutter create app_name
# 进入项目目录
$ cd ap_name
# 启动项目
$ flutter run

Android studio创建flutter项目

File > New > New Flutter Project

模拟器调试

Android Studio 启动模拟器

添加并选择模拟器和程序入口, 启动模拟器

XCode 启动模拟器

真机调试

Android Studio 真机调试

连接数据线,

XCode 真机调试

安装dart

1
2
$ brew tap dart-lang/dart
$ brew install dart

连接了多个设备

1
$ flutter run -d '设备id(如iPhone X)'

ios真机调试

1
2
3
4
5
6
7
# 一下命令若出错, 运行 brew doctor
$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

flutter包管理

  1. https://pub.dev/

  2. 搜索如: flutter_color_plugin

  3. 添加依赖

    1
    2
    3
    # pubspec.yaml
    dependencies:
     flutter_color_plugin: ^0.0.2

  4. 安装, 点击 Package get

  5. 导入

    1
    2
    <!-- pugin_use.dart -->
    import 'package:flutter_color_plugin/flutter_color_plugin.dart';

  6. 如果遇到问题, stop重新运行, 卸载重装app, 看issue

StatelessWidget

特点

内部没有需要管理的状态, 不要根据状态改变自己的渲染

常用StatelessWidget子组件

Container

Text

Icon

CloseButton

BackButton

Chip

参考: https://material.io

Divider 分割线

height: 可设置容器高度, 不可设置线的高度

Card 卡片

带有圆角, 阴影, 边框等效果的卡片

AlertDialog 弹出对话框

StatefulWidget

常用StatefulWidget子组件

MaterialApp

BottomNavigationBar 底部导航条

RefreshIndicator 刷新指示

Image

TextField

PageView

布局相关组件

Container

RenderObjectWidget

ParentDataWidget

路由跳转

通过路由名跳转

不通过路由名跳转

页面返回

1
Navigator.pop(context)

监听用户手势 Gesture

1
2
3
4
5
6
7
8
9
GestureDetctor(
  onTap: () => _printMsg('点击'),
  onDoubleTap: () => _printMsg('双击'),
  onLongPress: () => _printMsg('长按'),
  onTapCancel: () => _printMsg('取消'),
  onTapUp: (e) => _printMsg('松开'),
  onTapDown: (e) => _printMsg('按下'),

)

导入资源文件

1
2
3
# pubspec.yaml
assets: 
  - images/avatar.png
1
2
3
Image(
  image: AssetImage('images/avatar.png')
)

打开第三方APP

添加安装引入url_launcher

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}
// 使用APP的url, 或者schema
// Android
const url = 'geo:52.32,4.917';
if (await canLaunch(url)) {
  await launch(url);
} else {
  // iOS
  const url = 'http://maps.apple.com/?ll=52.32,4.917';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

调用相机

  1. 添加安装引入image_picker插件
  2. AndroidX compatibillity
  3. 参照git仓库example配置/ios/Runner/Info.plist
  4. 安卓模拟器上有假相机可用

可学习的实例项目

Image widget 图片控件开发

加载网络图片

加载静态图片

加载本地图片

相对路径插件: https://pub.dev/packages/path_provider

1
2
import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png))

设置Placeholder

从内存中添加Placeholder插件: https://pub.dev/packages/transparent_image

配置图片缓存

插件: https://pub.dev/packages/cached_network_image

加载Icon

https://material.io/tools/icons/?style=baseline

1
import 'package:flutter/material.dart';

配置自定义Icon

AnimationWidget 简化Animation

不需要手动的setState和addListener

AnimationBuilder 让动画和逻辑分离

Hero动画, 页面过渡时共有一部分界面

Flutter调试

  • 断点
  • 变量Variable视窗与观察Watches视窗
  • Frames回退
  • Console

Scaffold widget

scaffold脚手架, 实现了基本的material design的布局结构

PageView

一个可以完成页面之间滚动的widget

轮播组件

flutter_swiper

基于Http实现网络操作

引入http插件

异步: Future 与 FutureBuilder

JSON解析与复杂模型转换

本地存储shared_preferences

shared_preferences插件

ExpansionTile 可展开列表

FractionallySizedBox 撑满尺寸的盒子,

fractionally 微小的, FractionallySizedBox常用来撑满整屏的宽

GridView 网格布局

RefreshIndicator 下拉刷新

ScrollController 上拉加载

与H5混合开发

flutter_webview_plugin