株式会社ゆめみ Flutter エンジニアコードチェック課題
課題概要
制作物詳細
概要
実装内容
- お題である「GitHub リポジトリ検索アプリ」を Flutter で実装
- 検索ワードを入力し、github 上のリポジトリを検索し、検索結果をリスト表示
- リストアイテムをタップすると、リポジトリの詳細画面に遷移し、リポジトリの詳細情報を表示
- ダークモード対応
- 日本語・英語の多言語対応
- 画面回転に対応
- アプリアイコンの作成と設定に対応
実装期間
2024/05/02 ~ 2024/05/08
スクリーンショット・デモ動画
iOS
| テーマ | 検索画面 | リポジトリ詳細 |
|---|---|---|
| ライト | ||
| ダーク |
Android
| テーマ | 検索画面 | リポジトリ詳細 |
|---|---|---|
| ライト | ||
| ダーク |
デモ動画
- iOS
https://github.com/you22fy/yumemi_flutter/assets/93398385/461f6b68-8d47-41e9-b378-ea5a6134ef77
- Android
https://github.com/you22fy/yumemi_flutter/assets/93398385/54c82cd8-d960-4959-bd4c-3fbf6445b71c
実行方法
当プロジェクトは iOS, android のみに対応しています。
- 当リポジトリを clone
git clone https://github.com/you22fy/yumemi_flutter.git- プロジェクトディレクトリに移動
cd yumemi_flutter- fvm で指定のバージョンをインストール
当プロジェクトでは flutter
3.19.5を使用しています。fvm を使用しない場合は、バージョン3.19.5が動作するようにしてください。
fvm install- パッケージをインストール
fvm flutter pub get- 多言語対応のためのコード生成
fvm flutter gen-l10- アプリを起動
fvm flutter run使用ツール
開発環境
- macOS Sonoma 14.4.1
- Visual Studio Code 1.88.1
- Xcode Version 15.3 (15E204a)
使用言語/フレームワーク
- Flutter 3.19.5
- Dart 3.3.3
パッケージ
| 使用したパッケージは以下の通りです。 | パッケージ名 | 用途 |
|---|---|---|
| flutter_riverpod | 状態管理 | |
| flutter_hooks | 狭い範囲での状態管理 | |
| hooks_riverpod | riverpod と hooks を併用するためのパッケージ | |
| go_router | ルーティング | |
| dio | HTTP 通信 | |
| infinite_scroll_pagination | 無限スクロール | |
| flutter_launcher_icons | アプリアイコンの設定 | |
| github_language_colors | GitHub の言語カラーを取得 | |
| intl | 多言語対応で使用 | |
| shared_preferences | 選択言語の保存で使用 | |
| flutter_localizations | 多言語対応で使用 |
その他ツール
- figma(ロゴ作成)
- FigJam ボード(作業の流れ整理)
- Git/GitHub(バージョン管理)
- GitHub Actions(静的解析, 自動ビルド)
AI ツール
- chatGPT (コーディングの質問・リファクタリング)
- CodeRabbit(PullRequest のレビュー)
- GitHub Copilot(コーディング補助)
ディレクトリ構成
lib 配下のディレクトリ構成は以下の通りです。
| ディレクトリ名 | 用途 |
|---|---|
| components | UI コンポーネントを格納するディレクトリ |
| l10n | 多言語対応のためのディレクトリ |
| models | データのモデルクラスを格納するディレクトリ |
| pages | page を格納するディレクトリ.1 つの page に対して 1 つのディレクトリを作成する. |
| providers | アプリ全体で参照したい状態を提供する provider を格納 |
| repositories | API 通信を行うリポジトリクラスを格納するディレクトリ |
| utils | アプリ全体で使用する class や関数を格納するディレクトリ |
今回できなかったこと
- test の実装
- 今回は時間がなかったため、テストの実装ができませんでした。
- GitHub の活用
- GitHub の issue・project などを利用はしましたが、効果的には活用できていないと感じています。