Dart / flutter筆記
2021-03-29 01:04 Last Edited: 2021-04-04 01:31 68

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。

 

 

Category: Coding
Tags: flutterdart