iOSでいうところのUILabelのnumberOfLines プロパティみたいな設定をFlutterではどうやって実現するかの話しです。 結論からいうとmaxLinesを使えばよい。 /// label の文字を3行まで表示できる label.numberOfLines = 3 /// あああああああああああああああ…

本日はAppleMusicクローンアプリの「注目トラック」のデザインについて見ていきます。 まずはデザインのレイアウトについておさらいします！ 注目トラックのデザイン 最初に見た感想としては、「もう無理だな、諦めるわ」ていうレベルです。iOSアプリでいえ…

今回はFlutterを使い立ての初心者がゼロから画面のデザインを実装していくときに 意識するべきポイントについて解説していきます。 これを理解しているのと理解していないのとでは Flutterでレイアウトを組む時の楽しさが変わってくると思ってます。 ただ完…

本日はApple Music クローンのセクション6のデザインを作っていきます。 とても簡単にできます。 トラック更新 ブログ執筆時点の今は実はセクション7まで仕上がっていますので今後それらをまとめていく予定です。 「トラック更新」のデザインは 「トラック更…

Flutter の勉強を始めてからおよそ4ヶ月経過しました。 4ヶ月ほどブログを投稿し続けて思ったことは、 自己投資としての情報発信は最も効率の良い学習法かもしれない ということである。 本日はその理由について考察していきます。 インプットしたことを情報…

Apple Music のクローンアプリを開発していて気づいたことがある。 前回はセクション2 のレイアウトを実装していて今回はセクション3 のレイアウトを実装するわけですが、 セクション2 section 2 セクション3 section 3 割とデザインが似ているわけである(笑…

とうとうiPhone SE の発売が発表されました。 このアフターコロナという不景気の時代にAppleはかなりコスパの良いスマホを投入してきました。 www.apple.com iPhone SE まずはそのラインナップをおさらいしたいと思います。 iPhone SE 2nd Generation の主な…

今回はDartのenum について深堀りしてみます。 enum 自体は以前に学習しましたが、value をカスタムにしたいと思い調べてみました。 以前の記事 tamappe.hatenadiary.com Swift でいうところの https://docs.swift.org/swift-book/LanguageGuide/Enumeration…

今回はセクション2の部分のレイアウトを作っていきます。 前回の記事はこちらになります。 tamappe.hatenadiary.com enum でいえば、 Relax に当たる箇所です。 enum Section { Top, Relax, ActivityMood, ShortMovie, Daily, Update, Attention, New, Now, …

キーワードは PageView です。 今回は AppleMusicクローン の最初のセクションを実装していきます。 最終的に出来上がるデザインはこちらになります。 FlutterによるPageViewによるページ単位での横スクロール pic.twitter.com/tL8iabDTTS— Tamappe@オンライ…

今回はAppleMusicクローンでコンテンツのセクション分けをすることにします。 前回の記事はこちらです。 tamappe.hatenadiary.com 「見つける」画面は縦長の画面でして、これをそのまま上から順番にウィジェットを乗せていくとウィジェットがごちゃごちゃし…

[XCODE] UIScrollViewを用いてページングUIを実現する方法 www.yoheim.net こちらの記事のFlutter版です。 今でこそSwift ではUIScrollViewにpagingEnabledのフラグをtrueにすれば実現できますが、 これをFlutterで実現するにはどうすればいいか。 結論から…

今日はただのポエムを書きました。 前置き 今の会社に転職してから1年が経ったので、この1年間について振り返ります。まさか1年前の自分が今リモートワークをしているなんて想像していなかったね。 本当は1年前の今頃「5年続けたフリーランスを辞めて Web 系…

前回のAppleMusicクローンアプリの続きです。 前回はmain.dartにレイアウトをただ並べて行きました。 その結果、一つのクラスでいろいろなクラスがごちゃまぜになりました。 tamappe.hatenadiary.com 今回はこのまま次の行の横スクロールを実装していくと メ…