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