Flutterでの画面遷移の実装方法について。 MaterialAppにinitialRouteとroutesのプロパティがあるのでそれらを使うと画面遷移を作れます。 initialRoute routes まるでWebでいうところのルーティング処理ですね。 initialRouteには初期表示時の画面のパスを…

Flutter開発している時にiOSアプリを実機にインストールするついでにアプリ名も変更したら Android Studio の方でiOS シミュレータがビルドできなくなりました。 エラー内容は Could not find the built application bundle at build/ios/iphonesimulator/Ru…

GWが終わりましたので、ブログのメインテーマに戻って本格的に Flutter アプリ開発の続きを開始します。 4月までで Flutter の基礎やデモアプリ開発を進めてきました。 AppleMusic で残っていた最後のセクションは、過去に作ったクラスを利用すれば実現でき…

楽天モバイルUN-LIMITとは eSIMとは 楽天UN-LIMIT 今日はiPhoneSE2用の保護フィルムが自宅に届きましたのでこの保護フィルムの貼り付け作業をしていました。 本当はサクッと終わらす予定だったのですが、ガラスフィルムだったみたいでシール派の僕は幻滅して…

iPhone下取りのやり方についてまとめてみる オンライン下取りのやり方 (Apple Trade In) 手順1. iPhone の購入時に下取りの設定を行う 手順2. メールにて本人確認を行い下取りキットを発送してもらう 手順3. 下取りiPhone の発送準備をする iPhone下取りのや…

この記事の対象ユーザー 格安SIMに乗り換える前の不安 格安SIM乗り換えへの具体的な手順 手順1. 乗り変えの予約番号となる"MNP予約番号"を貰う (1時間ぐらい) 手順2. 格安SIMカードの契約をする (10分) 手順3. SIMの設定をする (30分 ~ 1時間くらい) SIMを乗…

Flutte でiOSのダークモードを設定するする方法が分からなかったので備忘録として残しておきます。 尚、iOのシミュレータで試したい場合は設定アプリ上から 「Developer」 < 「Dark Appearance」 でスイッチを切り替えを行うと変わります。 設定アプリ デフ…

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 今回はこのまま次の行の横スクロールを実装していくと メ…

今回からApple Musicの真ん中のタブに存在する「見つける」の画面を実装していきます。 このヘッダーの部分の実装 今回、使うウィジェットは SliverAppBar SliverFixedExtentList ScrollController この3つがメインになります。 Slivers について SliverAppB…

これから作成するしばらく開発するアプリのデザイン デザイン↓ Apple Music 企画倒れにならないように頑張らなくちゃ！

これまでクイズアプリ開発をしてきましたので、わかりやすいように目次のページを作りました。 Flutterで4択クイズアプリのレイアウトを実装する tamappe.hatenadiary.com 定数クラスの作成とウィジェットの共通化 tamappe.hatenadiary.com 選択肢のボタンを…

長かったクイズアプリの開発も本日でラストになります。 前回分はこちらです。 tamappe.hatenadiary.com 本日は問題の選択肢で正解を当てた時の処理を書いていきます。 ラストにクイズアプリ開発で書いたクラスファイルのソースコードを載せようと思います。…

本日はクイズアプリ開発の終盤、リセット画面のデザインを作っていきます。 前回分はこちらです。 tamappe.hatenadiary.com デザイン案として次のようなレイアウトを想定しています。 なお、AppBarの背景色は未着手です。 ソースコード 本当は過程を解説する…

1週間ぶりぐらいですが、クイズアプリのリセット画面でウィジェットの配置で苦戦しました。 前回分の記事はこちらです。 tamappe.hatenadiary.com Columnウィジェットで並べていましたので、mainAxisAlignmentを使えば中央寄せにできるかなと思ったのですが …

クロスプラットフォーム開発は初めてなので、どうやって端末の判別を行うのかを調べました。 Flutterではdart:ioをimport しないと駄目みたいです。 import 'dart:io'; 判別法 bool isIOS = Platform.isIOS; if (isIOS) { /// iOS } if (Platform.isAndroid)…

今回はFlutterでの画面の向きの制御について学習します。 画面を縦方向(Portrait)にのみ固定する サンプルコードです。 SystemChrome.setPreferredOrientations(List<DeviceOrientation> orientations)を使えばいいだけです。 と思ったらFlutter SDKのバージョンによって書き方</deviceorientation>…

前回のあらすじ tamappe.hatenadiary.com tamappe.hatenadiary.com tamappe.hatenadiary.com 今回はFlutterで4択クイズが終わったあとのリセット画面を実装したいと思います。 リセット画面 Sketchでデザインしました。 とりあえず、 正答数 リセットボタン …