元記事：https://github.com/erluxman/awesomefluttertips
Flutterに関するtipsを1日ごとに紹介している英語ページです。
本記事ではtipsの1〜10までを翻訳しています。
1. stless & stful
stless and stfulと入力することで、Widgetをオートコンプリート補完することができます！
2. If Null Operator (??)
?? 演算子は値が null かどうかを確認します。
もし値が null でなければ値をそのまま返します。null だった場合は ?? 演算子以降に記述されている値を返します。return abc??10; //abcがnullであれば10を、そうでなければabcに代入されている値を返す
また、値がnullの場合に限り、代入演算子として使用することも可能です！！abc??=5 //abcがnullであれば5を代入する
test01dMethod() {
print("NullChecking in old way");
var abc;
if (abc == null)
print("It's null");
else
print(abc);
if (abc == null) abc = 5;
if (abc == null)
print("It's null");
else
print(abc);
}
testIfNullOperator() {
print("NullChecking with if Null Operator");
var abc;
print(abc ?? "It's null");
abc ??= 5;
print(abc ?? "It's null");
}
void main() {
test01dMethod();
testIfNullOperator();
}
実行結果
$ dart test.dart
NullChecking in old way
It’s null
5
NullChecking with if Null Operator
It’s null
5
3. 内部関数
ある関数の中に、別の関数を内包することができます。
こうすることで、外部と完全に切り離し、カプセル化することができます🙌
main() {
String getName() {
String getFirstName() {
return "Laxman";
}
String getLastName() {
return " Bhattarai";
}
return getFirstName() + getLastName();
}
print(getName());
}
実行結果
$ dart test.dart
Laxman Bhattarai
4. カスケード記法
カスケード記法(..)を使えば、 method() や getter()、 setter() を呼び出す際に、thisを使わずともメソッドやメンバーをチェインさせることができます🙋♂️
#通常の場合
class User {
String name;
int age;
User({this.name = "Foo", this.age = 0});
User withName(String name) {
this.name = name;
return this;
}
User withAge(int age) {
this.age = age;
return this;
}
void printId() => print("$name is $age years old.");
}
main() {
User().withAge(27).withName("Laxman").printId();
}
#カスケード記法を用いた場合
class User {
String name;
int age;
void printId() => print("$name is $age years old.");
}
main() {
User()
..age = 27
..name = "Laxman"
..printId();
}
5. データクラス
デフォルトのDartはデータクラス*をサポートしていませんが、プラグインをインストールすることで以下のようなメソッドを簡単に実装することができます。
copyWith()fromMap()toMap()Named ConstructortoString()hashCode()equals()
*データクラスとは、名前の通りデータ/オブジェクトを保持するための基本的なクラスです。JavaやKotlinではデフォルトでサポートされています。
プラグインの詳細はこちらから
For Android Studio
For VsCode
6. RichTextウィジェット
もし1つの文中で複数のスタイルを使用したい場合は、Textウィジェットを改造するのではなく、RichTextウィジェットとTextSpanウィジェットを使うことをオススメします🙂
Try on dartpad
See Youtube Demo
RichText(
text: TextSpan(
style: TextStyle(
fontSize: 30,
),
children: [
TextSpan(
text: "The Rich Text widget displays txt that uses multiple different styles.",
style: TextStyle(
color: Colors.green,
decoration: TextDecoration.underline,
),
),
TextSpan(
text: "The Text ",
style: TextStyle(
color: Colors.red,
),
),
TextSpan(
text: "to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. ",
style: TextStyle(
color: Colors.green,
),
),
],
),
)
7. スペーサーウィジェット
もしかして、レスポンシブなスペースを作成するために、Containerウィジェットに固定の幅・高さのパラメータを渡してますか？それ、画面サイズが変わると崩れるのでやめた方が良いですよ！！
そんなときは、Spacerウィジェットの出番ですね！ Container(width: x/ height: x)の代わりに Spacer(flex: x)を使ってみてください
このウィジェット無しじゃ、生きていけんわ😂
Try on dartpad
See Youtube Demo
8. ListView.separated()
もしかして、ListViewの区切り線を作るためにもContainerウィジェットを使ってませんか？
それもやめた方が良いですよ！
今まで使っていたListView.builderをListView.separatedに書き換えて見てください！
その中にseparatorBuilderを付け加えるだけで、区切り線が表示されますよ🙌
おまけ : 最後のアイテムの下には区切り線が表示されません。これで余計な心配事がさらに1つ減りますね🍾🎁🎊🎉
ListView.separated(
itemCount: 25,
separatorBuilder: (BuildContext context, int index) => Divider(
thickness: 1,
),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
'Index Number $index',
)
)
}
)
9. 引数に関数を渡す
引数に変数を渡すのと同じように、関数を渡すこともできます。
渡した関数を実行するためには、通常の関数呼び出しと同じように、末尾に()を付け、その中にパラメータを入力します
void main() {
f2(f1, 3);
f2(f1, 4);
f2(f1, 7);
}
f1(int evenOrOdd) {
print("$evenOrOdd is ${evenOrOdd % 2 == 0 ? 'Even' : 'Odd'} ");
}
f2(Function(int) evenOrOddFunction, int argumentToPass) {
evenOrOddFunction(argumentToPass);
}
実行結果
$ dart test.dart
3 is Odd
4 is Even
7 is Odd
10. 相対パスでパッケージをインポートするための”正しい”方法
パッケージインポートの”正しい”方法について悩んだことはありませんか？
絶対パスよりも、相対パスを使用することが好ましいです。
理由としては、以下の通りです
- コードが短く、読みやすい
- 自作パッケージなのか、サードパーティパッケージなのか区別しやすい
- 理にかなっている。そうでしょう？
