Flutter初探

技术经验 dingxiao 阅读数:36 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-实践出真知

实践出真知,这是一个技术应用者对待新知识的不二法则。

初学者可以关注下列网站,以获取最新资讯。

dart官网

flutter官网

flutter中文官网

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使用后的感觉就一个字-爽!!!

我转投flutter了!!!



captcha
    暂无评论