Dart / flutter筆記
2021-03-29 01:04 Last Edited: 2021-07-10 19:17 1,794

Dart

  1. 程式入面為void main(),不需要class
  2. 生一個物件即使不在前面加new,還是會默認為new
  3. 一個C#沒有的operator, ~/ 表示除數後return int,例如 6~/2 = 3, 7~/2 = 3,8~/2 = 4,17~/2 = 8

flutter

  1. Widget是基本單位
  2. main()裡面生一個Widget出來就是flutter_app的表現方式
  3. framework在不同階層內call Widget的build(),包括init、didUpdate、setState等
  4. Scaffold是一個包含了AppBar, Body, bottom的Material Widget,是full size display的
  5. Container是一個Widget用來包住其他Widget以用作positioning、sizing、加padding等layout工作

App的次序

  1. main() => runApp(myApp);
  2. class myApp extends StatelessWidget
  3. Material App / Cupercino App (理解為Android UI風格/IOS UI風格)
  4. Scaffold 或其他全頁框架
  5. Scaffold's appBar, body, footer
  6. body內的child放入Widget,比如TextField、Button等,有多個Widget時可用Column(children:[]) 垂直擺放

Package

  1. 我使用Android Studio作為IDE
  2. 新建的flutter project都會有pubspec.yaml,在dependencies: 下面加入你要的package,註明版本號
  3. IDE隨即彈出一個notice bar,按Pub get下載
  4. 在dart文件上import 'package: package_name';,會彈出Get Dependence,按下即可

類似CKEditor的text editor插件在Flutter

  1. 目前似乎並沒有這種東西,但有人做了個flutter_markdown_editor,但他並非所見即得,你會看到編輯畫面中還是markdown語法。當中用到官方markdown套件,不知道能否在原有的markdown syntax之上加入自定義的syntax,就像第4點的套件一樣,可以的話就相當可用。
  2. 也有人造了所見即得的編輯器 (教學文章),但功能不多
  3. 針對第2點的文章寫下筆記,它採用keyboard toolbar上設置buttons為當前text field設定TextStyle的方式進行即時可見編緝。第一部份是keyboard toolbar和text_field的代碼,還有什麼provider、state management我目前還沒理解。第一部份的效果是點擊toolBar上的功能,整個text_field的文字都會變成所選的格式,第二部份則是將這個text field list起來,所以每行都可以有不同格式,但也限制了每行只有一種格式。幾個字之間有一個粗體這種情況就無法實現了,應該不可行。
  4. flutter_parsed_text是一個自定義的Widget ParsedText,透過regex找出ParsedText內的Text參數的指定pattern文字,加入TextStyle和onTap function,這個onTap某程度很能滿足我的需求,預期能做出一個和連登一模一樣的文字編輯器,只是要自行加入所有語法和style。

flutter_parsed_text深入研究:
ParsedText會將text內對應到MatchText的部份,賦予相應的行為。假如一個ParsedText,用家想要parse到Email、url、或者其他自訂pattern,可以在這邊逐個MatchText放進Array內。

ParsedText(
    text: "the text you gonna pass",
    style: TextStyle( // default style
        color: Colors.Black
    ),
    parse: <MatchText>[
        //如下
    ]
)

MatchText(
    type: ParsedType.EMAIL, //or other custom
    pattern: r"B#+([w]+)", // optional: a custom pattern to match
    style: TextStyle(
        //同上
    )
    onTap: (url){
        //do the things after Tap the text
    }
)

看過源碼沒看到有Parse img成圖片的部份,所以想要插入圖片的話,可能需要另一個class負責parse即將存入的text內有多少個img,用[img][/img]來split。
比如

"文字文字文字[img]https:host.com/img.png[/img]另一段文字文字文字"


split後變成:

ParsedText(text:"文字文字文字", ...)
Picture(url: "https:host.com/img.png")
ParsedText(text:"另一段文字文字文字", ...)


這樣,看上去也非不可行。

Category: Coding
Tags: flutterdart