Giter Site home page Giter Site logo

mobile's People

Contributors

dh9489 avatar maxfie1d avatar

Watchers

avatar avatar avatar

mobile's Issues

PinEditPageの実装

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • back button -> pop
  • button -> callback

アプリのたたき台作成

TODO

  • flutter createでプロジェクトを作る
  • BloCライブラリなど、絶対使うライブラリのインストール

各スクリーンのパス名を定数化する

TODO

  • 現状直書きで .push('/new/board') というようになっているので定数化する

定数化の方法はこのいずれかあたりだと思う

  • 各スクリーンのwidgetにstaticで宣言する
  • routes.dartなどを作成して、constで宣言する

CreatePinOrBoardPageの実装s

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • pin button -> SelectPhotoPage
  • board button -> BoardEditPage

PinPageの実装

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • back button -> pop
  • save button -> SelectBoardPage (Modal)

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

RootScreenの作成

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • Scaffold
  • BottomNavigationBar

pins grid viewのtile高さをchildの高さにする

StaggeredGridViewを導入したものの、Tileそれぞれに対して、縦横比を設定しないといけないようす
tileとする子コンポーネントを先に描画して比率を計算し、再度描画する？など対策を考える必要あり。

ーこれまでにやったことー
想定より時間がかかりそうなので、StaggeredGridViewは使用したまま縦横比を固定として残している

MyPageの実装

  • ユーザの情報の表示
  • boardの取得、一覧表示

これに伴い、

  • repositoryの実装
  • bloc周辺の実装

SelectBoardPageの実装

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • back -> pop
  • button -> callback
  • button -> BoardEditPageの実装

ホーム画面でピンの一覧を表示できる

TODO

  • Pin API GET /home を叩ける
  • Pins repositoryの実装
  • PinをGrid Viewで表示 (widgetは #11 で作ったものを使う)
    • Pinの2カラムでのグリッド表示は別画面でも使いそうなのでwidgetに切り出しておきたい
  • ホーム画面に表示されているピンをタップすると、ピンの詳細画面に遷移できる

HomePageの作成

細かいこんぽーねんとはなしで、画面遷移のみを目的として実装する

  • temp button -> pin page

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(),

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.