如何用flutter做web

这个命令是启动web 开发

  • 查看当前channel

  • 切换channel

  • 顺序是:先切换channel 再启动web
  • 左边导航条怎么实现子菜单

https://stackoverflow.com/questions/45559580/expansion-panel-list-in-flutter

  • 怎么在网页上画图表

https://whereisdarran.com/2020/02/charts-for-flutter-and-flutter-web/

  • 怎么执行js

https://medium.com/flutter-community/using-javascript-code-in-flutter-web-903de54a2000

https://fireship.io/snippets/using-js-with-flutter-web/

 

  • 画table 和 带换页的table

https://medium.com/codechai/flutter-web-and-paginateddatatable-3779da7683e

 

  • 怎么画bootstrap 风格的页面

用这个package:flutter_bootstrap 1.0.2

默认情况下,Bootstrap 4网格由12列组成。 您可以为列选择1到12之间的任意大小。 如果要3个相等的列,则可以为每一个使用.col-4

关于。col md offset 的详细解释,

  • .col- Extra Small ( < 576 px )
  • .col-sm- Small ( >= 576 px )
  • .col-md- Medium ( >= 768 px )
  • .col-lg- Large ( >= 992 px )
  • .col-xl- Extra Large ( >= 1200 px )

比如某2列是这样写的

col-12 col-md-8
col-12 col-md-4
意思是 , 当Medium ( >= 768 px )时 , 这两列放在一行, 第一个宽度是第二个两倍
当( < 576 px ) 时 ,  放在2行 , 每个都占满

flutter 如何创建或引用本地另外的package

此问题的解答见:

https://stackoverflow.com/questions/51238420/how-to-use-local-flutter-package-in-another-flutter-application

 

把本地package 根目录和 app的根目录并列,然后在 app的 .yaml 文件加:

红字部分即为本地package

,当需要使用时: 引用方法为:

 

未解决问题: package 的assets无法在app使用 

 

 


如何创建一个package:

 

官方教程: https://flutter.dev/docs/development/packages-and-plugins/developing-packages

 

medium 教程: https://medium.com/flutterdevs/developing-packages-in-flutter-61a31acf616d

 


plugin是处理平台相关的特殊package


 

package 是否可以带ui?      可以


 

 

 

 

 

 

从2021-3-2起, 开始模仿一个鱼丸星球的app

  • 2021-03-02

DONE :    底部导航条

用flutter_screenutil  这个package 实现自适应屏幕大小

TODO:   appbar 加上搜索条 , 参考文章: https://flutter.website/flutter-app-bar-and-search-widget-integrated/

 

  • 2021-03-03

TODO :    实现从webservice 取回 json, 生成listview , 并进一步实现  pull — to — refresh 功能 , 也就是先载入例如 20条, 当用户向下拉到20条的底部时, 继续载入下20条

参考文章 :   https://medium.com/@maffan/implementing-pull-to-refresh-in-flutter-59dd31239624

先定义用户模型:


新建此项目所用的node.js server ,步骤

1 :  mkdir yuwanxingqiunodejs

2:     npm init

3:  npm install express –save    安装  express.js

  • 2021-03-04

  • 2021-03-09 周二

如何实现实时音频:  https://www.infoq.cn/article/zsh1smytbrvclz579sou

这个链接讲怎么用声网sdk实现 ,


原生安卓怎么对实时音频编码解码:

https://stackoverflow.com/questions/15349987/stream-live-android-audio-to-server

https://stackoverflow.com/questions/21804390/pcm-aac-encoder-pcmdecoder-in-real-time-with-correct-optimization


  • 2021-03-10

建mysql数据库:

写入数据;

 


node.js  怎么连mysql : https://www.w3schools.com/nodejs/nodejs_mysql.asp


怎么建一个node.js service ,允许用户上传图片到服务器,并把图片的路径存在mysql

例子: https://www.js-tutorials.com/nodejs-tutorial/nodejs-example-upload-store-image-mysql-express-js/

例子的代码 : https://github.com/jstutorials/nodejs_image_upload_and_store_mysql

nodejs_image_upload_and_store_mysql-master


****. 成功测试出如何上传图片到服务器

 


2021-03-11 周四

问题: centos 6 , git当前版本1.7.1 , 当 git push 时遇到 401错误, 如何升级git

既然昨天可以往服务器存图片, 那么 从服务器取 用户 list 就可能


node.js 查询mysql数据库, 返回json: https://www.jianshu.com/p/6af5448c380a


node.js 怎么提供文件服务器功能, 此问题已经有人提出过, 在这个网址:

https://stackoverflow.com/questions/16333790/node-js-quick-file-server-static-files-over-http

解决方法是这个: 加一句:

即可

把某个文件夹变成文件服务器之后, 就可以用这样的url:

http://176.122.178.74:8080/images/upload_images/fruit_bubble.png

来访问文件


  • 2021-03-12.  周五

当用户以http从服务器取回数据时 , 怎么把json解析为object list: https://stackoverflow.com/questions/51053954/how-to-deserialize-a-list-of-objects-from-json-in-flutter

 


得到object list以后, 怎么用futurebuilder动态生成ListView?

https://stackoverflow.com/questions/56694731/flutter-listview-builder-using-futurebuilder-not-working


接下来是怎么实现 scroll-to-refresh , 就是当第一次加载比如20条之后,当用户到达底部后再次向下scroll,那么再多加载20条。

https://medium.com/@maffan/implementing-pull-to-refresh-in-flutter-59dd31239624

 


  • 2021-03-17 周三

试着加上用户profile页面

 

 

 

 

 

 

 

 

 

 

 

 

 

 

带边框的container

 

home_status_view.dart before modify

 

原来的food   toy  map

 

 

 

 

flr controller advance

 

flutter 预载入 flr 文件

 

 

 

来源 :

https://github.com/2d-inc/Flare-Flutter/issues/110    预载入 flr 文件

https://github.com/2d-inc/Flare-Flutter/issues/235      一样

https://github.com/2d-inc/Flare-Flutter/issues/180#issuecomment-550584347

flutter stream and streambuilder 详解

https://stackoverflow.com/questions/60487025/flutter-streambuilder-refresh