【Flutter】flutter-study.devのFlight Bookingをつくってみた

今回は以下のサイトのFlight Bookingというものをつくってみた。

www.flutter-study.dev

 

内容として

・アイコン等を回転させて表示する方法
・複雑な形をしたボーダーを実装する方法(結局ちゃんと理解できませんでした)

が学べる物になっている。

 

Flutter歴1ヶ月程度の自分にとっては、複雑な形をしたボーダーを実装する部分のコードが少し難しかったため、もう少し勉強を重ねてからリベンジしてみようと思う。

 

【画面】

f:id:moun45:20220323175211p:plain

 

【Flutter】flutter-study.devのBattery Optimizerをやってみた

今回は以下の記事のBattery Optimizerをやってみました。

www.flutter-study.dev

これは主に

・バッテリーレベルの円グラフをつくりかた
・色のグラデーションのやり方
・横スクロールのやり方

などを知ることができるようなものでした。

 

実際に進めてみると、特に詰まるところもなく、すんなりできました。

実際の画面とコードを載せておきます。

 

【完成画面】

f:id:moun45:20220323120408p:plain

 

【Flutter】【Dart】ピリオド2つの記述の意味とは?

Flutter開発としてDartでプログラムを書いていると、以下のようなコードを見た。

final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 4;

 

このピリオド2つの書き方が意味わからなかったので簡単に調べてみた。

qiita.com

この記事をみるとすごくわかりやすく、

ダブルドットはDart特有のカスケード記法というものらしい。

カスケード記法とは同一オブジェクトに対して繰返し記述を行う場合には、ダブルドットで簡易的に記述することができるものらしい。

【Flutter】lerpとは?線形補間の方法について簡単に調べてみた

Flutterで以下の「Battery Optimizer」というアプリを開発していた時のこと

www.flutter-study.dev

 

インジケーターと呼ばれるバッテリーの残量を円を使って表示する部分を作っていた時、以下の記述で「lerp」というのが何をするのかわからなかったので調べてみた。

//割合(0~1.0)からグラデーション色に変換
final color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;

 

【leapとは】

単語的には「Linear interpolation」とのことで線形補間という意味を指す。

 

【使い方や意味】

lerpは通常3つの引数を取るようになっているそうです。

lerp(start, end, t);

これはstartからendを使用して線形補間をしており、tで取得する値を決めています。

t=0でstart、t=1でendを選択し、t=0.5だとstartとendの中間を取得します。

 

ここで上記のソースコードを見てみると

inal color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;

lerpの引数は1つしか取っていません。ColorTweenの中にbeginとendを書いているためです。

したがってperという変数の値によってbeginとendで設定した色をグラデーションのように変化していくという記述となっています。

【Flutter】Cardにelevationで影をつける

Flutterを書いていると、Cardを使う場面が出てくることと思います。

そこでCard内に'elevation'という設定をみたことはないでしょうか?

 

実はこの'elevation'という設定はCardに影をつけることができます。(CardだけでなくAppbarもできるらしい)

f:id:moun45:20220322104510p:plain

Card(
elevation: 8,
child: Container(
width: 120,
height: 100,
),
),

 

以上がelevationについての説明となります。

これをやるとやらないでUIのオシャレ度が変わってくるので、余裕があればぜひ試してみましょう。

【Flutter】flutter-stydy.devのAdmin Mobileをやってみた

今回はflutter-study.devのAdmin Mobileというものを作成してみました。以下の記事のものです。

www.flutter-study.dev

 

基本的には書いてある通りですが、1点つまったところがあったので書いておきます。

 

詰まったところは以下の部分です。

const  _Postのところでkeyを使ってコンストラクタに渡しているのですが、デフォルトで値がnullになっているのにnullを渡そうとしてエラーが出てしまいます。

したがってkeyをoptional型で宣言する必要があります。

class _Post extends StatelessWidget {
  final String name;
  final String message;
  final String textReason;
  final Color colorPrimary;
  final Color colorPositive;
  final String textPositive;
  final Color colorNegative;
  final String textNegative;

  const _Post({
    Key key,
     this.name,
     this.message,
     this.textReason,
     this.colorPrimary,
     this.colorPositive,
     this.textPositive,
     this.colorNegative,
     this.textNegative,
  }) : super(key: key);

〜以下省略〜
}


エラーの内容と簡単な解決方法は以下の記事にまとめてあるのでみてみてください。

moun45.hatenablog.com

 

 

【完成画面のスクリーンショット

f:id:moun45:20220322130744p:plain

 

【Flutter】エラーコード:The parameter 'key' can't have a value of 'null' because of its type, but the implicit default value is 'null'.の解決方法

Flutterで以下のようなKeyを使ったコードを書いていた時、

const _Post({
Key key,
@required this.name,
}) : super(key: key);

 

keyの部分で以下のエラーコードが出てきた。

「The parameter 'key' can't have a value of 'null' because of its type, but the implicit default value is 'null'.」

日本語訳では

「パラメータ 'key' はその型のために 'null' という値を持つことができませんが、暗黙のデフォルト値は 'null' です。」

ということらしい。

 

nullを持つことができないためにエラーが出力されているので、パラメータ'key'においてnullを持つことができる状態にしてあげることで解決する。(違ってたらすみません)

そこで使用するのがoptional型というもの。

このoptional型とは

「通常の変数と異なり、空の値(値が無い)状態を保持することができる変数」

らしい。

 

そこでoptional型の宣言方法を調べると、"?"をつけるだけで良いらしい。

詳しい内容はこの記事を読むと良いかもしれない。↓

Flutter2のDart Null Safetyを既存のプロジェクトに導入する | ZUMA Lab

 

以上のことから、エラーコードを修正するには?をつけて宣言することで解決することができるということがわかった。

const _Post({
Key? key,
@required this.name,
}) : super(key: key);