code4soul

code for Love, code for Life

0%

Posted on Edited on In

InheritedWidget 他是一個特殊的 widget，用來從上而下的共享資料與狀態

簡單說就是讓他的子 widget 都能來取得共用的資料

或者是當相關依賴的資料產生變化的時候，能有效率的只更新部分 widget 必面過度渲染

簡單的範例如下方

Posted on Edited on

build 專案時會發生以下的錯誤

1
Target debug_unpack_ios failed: Exception: Failed to codesign

只要把專案搬離 iCloud folder 就沒這問題了

本來只是想在兩台電腦間同步檔案方便隨時在不同的電腦上做事，沒想到遇到這樣的問題，可能要再找找其他 syc folder 的解方

後記：發現其實不只 flutter folder 其他東西的 folder 放進 iCloud 裡都會怪怪的，所以目前是都先搬出來用 google drive 做同步

Posted on Edited on In

簡單的抖動動畫 widget，在輸入框的錯誤提示或是吸引使用者注意的時候蠻方便的一個 widget

安裝方式

pubspec.yaml 下面加入

1
2
dependencies:
  shake_animation_widget: ^3.0.4

記得輸入完要 pub get 安裝過

使用方式

  • shake animation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      ShakeAnimationWidget(
        // shake animation controller
        shakeAnimationController: _shakeAnimationController,
        // shake animation 的樣式
        shakeAnimationType: ShakeAnimationType.TopBottomShake,
        // shake 的幅度
        shakeRange: 0.1,
        // shake 的次數, 預設 0
        shakeCount: 0,
        // 設置預設不抖動, 預設是 true
        isForward: false,
        child: const Text('code for love, code for life')
      ),
      TextButton(onPressed: () => _shakeAnimationController.start(shakeCount: 0), child: const Text("Start"))
    ],
  ),
)
  • shake text animation
1
2
3
4
5
6
7
8
9
10
11
ShakeTextAnimationWidget(
  // 設置文案
  animationString: "Join the Dart side!!",
  space: 1.0,
  runSpace: 10,
  // 文字樣是
  textStyle: const TextStyle(
    fontSize: 25,
  ),
  shakeCount: 0,
)
  • bottom round flow menu
1
2
3
4
5
6
7
BottomRoundFlowMenu(
  defaultBackgroundColor: Colors.white,
  iconList: const [Icon(Icons.icecream), Icon(Icons.ac_unit), Icon(Icons.account_balance_wallet_rounded)],
  clickCallBack: (int index) {
    print("press on $index");
  },
),
  • animated status button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
AnimatedStatusButton(
  // controller
  animatedStatusController: _animatedStatusController,
  width: 220.0,
  height: 40,
  // 動畫時間
  milliseconds: 600,
  buttonText: 'Submit',
  // 背景顏色
  backgroundNormalColor: Colors.white,
  // 外框顏色
  borderNormalColor: Colors.green,
  // 文字顏色
  textNormalCcolor: Colors.black54,

  clickCallback: () async {
    await Future.delayed(const Duration(seconds: 3));
    return true; // 回傳 true 會讓 loading status 回到按鈕的狀態, false 的話會持續顯示 loading
  },
)
  • rote flow button menu
1
2
3
4
5
6
7
RoteFlowButtonMenu(
  defaultBackgroundColor: Colors.yellowAccent,
  iconList: const [Icon(Icons.plus_one), Icon(Icons.people), Icon(Icons.add)],
  clickCallBack: (int index) {
    print("on press $index");
  },
)
  • draggable floating action button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
final GlobalKey _parentKey = GlobalKey();
// 要用 stack 包住才有效果
Stack(key: _parentKey, children: [
  Container(color: Colors.blueGrey),
  DraggableFloatingActionButton(
    initialOffset: const Offset(120, 70),
    parentKey: _parentKey,
    onPressed: () {},
    child: Container(
      width: 60,
      height: 60,
      decoration: const ShapeDecoration(
        shape: CircleBorder(),
        color: Colors.white,
      ),
      child: const Icon(Icons.add),
    ),
  ),
])

相關連結

shake_animation_widget

Posted on In

官方連結

在製作 app 版面的時候或者是 web 時我們都會需要一些填空元素來撐開一個空間，如果老一點的 web 工程師大概還記得那個年代我們都會有一個 1px 長寬的透明 gif 檔用來在個各地方拿來塞出空間來，在那個 css 還沒有那麼盛行的年代，排版都還在 table 的遙遠年代

使用方式

1
Spacer({Key? key, int flex = 1})

flex 決定在既有空間裡可以分配到的空間大小的比例，沒有設定的話就平均分配，這部份的該念在 CSS 裡的觀念其實是差不多的

程式範例

Posted on

就需要一個地方紀錄跟寫下自己學習的紀錄跟一些雜七雜八的心得感想的地方，所以就開了這個 blog
寫程式這件事，總是那麼讓人又愛又恨，他是工作是愛好也是生活

沒預計這邊會維持多久，極大的可能發了兩、三篇我就會懶得寫了，熱血寫 blog 的年代已經是 20 年前的事情了吧
但是單純寫在筆記軟體裡面又會覺得少了點什麼感覺，也不是想要讓很多人來看，我想大概是以前作個人網站的習慣，就是想做想放出來不管有多少人看到，就是種樂趣吧 :P