Closed2023/08/08にクローズ4

【Flutter学習ログ】Nomad Coders の Code Challenge を通して Flutter/Dart の知識を深める！

Eunsol

Nomad Coders とは

様々なプログラミング言語やフレームワークを学ぶことができるサービスです。

https://nomadcoders.co/challenges

Code Challenge とは

2週間のサイクルで新しいモバイルアプリを作成します。
毎日課題が与えられ、その課題を実装し、提出します。
提出したものは、講師の方にレビューして頂きます。
- レビューの内容は、作成したモバイルアプリのレイアウトに対してレビューが行われます。ソースコードに対するレビューは行われません。
2回以上の欠席をしてしまうと卒業することができません。

Eunsol

UI Clone Challenge

【課題の内容】Schedule App UI

講師の方から課題のデザインを共有していただき、そのデザインを元にモバイルアプリのレイアウトを構築しました。

学んだこと

Widget の使い方に習熟することができました。特に Text Widget については文字列の改行の方法を学び、Container Widget についてはデザインレイアウトの実装方法を学びました。

感想

UI Clone Challenge は、API連携などのロジックの実装がなく、単にレイアウトを構築するのみだったため、それほど難しく感じませんでした。
Flutter のレイアウトは、Flutter のドキュメントが充実しており、Google 上で検索すると情報が多かったため、実装しやすいと感じました。

Eunsol

Building App Challenge

【課題の内容】Pomodoro App

講師の方の実装例を元に一度 Pomodoro App を作成し、Google Play にリリースを行いました。
次に、異なる仕様の Pomodoro App を作成し、講師の方にレビューを行っていただきました。
- 仕様の違いとして、レイアウトが全く異なること、Pomodoro の25分が終わり次第、5分間の休憩に自動的に入る仕様が追加されていること、25分の時間を別の時間に変更できる仕様が加わっていることです。

学んだこと

ポモドーロタイマーの「分」と「秒」は Container を分けて表示しているですが、以下のように substring() にて文字列の一部を抜き出す実装方法を学びました。

// ポモドーロタイマーの「分」の数字文字列を返却
String formatTimerForMinute(int seconds) {
  var duration = Duration(seconds: seconds);
  // print(duration) => 0:25:00.000000
  return duration.toString().split('.').first.substring(2, 4);
}

// ポモドーロタイマーの「秒」の数字文字列を返却
String formatTimerForSecond(int seconds) {
  var duration = Duration(seconds: seconds);
  // print(duration) => 0:25:00.000000
  return duration.toString().split('.').first.substring(5, 7);
}

SingleChildScrollView を使用する横スクロールが可能なレイアウトの実装方法を学びました。ポモドーロタイマーの時間を変更する選択肢（15, 20, 25, 30, 35 など）を横長く表示するデザインだったのですが、横スクロールを可能にすることで、横長で一つの画面に収まらない要素も画面上に表示できるようになりました。ちなみに、縦にスクロールしたい場合は Axis.vertical にすることで可能です。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: 
// 省略

4回のポモドーロを1回の Goal として数えているのですが、Dart の演算記号 % を使うことで簡単に計算できることを学びました。

// ポモドーロの数が4の倍数の数字になると、Goalの数が増える仕様
if (totalPomodoros % 4 == 0) {
  totalGoals = totalGoals + 1;
}

感想

現状、App Store へのリリースは「Guideline 4.3 - Design」を満たしておらず、審査時に reject されているため、アプリを作り直し再提出が必要な状態です。審査通過のためにはUIの改善または機能の追加が必要ですが、今回の Code Challenge にて学んだポモドーロタイマーの「分」と「秒」を二つの Container に分ける変更をUIの改善策として活用しようと思っています。
また、機能の追加として、現在のリセットボタンは、リセットを押下するとポモドーロタイマーの秒数とポモドーロ数が同時にリセットされる挙動となっていますが、それらを二つの機能に分けることでユーザーの利便性を向上したいと思います。

参考情報

Eunsol

Building App Challenge(最終課題)

【課題内容】Movie App

Flutter 上から API（映画情報取得一覧画面用API、詳細画面用API、映画ポスター用APIの3つ）を実行し、人気のある映画一覧、現在上映中の映画一覧、リリース予定の映画一覧を画面上に描画しました。
映画一覧画面のポスター要素を押下すると映画詳細画面に遷移する仕様です。

学んだこと

Flutter の API 連携の実装について知識を深めることができました。
- API レスポンスの型を制御する Model class を定義し、第三者が読んでも API レスポンスを把握しやすくなり、さらにAPIレスポンスを扱いやすくなると考えました。models ディレクトリを新規作成し、対象の Model class の dart ファイルを配置するように設計しました。
- List に入れた API レスポンスの値を ListView class を用いて画面に表示する方法を学びました。

感想

映画の詳細情報を表示する実装が難しく、想定以上の時間がかかりましたが、調べながら独力で実装することで自分のスキル向上につながったと思います。
Flutter には様々な Package が用意されており、それらを上手く使用することで、より良い Widget の実装ができる点が Flutter の良い所だと感じました。

参考情報

このスクラップは2023/08/08にクローズされました