普段Dart を書いていて個人的に便利だな〜と思ったWidget や書き方を紹介したいと思います。
また今後便利だなと思ったものは随時追加していきます。
ColoredBox
色をつけたい場合に使用できます。
Containerを使うと色をつけることはできますが、ColoredBoxは色をつけることだけができるWidgetなので役割としても伝わりやすいですし、コードの意味を受け取りやくすなると思います。
Widget build(BuildContext context) {
return ColoredBox(
color: Colors.black87,
child: ...,
);
}
LicensePage
ライセンス表記に使用できるWidget です。
@override
Widget build(BuildContext context) {
return LicensePage();
}
LicensePage を使うと下記のようなページを作成することができます。
ライセンス情報を取得するスクリプトを書いたりすることなくライセンスの表示が可能になっています。
Collection if
条件によってWidget を出し分ける際に三項演算子を使ってWidgetの出し分けをすることがあると思いますが、ifを使ったほうが簡潔に少ない記述量で書くことができます。
三項演算子の場合
Widget build(BuildContext context) {
return Column(
children: [
context.watch<PageState>.isLoading
? const SizedBox.shrink()
: const UserName(),
],
);
}
Collection If を使用した場合
Widget build(BuildContext context) {
return Column(
children: [
if (context.watch<PageState>.isLoading)
const UserName(),
],
);
}
if を使用した記述ができない場合はDartSDKのバージョンを確認してください。
2.6以上のバージョンが必須です
Collection for
いままで map((item) => ....).toList(), で書いていたコードは下記のように書き換えることができます。
Widget build(BuildContext context) {
return Column(
children: [
for (var item in context.watch<PageState>().items)
ListTile(
title: Text(item.title),
onPress: () {
},
),
],
);
}
for を使用した記述ができない場合はDartSDKのバージョンを確認してください。
2.6以上のバージョンが必須です
下記のような書き方もできます。
しかし条件が複雑になると可読性が悪くなるので、where で書けるならwhere で書くことをおすすめします。
Widget build(BuildContext context) {
return Column(
children: [
for (var item in context.watch<PageState>().items)
if (item.complete)
ListTile(
title: Text(item.title),
onPress: () {
},
),
],
);
}
extensions
extensions method を使うと既存のクラスにメソッドを追加することができます。
Duration で時間を指定する場合下記のようにextensions を用意しておくと、
extension DurationExts on int {
Duration get toSeconds => Duration(seconds: this);
Duration get toMilliseconds => Duration(milliseconds: this);
}
ディレイさせる秒数やAPI通信のタイムアウトの秒数などを下記のように書くことができます。
Future.delayed(2.toSeconds, () => {});
extensions の使いすぎると何をしているのかわかりにくくなるので用法・用量を守って正しく使いましょう！