正在顯示「 2024 年 11 月 」的所有結果
11月 03, 2024 Dart Flutter


### 從 pubspec.yaml 中讀取 version 資料

用呢個 package https://pub.dev/packages/package_info_plus

version 個格式係 1.0.0+1

前面係 semantic versioning (Android 個 versionName),後面個 + 1 就係 versionCode (Android 個 versionCode)

所以個 versionCode 只可以愈來愈大,不可以向後退,如果唔係會變成 downgrade 個 app。

### DropdownMenu 防止使用者可以輸入文字

只要加入呢個 `requestFocusOnTap: false` 參數就可以了。係 window 入面個 cursor 仲會變埋 pointer 添。

```dart
DropdownMenu(
  requestFocusOnTap: false,
  ...,
);
```

11月 03, 2024 Dart Flutter


如果想要在 Widget 一開始時就執行想要的動作,最好就係 `initState` 時加入你要想的東西。

```dart
@override
void initState() {
  super.initState();

  // your action here
}
```

但後多時候我們是需要等到 widget tree 整個畫好晒一次先可以做後續動作。例如 setState 等,可以通過使用 `WidgetsBinding.instance.addPostFrameCallback` 來達成。

```dart
@override
void initState() {
  super.initState();

  // post callback (do after build widget tree)
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {

    // set state
    setState(() {
      _foo = 'bar';
    });
  });
}
```

咁樣就可以了。
11月 02, 2024 Dart Flutter


### Dart 對於 JS 的 reduce

Dart 同樣有 reduce,不過 reduce 有少少唔同,最相似係用 fold。

```dart
// create list
final list = ['a', 'bb', 'ccc'];

// compute the sum of all length
list.fold(0, (t, e) => t + e.length); // result is 6
```

### Dart double ceil

double force 進位

```dart
print(1.99999.ceil()); // 2
print(2.0.ceil()); // 2
print(2.00001.ceil()); // 3
print((-1.99999).ceil()); // -1
print((-2.0).ceil()); // -2
print((-2.00001).ceil()); // -2
```

### Flutter container add border

幫 Container 加入 border

```dart
Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent),
  ),
  child: Text('My Awesome Border'),
)
```

### 設定一個 FocusNode 用來自動畫面中 Focus 的目標

先在 class 入面設定一個 `FocusNode`。

```dart
final _myField = FocusNode();
```

然後在 TextField 入面加入 focusNode 參數。

```dart
TextFormField(
  focusNode: _myField,
  ...,
);
```

之後就可以通過使用 `_myField` 去選定現在的 focus 目標。

```dart
_myField.requestFocus();
```

得記用完之後要 `dispose` 返佢。

```dart
@override
void dispose() {
  _myField.dispose();
}
```

### Flutter TextField 輸入完成後 focus 下一個 TextField

最普通情況,可以自動移到下一個 TextField:

`TextInputAction.next` 移到下一個 TextField。
`TextInputAction.done` 輸入完成,關上 Keyboard。

```dart
TextField(
  decoration: InputDecoration(hintText: 'TextField A'),
  textInputAction: TextInputAction.next, // Moves focus to next.
);
```

也可以通過 `onFieldSubmitted` 自訂你想要 Focus 的目標。

```dart
Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    TextFormField(
      textInputAction: TextInputAction.next,
      autofocus: true,
      decoration: InputDecoration(labelText: "Input 1"),
      onFieldSubmitted: (v){
        FocusScope.of(context).requestFocus(focus);
      },
    ),
    TextFormField(
      focusNode: focus,
      decoration: InputDecoration(labelText: "Input 2"),
    ),
  ],
);
``` 
    
### Flutter Scrollbar 及 SingleChildScrollView 設定 controller
    
要令到 `Scrollbar` 及 `SingleChildScrollView` 可以運作正常,必需要設定好 controller 才行。設定的方法如下:

設先要係 class 入面整返個 `ScrollController` 先
    
```dart
final _pageScrollController = ScrollController();
```

之後係 `Scrollbar` 同埋 `SingleChildScrollView` 入面都設定返 controller。
    
```dart
Scrollbar(
  controller: _pageScrollController,
  child: SingleChildScrollView(
    controller: _pageScrollController,
    ...,
  ),
);
```
    
可以用以下方法直接 scroll 去最頭或者最尾。
    
```dart
// scroll to top
_pageScrollController.jumpTo(0);

// scroll to end
_pageScrollController.jumpTo(_pageScrollController.position.maxScrollExtent);
```
    
最後就可以係任何地方使用 `jump()` 方法去 Scroll 去頁面不同地方。
    
```dart
_pageScrollController.jumpTo(0);
```
    
    
過去文章
2025 (9)
4 (5)
3 (1)
2 (3)
2024 (25)
11 (3)
10 (3)
9 (1)
3 (18)
2022 (6)
10 (1)
6 (2)
5 (1)
3 (1)
1 (1)
2021 (21)
11 (7)
7 (1)
6 (2)
5 (2)
4 (6)
3 (2)
2 (1)
2020 (92)
12 (1)
11 (2)
10 (4)
9 (10)
8 (5)
7 (1)
6 (3)
5 (1)
4 (4)
3 (25)
2 (7)
1 (29)
2019 (57)
12 (25)
11 (7)
9 (25)