リバース・エンジニアリング

Flultterとテックブログと時々iOS

Flutter

61.【ナンバーズアプリ】ゲームロジックを組み立てる

ゲームロジックを組み立てる 今日はナンバーズアプリのゲームロジックを組み立てます。 【目次】 ゲームロジックを組み立てる 正解のロジック ゲームロジック 前回の記事はこちらになります。興味があったら読んでね。 blog.tamappe.com このゲームで作らな…

60.【ナンバーズアプリ】メインのゲーム画面のデザインGridViewで作る

【目次】 メインのゲーム画面のデザイン GridView で作る 番号のボタンを GridView で作る 盤面 GridView のソースコード ボタン NumberButton のソースコード カウント画面からゲームプレイ画面への画面遷移 作ったあとの感想 メインのゲーム画面のデザイン…

59.【ナンバーズアプリ】Flutter でカスタムフォントを使う方法

目次 Flutter でカスタムフォントを使う方法 フォントを指定して使う方法 カスタムフォントをダウンロードして使う方法 Flutter でカスタムフォントを使う方法 今回は Flutter でカスタムフォントを使う方法について紹介します。 Flutter は何もフォントを指…

58. Flutter で Cannot provide both a color and a decoration エラーが出てしまったら?

Flutter で Cannot provide both a color and a decoration エラー? どうやってwidgetに枠線+背景色をつけたら良いでしょうか。 Flutter で Cannot provide both a color and a decoration エラー? Flutter で書いている時に Cannot provide both a color …

57.【ナンバーズアプリ】Flutterでサークルプログレスバーにアニメーション処理を追加して動かしてみる

【目次】 Flutter でサークルプログレスバーにアニメーション処理を追加して動かしてみる ソースコード 円のクラス CircleProgress カウント画面 StartCountPage スタート画面 main.dart アニメーション処理の解説 Flutter でサークルプログレスバーにアニメ…

56.【ナンバーズアプリ】Flutter のアニメーション AnimationController の基礎を振り返る

目次 Flutter でアニメーションを実装できる AnimationController を説明してみる AnimationController とは AnimationController の基礎 mixin の適用 AnimationController を宣言する Listener を追加する forward() でアニメーションを開始させる 今回は …

55. CustomPainter を使ってサークルプログレスを作成する

CustomPainter を使ってサークルプログレスを作成する 今回は前回に学習した CustomPainter を使って実際にサークル状のプログレスの雛形を作成していきたいと思います。 blog.tamappe.com 作ったファイルは circle_progress.dart になります。 circle_progr…

54. 【ナンバーズアプリ】Flutter で CustomPainter を使って円を描く

CustomPainterの使い方 実際に円を描く 四角を描く場合 今日はペイント関連で好きな図形を描けるクラス CustomPainter について学習します。 api.flutter.dev CustomPainterの使い方 CustomPainter クラスを扱う場合は基本これを継承したサブクラスの中で実…

53. 【ナンバーズアプリ】Flutterでの画面遷移のやり方

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

52. FlutterでiOSアプリでアプリ名を変更する時にしてはいけないこと

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

51.【ナンバーズアプリ】デザイン案を発表

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

50. Flutterでダークモードを設定する

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

49. FlutterでTextの行数を指定する方法

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

48.【AppleMusicクローン】注目トラックのデザインを組み立てる

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

47. 初心者がFlutterでデザインするときに意識すべき3つのポイント

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

46.【AppleMusicクローン】トラック更新のデザインを組み立てる

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

45.【AppleMusicクローン】セクション2 のウィジェットを共通化する

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

43.【AppleMusicクローン】セクション2 のレイアウトをListView を使って実装する

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

42.【AppleMusicクローン】FlutterのPageViewを使って横スクロールのPageScrollを実現する

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

41.【AppleMusicクローン】Dartでのenumの使い方と具体例

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

40. FlutterでiOS風なUIScrollViewを使ったページングUIを実現する方法

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

39.【AppleMusicクローン】クラスの分離を行う

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

38.【AppleMusicクローン】SliverAppBarとSliverListでヘッダーの伸び縮みを再現する

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

37. Apple Music クローンアプリのデザイン案

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

36.【クイズアプリ開発】復習するときの目次

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

35.【クイズアプリ開発】正解したときの処理と正答数の反映

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

34.【クイズアプリ開発】リセット画面のデザインを整える

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

33.【クイズアプリ開発】リセット画面で学ぶColumnのmainAxisAlignmentについて

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

28.【クイズアプリ開発】定数クラスの作成とウィジェットの共通化

今回は前回作成したクイズアプリのレイアウトのリファクタリングを行います。 blog.tamappe.com 前回はレイアウトの組立自体は完了しましたがwidgetのインデントが深くなりすぎていました。 Flutter開発の肝はwidgetのインデントはなるべく深くならないよう…

27. Flutter開発の逆引き用目次

Flutterをインストールして最初に行うこと Textの使い方 blog.tamappe.com blog.tamappe.com ウィジェットのStateクラス blog.tamappe.com ボタンウィジェットの実装について blog.tamappe.com レイアウトの組み立て方 blog.tamappe.com blog.tamappe.com bl…