mobile's People
mobile's Issues
共通コンポーネントの実装
TODO
- ボタン
- primary, seconday
-
テキスト (この辺はライブラリあるかも)
- variant: body1, body2, caption, header1, header2
-
通知
どこからでも通知出せるようにしておきたい。- rootに通知を出すためのblocを注入する
- snackbarを使う
- もしくはこのへん https://medium.com/flutter-community/in-app-notifications-in-flutter-9c1e92ea10b3
PinEditPageの実装
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- back button -> pop
- button -> callback
SelectPhotoPageの実装
pin_select_photo_screenに対応
アプリのたたき台作成
TODO
- flutter createでプロジェクトを作る
- BloCライブラリなど、絶対使うライブラリのインストール
新規ボード作成画面の作り込み
TODO
- ボード名を入力できる
- ボード名が空の時、作成ボタンを押せない
- 公開/非公開のtoggle switchがある
デザインシステムっぽいやつ
角丸意識しましたとか!
各ページウィジェットの作成
中身は空 or 共通のモック用ウィジェットコンポーネント
Navigationに各ウィジェットを登録
各スクリーンのパス名を定数化する
TODO
- 現状直書きで
.push('/new/board')
というようになっているので定数化する
定数化の方法はこのいずれかあたりだと思う
- 各スクリーンのwidgetにstaticで宣言する
routes.dart
などを作成して、constで宣言する
ホーム画面でピンを食い違いに表示できる
flutter_staggered_grid_viewを使う。
このあたりを参考に
[Android]遷移を左から右にアニメーションさせる
ios同様遷移時に左から右にアニメーションさせるようにした。
Android使ったことないけど、デザイン規則的にokなのかしら?
ダークモード対応
本家のPinterestはダークモードに対応している!
CreatePinOrBoardPageの実装s
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- pin button -> SelectPhotoPage
- board button -> BoardEditPage
/user APIの実装
PinPageの実装
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- back button -> pop
- save button -> SelectBoardPage (Modal)
[Settings] Implement a list view of settings
/pin APIの実装
モデル定義
modelsを定義。
スプレッドシートを参考に。
https://docs.google.com/spreadsheets/d/1D58uLI8kmZRYgq4g5_YgvNIgxZ1ll16bPxgDsOHQnYA/edit?usp=sharing
- User
- Pin
- Board
- ...
[My Page]
[Create Pin] Implement a page to select a board to upload the pin
View
- list of board
Actions
- submit
- page back
- create a new board
/board APIの実装
アカウントページからpin or boardの作成を選ぶところまでの実装
TODO
- アカウントページにfloating action buttonを追加
- FABをタップでpin or boardの画面に遷移
- 画面は戻ることができる
multipart リクエストをできるようにする
multipart/form なリクエストが上手く送れていないらしくエラーになってしまうため一旦実装を飛ばします。
ピンの作成機能に必要なので、その時に再び実装する予定です。
エラー内容
{
"type": "https://stoplight.io/prism/errors#UNPROCESSABLE_ENTITY",
"title": "Invalid request body payload",
"status": 422,
"detail": "Your request is not valid and no HTTP validation response was found in the spec, so Prism is generating this error for you.",
"validation": [
{
"location": [
"body"
],
"severity": "Error",
"code": "type",
"message": "should be object"
}
]
}
試したコード
api_client.dart
Future<StreamedResponse> fileUpload(
String relativeUrl, {
Map<String, String> fields,
List<int> fileBytes,
}) async {
// Reference: https://pub.dev/documentation/http/latest/http/MultipartRequest-class.html
final uri = Uri.parse('$apiEndpoint$relativeUrl');
final request = MultipartRequest('POST', uri);
request.fields.addAll(fields);
request.files.add(await MultipartFile.fromBytes('image', fileBytes));
request.headers.addAll(await _headers);
final response = await request.send();
if (response.statusCode >= 400) {
throw _handleError(
response.statusCode,
await response.stream.bytesToString(),
response.request?.url?.toString());
}
return response;
}
参考
https://pub.dev/documentation/http/latest/http/MultipartRequest-class.html
[Settings] Implement a page to setting user profile
Entities
- username
- thumbnail
RootScreenの作成
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- Scaffold
- BottomNavigationBar
[My Page] Implement search of pin included in my boards
pins grid viewのtile高さをchildの高さにする
StaggeredGridViewを導入したものの、Tileそれぞれに対して、縦横比を設定しないといけないようす
tileとする子コンポーネントを先に描画して比率を計算し、再度描画する?など対策を考える必要あり。
ーこれまでにやったことー
想定より時間がかかりそうなので、StaggeredGridViewは使用したまま縦横比を固定として残している
BottomNavigationBarを追加して、ホーム画面とアカウント画面だけを遷移できるようにする
[Create Pin/Board] Implement a dialog for choosing pin or board
MyPageの実装
- ユーザの情報の表示
- boardの取得、一覧表示
これに伴い、
- repositoryの実装
- bloc周辺の実装
[Create Pin] Implement a page to input a pin entities
Entities
- title
- description
- website url
Actions
- submit
- page back
共通のボタンwidgetの作成
TODO
- 丸みのあるボタンを作れる
- primary, secondaryのボタンを作れる
widgetの表示確認用スクリーンの作成
[My Page] Implement a list view of my board
View components
- Thumbnails container
- name
- number of pins included in the board
- updated time
SelectBoardPageの実装
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- back -> pop
- button -> callback
- button -> BoardEditPageの実装
[Create Board] Implement a form
form entities
- board name
- group board member (bonus)
- private toggle
actions
- create board
- cancel, page back
ピン詳細のアクションwidgetの作成
ホーム画面でピンの一覧を表示できる
TODO
- Pin API
GET /home
を叩ける - Pins repositoryの実装
- PinをGrid Viewで表示 (widgetは #11 で作ったものを使う)
- Pinの2カラムでのグリッド表示は別画面でも使いそうなのでwidgetに切り出しておきたい
- ホーム画面に表示されているピンをタップすると、ピンの詳細画面に遷移できる
[Create Pin] Implement a page to select a photo from mobile photo library
Actions
- page back
- select
ピンwidgetの実装
HomePageの作成
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- temp button -> pin page
ピンの詳細画面でPinを保存できる
TODO
- 保存ボタンを押す
- ボード一覧画面に遷移する
- ボードを選択すると、ボードにピンが追加される
APIクライアントのベース実装
summaristで使ったapiクライアントを入れます
Themeカラーの定義
accentColorやtextColorなどをAppColorsクラスなどに定義しておく。
BoardEditPageの実装
細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する
- back button -> pop
- button -> callback
遷移まわりの調査
TODO
- 特にcreate系の画面でsubrouting?っぽいのが発生するので、その場合スタックを汚さずに遷移する方法を調査する
- 画面遷移時のargumentsを整理する
// Pin
'/pin/detail': (context) => PinDetailScreen(),
'/pin/edit': (context) => PinEditScreen(),
// Board
'/board/edit': (context) => BoardEditScreen(),
'/board/detail': (context) => BoardDetailScreen(),
// Create new pin/board
'/new': (context) => CreateNewScreen(),
'/new/board': (context) => NewBoardScreen(),
'/new/pin/select-photo': (context) => PinSelectPhotoScreen(),
'/new/pin/edit': (context) => PinEditScreen(),
'/new/pin/select-board': (context) => SelectBoardScreen(),
テスト用にGitHub ActionsでCIを入れる
テストコードが入り始めたらやる
ピンの詳細画面の実装
ユーザー情報widgetの実装
BoardPageの実装
lintツール(静的解析ツール)入れる
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.