Flutter初探
技术经验 • dingxiao • 阅读数:5000 • 2019年2月20日 13:35
Flutter初探
0x01-技术之路永无止尽
这几天在网站找资料的过程中，让我无意之中注意到了Flutter这个词，看人在网上吹到该技术怎么怎么的牛逼，它可以跨目前所有应用平台，专门针对移动端开发而生，看到这里就有点忍不住了，遂点开google进行了解，果然该技术由google提供，采用全新的dart语言进行开发，技术开源。
关键是一套代码可以直接开发Android和ios，这个实在是令人兴奋之处，而且也随意浏览了flutter的demo代码，发现感觉很有亲和力，虽然本人已经开始尝试使用RN框架及进行开发App了，但是dart的亲和力实在使我这种没有很好掌握JavaScript的人所不能抵挡的。
好吧，dart-flutter我转身了。yes，it's my meat。
0x02-实践出真知
实践出真知，这是一个技术应用者对待新知识的不二法则。
初学者可以关注下列网站，以获取最新资讯。
0x03-无对比无伤害
在了解flutter技术几天后，心中总有一个念想，想把刚用RN写的Demo转换成flutter重新写一遍，一来可以尝试着熟悉下flutter的开发过程，二来也正好检验下flutter到底适不适合自己。
说干就干。
参考网上的有限的示例，开始重新编写flutter的应用。
demo实现的主要功能代码：
创建mqtt连接
//创建mqtt连接
MqttClient client = MqttClient('ip地址', 'dx1546');
实现连接
Future _connect() async{
client.port = 端口号;
client.logging(false);
client.keepAlivePeriod=20;
client.onDisconnected = _onDisconnect;
client.onSubscribed = _onSubscribed;
await client.connect();
}
订阅消息
client.subscribe(topic, MqttQos.atMostOnce);
接收消息
client.updates.listen((List<MqttReceivedMessage> c)
//获取原始消息数据
final MqttPublishMessage recMess = c[0].payload as MqttPublishMessage;
//消息转换成utf8格式
String pt = decodeUtf8(recMess.payload.message);
//消息转换成base64格式
var pt2 = base64.encode(recMess.payload.message);
});
更新数据
//更新数据
setState(() {
bytes = base64.decode(pt2);
});
图片前端渲染
new Image.memory(bytes),
完整功能代码
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'package:mqtt_client/mqtt_client.dart';
import 'package:utf/utf.dart';
import 'package:typed_data/typed_data.dart' as typed;
import 'package:cached_network_image/cached_network_image.dart';
class MqttPage extends StatefulWidget{
@override
State createState() {
return MqttPageState();
}
}
class MqttPageState extends State<MqttPage>{
var message = '';
var statusMessage = '';
var _topic1 = 'pic';
var _topic2 = 'dx';
var _mqttUsername = 'null';
var _mqttPassword = 'null';
//创建mqtt连接
MqttClient client = MqttClient('ip地址', 'dx1546');
TextEditingController _controller = TextEditingController();
int flag = 0;
String _base64;
Uint8List bytes = base64.decode('iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==');
@override
void didUpdateWidget(MqttPage oldWidget) {
print('didUpdateWidget');
}
@override
void initState() {
print('init state.');
print('--connecting to server.');
statusMessage = '--connect to server...';
_connect().then((_){
print('--connected.');
//订阅
_subscribe(_topic1);
_subscribe(_topic2);
setState(() {
statusMessage += '\n--connected.';
});
}).catchError((e){
setState(() {
statusMessage += '\n--connection failed.';
});
});
}
@override
void dispose() {
_controller.dispose();
client.disconnect();
super.dispose();
}
Future _connect() async{
//client.setProtocolV31();
//mqtt服务端口号
client.port = mqtt服务端口;
client.logging(false);
client.keepAlivePeriod=20;
client.onDisconnected = _onDisconnect;
client.onSubscribed = _onSubscribed;
// await client.connect(_mqttUsername, _mqttPassword);
await client.connect();
}
_subscribe(String topic){
var status = client.connectionState.toString();
print('connectionState=$status');
if(status != 'ConnectionState.connected'){
_connect();
return;
}
client.subscribe(topic, MqttQos.atMostOnce);
client.updates.listen((List<MqttReceivedMessage> c) {
final MqttPublishMessage recMess = c[0].payload as MqttPublishMessage;
// String pt = MqttPublishPayload.bytesToStringAsString(recMess.payload.message);
String pt = decodeUtf8(recMess.payload.message);
//获取消息byte后转换成base64格式
var pt2 = base64.encode(recMess.payload.message);
//print("message received, topic:${c[0].topic}, payload:${pt}");
if(c[0].topic == 'dx')
{
setState(() {
message += '\n$pt';
});
}
else if(c[0].topic == 'pic')
{
if(flag == 1)
{
flag = 0;
_base64 = 'iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='; //十字
}
else if(flag ==0)
{
flag = 1;
_base64 = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII='; //黄星
}
//刷新图片
setState(() {
//转换base64字节流
bytes = base64.decode(pt2);
});
//print('${pt2}');
}
});
}
_onDisconnect(){
print('--disconnected');
setState(() {
statusMessage += '\ndisconnected.';
});
}
_onSubscribed(topic){
print('--subscribed, topic=$topic');
setState(() {
statusMessage += '\n--subscribed, topic=$topic';
});
}
_onSendButtonPress(){
var message = _controller.text;
print('text=$message');
MqttClientPayloadBuilder builder = new MqttClientPayloadBuilder();
var _buf = typed.Uint8Buffer();
_buf.addAll(encodeUtf8(message));
builder.addBuffer(_buf);
client.publishMessage(_topic2, MqttQos.exactlyOnce, builder.payload);
_controller.text = '';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('MQTT 示例'),),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('收到消息:$message'),
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: '发送内容'
),
),
Center(
child: RaisedButton(
child: Text('发送'),
onPressed: _onSendButtonPress
),
),
Text('$statusMessage'),
//显示图片
new Image.memory(bytes),
],
),
);
}
}
0x04-flutter版Demo截图
0x05-总结
我转投flutter了！！！
-
暂无评论