temp

 

flutter tips

    • in yaml file add this line , 可以在 save 之后立即看到界面的更改效果

dependencies:
flutter:
sdk: flutter
uses-material-design: true

  • 如何设置 background image

https://stackoverflow.com/questions/44179889/flutter-sdk-set-background-image

  • image 从哪里找

https://flutter.dev/docs/development/ui/assets-and-images

这个文章讲   Adding assets and images – Flutter

assets 可以理解为 resources

还可以参考这个 https://medium.com/@suragch/how-to-include-images-in-your-flutter-app-863889fc0b29

最终方法是 :   在项目跟目录下新建 :  assets\images , 图片放进去

然后在  yaml 改写 :

最后

‘assets/images/lake.jpg’  这样引用

 

  • 如何设置container 的背景图片

https://stackoverflow.com/questions/44179889/flutter-sdk-set-background-image

 

可用的方法是 :

 

child 可以是 container , 把上面的代码改为 :

 

会显示出一个logo

但是, 如何在背景图上面加上 button ?  如果把上面一段代码改为

会发现 text 被显示


最终能在背景图片上显示button的代码为:

 

 

 

以下的一段简单代码 :

看起来很正确, 但是会引发这个错误 ,经google, 原因是 :

 

 

这个错误的解决方法 :

https://stackoverflow.com/questions/53923928/no-directionality-widget-found-inkwell-widgets-require-a-directionality-widget

 

  • 如何给 container 设置边框以确定其实际位置

 

来自: https://stackoverflow.com/questions/47423297/how-to-add-a-border-to-a-widget-in-flutter

 

  • 如何给 raisebutton 设置成圆角button :  加 shape 属性

 

  • 有时候不能改raisebutton的背景色,是因为

From RaisedButton documentation:

If the [onPressed] callback is null, then the button will be disabled and by default will resemble a flat button in the [disabledColor]. If you are trying to change the button’s [color] and it is not having any effect, check that you are passing a non-null [onPressed] handler.

  • 如何在不同页面之间 route

https://flutter.dev/docs/cookbook/navigation/named-routes

但是, 如果用这个方法, 文档中提到: When using initialRoutedon’t define a home property.

意思说 ,meterialapp 不能有home 属性, 所以不使用这个文档的方法, 经google, 实际用的是这个: https://www.youtube.com/watch?v=DlArCl8jvlo

 

关键代码是:  导航的raisebutton 这样写:

 

 

  • 如果 Scaffold 只占屏幕的一半:

 

  • 如何实现多个按钮组

来源 : https://stackoverflow.com/questions/57509675/horizontal-button-group-in-flutter

 

关键字 :  flutter wrap RaisedButton

 

  • appbar 其他全透明,只显示一个后退箭头, 让背景图片全屏,

 

关键字 stack widget

来源:  https://stackoverflow.com/questions/51508257/how-to-change-the-appbar-back-button-color

 

https://stackoverflow.com/questions/53080186/make-appbar-transparent-and-show-background-image-which-is-set-to-whole-screen

 

  • flutter 实现类似这样的 image listview

 

例子程序来源自: https://www.codeproject.com/Articles/1252727/Flutter-Getting-Started-Tutorial-4-ListView

 

更好的是这个: https://flutterbyexample.com/list-view-and-builder-methods/

 

最简单的listview : https://pusher.com/tutorials/flutter-listviews

 

当使用listview时, 遇到这个错误:Viewports expand in the scrolling direction to fill their container. In this case, a vertical IN/flutter ( 7297): viewport was given an unlimited amount of vertical space in which to expand.

该如何解决?

https://stackoverflow.com/questions/50252569/vertical-viewport-was-given-unbounded-height

此贴提供了多种解决方法, 最简单的给listview加上  shrinkWrap: true,

 

  • 一个完整的flutter login 例子

https://pub.dev/packages/flutter_login#-readme-tab-

 

  • MaterialApp  和 Scaffold 的区别在哪里

 

  • Waiting for another flutter command to release the startup lock.   怎么解决

在 mac系统,  killall -9 dart

 

  • flutter_swiper: ^1.1.6   为什么 flutter pub get  不到 ?

 

  • 个人开发的flutter 组件库

https://github.com/samarthagarwal/FlutterScreens

 

  • 在mac电脑, 遇到 usb调试时, 出 iproxy 错误, 执行此命令

 

来源: https://medium.com/@alexandrosbaramilis/setting-up-flutter-on-macos-catalina-d023df8845ae

  • 如何加border

  • bottom layout overflowed by X pixel 的解决方法 :

用这个包上

来源: https://stackoverflow.com/questions/54156420/flutter-bottom-overflowed-by-119-pixels/54157250

 

  • 屏幕的宽度和高度

 

  • 如何在  initstate 函数调用异步过程:

 

https://stackoverflow.com/questions/51901002/is-there-a-way-to-load-async-data-on-initstate-method

 

 

 

prepare for malaysia trip

  • what opentok – api can do

: to generate OpenTok sessions (session 相当于房间 ),

session never expired , also can not be explicit destroy .  user connect to session use token , token can be expired.


once a session is created ,  should define  how clients in the session will send audio-video streams,  there are two types :

a) Relayed   : mean p2p ,  but if in case can not connect cause firewall or other reason , will use opentok TURN server to relay .

b)Routed , 全部由 opentok 中转

The OpenTok Media Router supports the OpenTok archiving feature,  是否想录像必须是这个模式

In clients using the OpenTok iOS and Android SDKs, relayed sessions support only two clients connected to the session. The OpenTok Media Router supports additional clients for multiparty sessions on mobile devices.

手机版 relay 模式只支持2个client直连

如果正确选择这2种模式?

Choosing Relayed vs. Routed session type

Use a relayed instead of a routed session, if you have only two participants (or maybe even three) and you are not using archiving. Using relayed sessions reduces the latency between participants, reduces the points of failure and you can get better quality video and audio in most cases.

Routed sessions are required if you want to archive your session. They are recommended if you have more than two or three participants in the session.

以上部分来自: https://tokbox.com/developer/guides/create-session/


  • How to create session on server side :  use node.js example

From  https://tokbox.com/developer/guides/create-session/node/

How to create token :  From https://tokbox.com/developer/guides/create-token/node/

之后, client 怎么知道 这个session id 和 token  ????

  • session 自带一些事件, 可以给这些事件设置回调, 比如统计room的在线人数

 

 

  • how many types of opentok-api

web;  android ; IOS; windows desktop;

  • show android and web example

 

 

 

 

 

 

  • what is web-rtc

mean :  web Real-Time Communications

 

运行并修改 tokbox webrtc 例子程序

opentok 账号

mzcw2011@sina.cn

Passw0rd77#


api key   46419702

project secret :  b8f17a054ccde74e68453464ad6b1c879a75d030

 

环境  win10 64 位

  • dependence :

a)  node.js  ,   已安装 , 64位的

b) Redis

在这里下载 3.2.100 的 zip 版本 并启动 : https://github.com/microsoftarchive/redis/releases/tag/win-3.2.100

 

  • 下载并编译源程序 :

a) 从这里 clone : https://github.com/opentok/opentok-rtc

首先进入 config 文件夹,  修改 config-ci.json 为 :

 

这里的apikey和 apisecret改成自己的

b) 不知道是否还需要安装python, 好像是需要的,因为本机已有,未测试

c)  npm 安装package :     进入程序主目录执行

 

d) 启动服务端, 记得redis要先启动

而且,启动 redis server 之后, 再启动 redis-cli  , 并增加2个键

然后启动 server

 

——————   在 ubuntu 的安装

apt install git

git clone https://github.com/opentok/opentok-rtc.git

apt install nodejs

apt install redis-server

设置redis-server为服务 :

此后要注意 redis 的权限问题,  redis 服务的配置文件在    /etc/redis/redis.conf

其中写到 : pidfile /var/run/redis/redis-server.pid

 

新开一个 putty , 输入 :  redis-server

回到原来的putty ,   进入下载好的  opentok-rtc/config 目录 , 复制 example.json , 重命名为  config.json , 并编辑修改  key 和 secret ,改为自己的 ,

安装 npm

apt install npm

在 opentok-rtc 跟目录下, 执行 npm install

安装所有package 之后, 执行 node server 启动服务器

此时访问  ip:8123 应该可以看到页面了, 但是, 发现css没起作用 ,

a) 安装 less

apt install node-less

b) 安装 bower

执行  bower install –allow-root

c) 安装 grunt

sudo npm install -g grunt

此处要注意, 在 ali ubuntu主机, 如果 npm install grunt –save-dev  ,  会失败,不知道为什么

安装之后 , 在跟目录执行  grunt clientBuild   , 会把  less 生成对应的  css

 

  • 加载 screen-sharing extensions

第一步 , 修改  opentok-rtc-master\screen-sharing-extension-chrome\manifest.json 文件 的这一部分 , 改为 :

 

第二步, 进入 chrome://extensions/  ,  开 developer mode 开光, 选 左上角 load unpacked , 然后选中 整个  screen-sharing-extension-chrome 目录

 

第三步, 修改 服务器  /config/config.json 文件 , 将 screen – sharing 部分改为

 

chromeExtensionId 是客户端 加载 extension之后产生的, 也在 chrome:/extension能看到

最后启动服务, room 会多出一个 screen-share的选项 。

 

 

第一个node.js 服务 . centos 7 64 bit

  • 因为 node.js 也相当于一个 http service , 可以理解位简单版的apache ,

所以先关了apache

 

  • 永久打开 3000端口, 因为程序里用到

检查是否真的打开了

  • 新建 app,js , 放哪里都可以

192.168.3.116 是centos 的局域网地址

  • 执行此service

node app.js

  • 此时即可从局域网其他机器访问 :

http://192.168.3.116:3000

  • 未解决问题:

a) 如何于 apache共存

好像可以在 apache设置代理 , 见

https://stackoverflow.com/questions/9831594/apache-and-node-js-on-the-same-server

b)

开源vue程序 vuestic-admin-master的学习笔记

  • 引用模块

引用 js

  • App.vue 用 router-view 这个 api 加载各模块

那么 ,  router又是怎么直到加载那些呢 ?

见 router目录下的 index.js

 

 

flaviocopes Vue教程笔记

网址是:  https://flaviocopes.com

第一个 app:       https://flaviocopes.com/vue-first-app/

What this code does is, we instantiate a new Vue app, linked to (el mean element link )the #example element as its template (it’s defined using a CSS selector usually, but you can also pass in an HTMLElement).

Then, it associates that template to the data object. That is a special object that hosts the data we want Vue to render.

In the template, the special {{ }} tag indicates that’s some part of the template that’s dynamic, and its content should be looked up in the Vue app data.

vue component 笔记

怎么在html文件包含一个component :       learn from  https://vuejs.org/v2/guide/components.html


怎么引用 单独一个 .vue 文件

from

https://vuejs.org/v2/guide/components-registration.html