Flutter
【目次】 振り返り 1月に行ったこと 2月に行ったこと 3月に行ったこと 4月に行ったこと 5月に行ったこと 6月に行ったこと 全体の振り返り 振り返り こんばんは、Tamappeです。 もう7月も中盤に差し掛かっていますが、まだ2020年の前半を振り返っていませんで…
開発しているアプリでListの要素をランダムシャッフルして格納し直す必要が出てきたので ランダムにシャッフル出来ないのかを調べてみました。 List _shuffle(List items) { var random = new Random(); for (var i = items.length - 1; i > 0; i--) { var n…
前提 Flutter コマンドを叩ける状態にしておく コマンド Flutterパッケージのあるディレクトリで次のコマンドを叩く $ flutter channel master flutter をアップグレードします。 $ flutter upgrade Web サポートを有効にします。 $ flutter config --enable…
Flutter パッケージのダウンロードページ Flutter パッケージのダウンロードページ flutter.dev FlutterパッケージをDLしてパスを通す。 Flutter パッケージのあるディレクトリーで次のコマンドを叩く export PATH="$PATH:`pwd`/flutter/bin" これで flutter…
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 を使って実際にサークル状のプログレスの雛形を作成していきたいと思います。 tamappe.hatenadiary.com 作ったファイルは circle_progress.dart になります。 circl…
CustomPainterの使い方 実際に円を描く 四角を描く場合 今日はペイント関連で好きな図形を描けるクラス CustomPainter について学習します。 api.flutter.dev CustomPainterの使い方 CustomPainter クラスを扱う場合は基本これを継承したサブクラスの中で実…
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 で残っていた最後のセクションは、過去に作ったクラスを利用すれば実現でき…
Flutte でiOSのダークモードを設定するする方法が分からなかったので備忘録として残しておきます。 尚、iOのシミュレータで試したい場合は設定アプリ上から 「Developer」 < 「Dark Appearance」 でスイッチを切り替えを行うと変わります。 設定アプリ デフ…
iOSでいうところのUILabelのnumberOfLines プロパティみたいな設定をFlutterではどうやって実現するかの話しです。 結論からいうとmaxLinesを使えばよい。 /// label の文字を3行まで表示できる label.numberOfLines = 3 /// あああああああああああああああ…
本日はAppleMusicクローンアプリの「注目トラック」のデザインについて見ていきます。 まずはデザインのレイアウトについておさらいします！ 注目トラックのデザイン 最初に見た感想としては、「もう無理だな、諦めるわ」ていうレベルです。iOSアプリでいえ…
今回はFlutterを使い立ての初心者がゼロから画面のデザインを実装していくときに 意識するべきポイントについて解説していきます。 これを理解しているのと理解していないのとでは Flutterでレイアウトを組む時の楽しさが変わってくると思ってます。 ただ完…
本日はApple Music クローンのセクション6のデザインを作っていきます。 とても簡単にできます。 トラック更新 ブログ執筆時点の今は実はセクション7まで仕上がっていますので今後それらをまとめていく予定です。 「トラック更新」のデザインは 「トラック更…
Apple Music のクローンアプリを開発していて気づいたことがある。 前回はセクション2 のレイアウトを実装していて今回はセクション3 のレイアウトを実装するわけですが、 セクション2 section 2 セクション3 section 3 割とデザインが似ているわけである(笑…
今回はセクション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…
