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

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

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

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

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

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

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

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 …

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

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

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

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

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

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

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

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

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

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

今回は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で実現するにはどうすればいいか。 結論から…

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