Flutter プログラミング

FlutterでTwitterクライアント作成⑥タイムラインの各種ボタンを追加する




前回の続き。

FlutterでTwitterクライアント作成⑤カスタムウィジェットでListTileっぽく

前回の続き。 今回は結構な大改造になりました。 いろいろ手探りでやってるので仕方なし。 目次1 カスタムウィジェットを作成する1.1 custom_card.dartを作成する1.1.1 実際に叩かれ ...

続きを見る

コードを読み直してたら、クソ実装というか謎実装してることに気づいたので直しました。
なんでその実装にしようとしたのか全く思い出せない。
過去の自分は別の人。

CustomCard().createCardに渡すデータ形式の変更

渡すデータが増えてきたのと、何やら扱いにくい実装になってたので修正します。

_tweetsをListに変更する

元の作りがこう。

で、これを使う時はこう。

なんでこんなアホな作りしてんだよ!!

って自分でツッコミました。
超無駄。

ということで、リストの1要素にtweetの情報が全部入ってる状態に修正します。

_tweetsを使うところも修正。
_tweetsの1要素を渡すだけなのでかなりスッキリしました。

さらにさらに、呼び出されるcreateCardも引数をMapに変更。
_BaseCardには渡されたMapをそのまま渡すだけにします。

_BaseCard側もMapを受け取るようにして

実際に使う時はKeyを指定して使います。

Header部分を修正する

Headerと言ってるのはこの部分。
今はscreenNameしか表示してないので、name(id部分)、投稿時間、アローボタンを追加します。

 

Header用ウィジェットを作成する

_BaseCardの中に直接書くと可読性が落ちるので外に切り出します。

_Headerクラスの作成

_Headerクラスを作って_tweetDataをもらうようにします。

構造はこんな感じ。
screenNameが一番優先されるみたいなので、screenNameのみFlexibleで囲んでます。

_Headerの呼び出し

_BaseCardのbuildで_Headerを呼び出します。
Containerでくるんでわかりやすく色を付けました。
同じようにTextもContainerで色付け。

_tweetsに情報を追加する

新しくname、timeTextという値を使うようにしたので、これらをAPIから取得します。
_timeTextは投稿時間によって1分とか1日とかの表示にしたいので、別クラスを作って処理します。

ConvertTextクラスを作成する

utilというフォルダを作って、その下にconvert_text.dartを作りました。

flutter_localizationsの追加

intl.dartはflutter_localizationsに含まれてます。
pubspec.yamlに2行追加します。

時間のparse

Twitterのcreated_atを見ると、こんな文字列が入ってます。

こいつをpurseしてDateTimeに変換します。

+0000の部分はタイムゾーンを表すそうで。
これだとUTCですね。
リファレンスを読んだらZZZZZでいいんじゃないの?と思ったんですがなぜかエラーに。
今回は端末の設定が日本語であっても全部UTCなので、そのまま+0000としてます。

日本時間に変換

ここちょっとよくわかってないんですが。

現在時刻の日本時間をとる場合は.toLocal()でできます。

でも、_createdAtは.toLocal()しても日本時間にならないんですよね。
しょうがないので、9時間足してやります。

時間の差分を取って表示するテキストを設定

DartはDateTimeを直接四則演算することができません。
今回のように時間の差分をとる場合はdifferenceを使います。

ここで注意すべきなのは、differenceに使うのは9時間足した_createdAtJstを使ってはいけないということ。
_createdAtJstを使うと、differenceの結果が9時間ずれてしまいます。

年、月などはローカライズするとき用のやり方がありますが、長くなりそうなので後日。

ここまでを保存するとこんな感じ。

Footerのボタンを追加する

ここで言っているFooterはこれ。
一番右側のツイートアクティビティを取得するAPIは非公開らしいので、今回は省略します。

Footer用ウィジェットを作成する

custom_card.dartに_FooterButtonsというクラスを追加しました。

ButtonBarにボタンを追加

ButtonBarはボタンを水平方向に並べるためのウィジェットです。
水平方向に余白がなければ縦に並べてくれるとか。

別にRowの中に並べてもいいんですが、せっかくなのでButtonBarを使ってみました。
でもlayoutBehaviorが効かなくてサイズの調整が全然うまくいかず。。。

とりあえずアイコンサイズをそれぞれ指定して、いいね数とリツイート数を表示できるようにTextも追加しました。
リプライ数を取得するAPIは非公開らしいです。

_tweetsに情報を追加する

いいね数とリツイート数をAPIから取得します。
_tweetsにfavoriteCountとretweetCountを追加します。

ここまでを保存するとこう。

GIGAZINEのtweetを公式で確認。
時間やいいねの数がちゃんと合ってます。

まだまだ足りないタイムライン

見た目はかなりそれっぽくなりましたが、まだ画像もリツイートも表示できません。
タイムラインってかなり作りこまれてるんですね。。。

公式とまったく同じものは作れない

リプライの数なんかがそうですが、APIが非公開になっている情報があります。

まぁ、全部公開しちゃったら公式アプリいらなくなっちゃうかもしれないですからねぇ。
画像についてはAPIで取得できるので、次回タイムラインに表示してみます。

と思ったけどいろいろ修正があったのでそっちを先に。

FlutterでTwitterクライアント作成⑦細かい修正いろいろ

前回の続き。 タイムラインに画像を表示する!! 予定でしたが、その前にいろいろと細かい修正が必要そうだったのでまとめて。 目次1 いいね・リツイートが0の時はラベルを空欄にする1.1 三項演算子を追加 ...

続きを見る

ここまでのコードはこちら。
※いいね数とリツイート数を逆にしてたので修正しました

-Flutter, プログラミング
-, ,

Copyright© そんなこと猫でもできる , 2020 All Rights Reserved Powered by AFFINGER5.