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

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

Dart

65. FlutterでListの要素をランダムにシャッフルするには

開発しているアプリでListの要素をランダムシャッフルして格納し直す必要が出てきたので ランダムにシャッフル出来ないのかを調べてみました。 List _shuffle(List items) { var random = new Random(); for (var i = items.length - 1; i > 0; i--) { var n…

64. FlutterのProviderパターンを3分で理解する

FlutterのProviderパターンを3分で理解する Flutter 初心者にとって Provider の扱いはとても難しく思うはず。 僕も例外なく Flutter 学習初めの頃は Provider を見てもあまり魅力を感じなかった。 今回はその Provider について理解できるようにすることが…

63. Flutterでボタンにアニメーションを追加する

ボタンにアニメーションを追加する 本当はボタンに1回転のアニメーションを入れたかったのですが、Animation の回転が思わぬ位置に止まったので諦めました。 なので前回紹介したフリップのアニメーションを使ってボタンにアニメーションをかけます。 前回の…

62. Flutterライブラリflip_cardでフリップアニメーションを作ってみる

フリップアニメーションを簡単に作れる flip_card を使ってみる 今作っているナンバーズアプリでカードにアニメーションを入れたいのでアニメーションの入れ方を調査しました。 調査しているうちにシンプルなパッケージがありましたので簡単に紹介してみます…

61. FlutterのsetStateでゲームロジックを組み立てる

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

60. Flutterの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() でアニメーションを開始させる 今回は …

54. Flutter で CustomPainter を使って円を描く

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

53. FlutterのinitialRouteで画面遷移をさせてみる

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

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アプリでいえ…

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

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

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

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

44. FlutterのenumでIntかStringのvalueを返す

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

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を使えば中央寄せにできるかなと思ったのですが 一発で…