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

 

 

 

如何从头写一个flutter app

  •  用命令行新建项目

  • 把 lib/main.dart.   的所有代码删除

用这段 替换

 

 

 

  • 参考文章

https://flutter.dev/docs/get-started/codelab

简单的app


https://flutter.dev/docs/development/ui/layout

讲解界面layout, 以及各种布局例子

 

How to install flutter dev env

  • For windows

goto this site to download SDK :

https://flutter.dev/docs/get-started/install/windows

download this one :  flutter_windows_v1.12.13+hotfix.5-stable.zip

in disk C ,  create folder :src

unzip and place it under c:/src


接下来去   c:/src/flutter/bin , 执行 flutter doctor -v , 目的是检查所有 license 和 dependency 是否齐全 , 如果有缺少, 按提示安装


安装 android studio


为  android studio 安装  flutter plugin  , 方法:

file—>settings—->plugin  ,  选择 flutter 安装


开启手机的usb调试选项

1.打开华为手机的开发者选项:
打开“设置”界面——>点击“系统”——>点击“关于手机”——>连续点击“版本号”,点击5次左右,直到手机提示已开启开发者模式

2.打开开发人员选项
1、打开“开发人员选项”

2、打开”USB调试“选项

3、打开“仅充电模式下允许ADB调试”选项。

如果不打开“仅充电模式下允许ADB调试”选项 导致AndroidStudio 连接不上华为手机,而且关闭开发人员选项页面再进来,会发现usb调试打开后自动关闭,打开“仅充电模式下允许ADB调试”选项就可以了!!
————————————————
版权声明:本文为CSDN博主「shan_zwq」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/shanshan_1117/article/details/89188812


实验后发现, 用真实手机测试不可用, 所以在 Android studio 安装一个模拟器,方法是:  tools—> AVD manager —->create

创建后要保证 在console 执行  flutter emulators 能看到这个模拟器

 


然后在 android studio 新建一个 flutter project ,  按下图选择执行环境

点击run即可


 

参考文章 :

https://flutter.dev/docs/get-started/install/windows

https://developer.android.com/studio/run/win-usb

https://enappd.com/blog/setup-flutter-in-windows-and-mac/36/

https://flutter.dev/docs/development/tools/android-studio

https://enappd.com/blog/setup-flutter-in-windows-and-mac/36/

https://stackoverflow.com/questions/49045393/flutter-run-no-connected-devices

 

 

 

 

 

How to gitlab cl cd

To use GitLab CI/CD, all you need is an application codebase hosted in a Git repository, and for your build, test, and deployment scripts to be specified in a file called .gitlab-ci.yml, located in the root path of your repository.

需要写 gitlab-ci.yml 文件 来描述如何自动化 ci , cd

 

Once you’ve added your .gitlab-ci.yml configuration file to your repository, GitLab will detect it and run your scripts with the tool called GitLab Runner, which works similarly to your terminal.

写完以后用 gitlab runner 来执行 yml 文件