flutter 1.x

[uniquejava]

框架比较

1. ionic: WebView + inefficient DOM manipulation
2. react native: JS Bridge
3. Native (ObjectiveC/Swift/Java/Kotlin)
4. Flutter (AOT+JIT, compiles directly to native code)

flutter desktop

https://github.com/flutter/flutter/wiki/Desktop-shells

flutter cookbook

https://flutter.dev/docs/cookbook

links

youtube: flutter channel https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw

best flutter blog: https://www.didierboelens.com/

z-index https://stackoverflow.com/questions/50215334/stack-on-working-as-expected-z-index-css-equivalent

custom-painter: https://zocada.com/drawing-custom-shapes-in-flutter-using-custompainter/

How to set status bar color when AppBar not present https://stackoverflow.com/questions/50501799/flutter-how-to-set-status-bar-color-when-appbar-not-present

clipping in flutter https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a

How to change text color of AppBar, icon color of FAB universally using theme? https://stackoverflow.com/questions/50619848/how-to-change-text-color-of-appbar-icon-color-of-fab-universally-using-theme

表单(键盘)相关 https://fluttercrashcourse.com/lessons/realistic-forms-part1 https://stackoverflow.com/questions/48870082/managing-events-in-flutters-textformfield?rq=1 https://flutter.dev/docs/cookbook/forms/focus https://stackoverflow.com/questions/52150677/how-to-shift-focus-to-next-textfield-in-flutter https://medium.com/@anilcan/forms-in-flutter-6e1364eafdb5

TextField文本框详解 https://medium.com/flutter-community/a-deep-dive-into-flutter-textfields-f0e676aaab7a https://stackoverflow.com/questions/51893926/how-can-hide-letter-counter-from-bottom-of-text-field-in-flutter

[uniquejava]

类似 ui>li 效果: https://stackoverflow.com/questions/52110943/flutter-text-align-new-line-with-previous-line-indentation

高亮部分文字的效果 RichText > TextSpan https://yq.aliyun.com/articles/690476

Custom Font https://docs.flutter.io/flutter/painting/TextStyle-class.html

Animation 详解 https://medium.com/flutterpub/flutter-animation-basics-explained-with-stacked-cards-9d34108403b8

Reading https://medium.com/flutter-community/flutter-communication-between-widgets-f5590230df1e

学习列表 https://github.com/shijiacheng/wanandroid_flutter

https://github.com/diegoveloper/flutter-samples

https://github.com/xumaohuai/Flutter-CuriosityApp

[uniquejava]

全屏dialog

Creating full-screen dialog in Flutter – WeightTracker 2

制作app icon

https://www.canva.com/

生成2x 3x图

让美工给一张3x大小的图片 比如 diamond.jpg 上传后自动生成diamond@2x.jpg和diamond@3x.jpg https://appicon.co

自定义appBar的高度

https://stackoverflow.com/questions/51089994/flutter-setting-the-height-of-the-appbar/51104816

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

屏幕高度：MediaQuery.of(context).size.height 状态栏高度： MediaQuery.of(context).padding.top AppBar高度（默认为56）： appBar.preferredSize.height

不使用appBar如何让顶部留出足够padding

https://stackoverflow.com/questions/49554317/flutter-layout-without-appbar

// 方法一
padding: MediaQuery.of(context).padding,

// 方法二：
  body: new SafeArea(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      )
  ) 

json转换

https://app.quicktype.io/

http://json2dart.com/

https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

SQLite

从csv 到sqlite　到assets folder Sqlite in flutter, how database assets work

官方文档: Open an asset database https://github.com/tekartik/sqflite/blob/master/sqflite/doc/how_to.md

CRUD Using SQLite in Flutter

从assets目录异步读文件 Flutter: How to read file from assets, asynchronously, without blocking the UI

限制输入字数

Use inputFormatters property

example:

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(10),
      ]
    )

namespace

import 'package:flutter/services.dart';

[uniquejava]

MethodChannel 实现 Flutter 与原生通信

https://www.jianshu.com/p/6a40b758d1db

打包ipa 在iphone上白屏

打包 ipa

flutter clean
flutter build ios --release

打包 apk

flutter clean
flutter build apk --release

详见: https://github.com/flutter/flutter/issues/24887#issuecomment-444412020