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

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

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

32. Flutterにおける端末のOS判定法

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

31. Flutterで画面を縦or横に固定する方法 (Portrait, Landscape)

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

30.【クイズアプリ開発】 Flutterでリセット画面を実装する

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

29.【クイズアプリ開発】選択肢のボタンデザインを整える

今回は選択肢のボタンのデザインを綺麗にしていきます。 それとボタンをタップしたときの処理も書いていきます。 想定しているデザイン ボタンの角丸実装 まずはRaisedButtonに角丸を実装します。 過去記事に角丸を実装する方法について書いていますので復習…

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…

26. Flutterで4択クイズアプリのレイアウトを実装する

本日はFlutterで4択クイズっぽいアプリを作っていきます。 特に体系的に学習するという意味ではないので企画倒れになるかもしれません。 Flutterのスキルアップとしてはちょうどいい題材かなと思っています。 アプリのデザイン構成 これから何日間かにわたっ…

25. Flutterを1ヶ月触ってみた感想をまとめてみた

本日は2月末とおよそ1ヶ月間Flutterを触ってみたので自分なりの意見をまとめてみようと思う。 正確には今年の1月中旬からさらなるスキルアップとしてFlutterを触っていました。 blog.tamappe.com 今回はわかりやすく目次を書いてみようと思います。 1. iOSエ…

24. Flutterでの関数の型プロパティFunctionの導入と関数の初期化の方法

今回はFlutterで関数をプロパティのように扱う方法について学習します。 簡単にいえば、Function型が存在することが理解できればOKです。 用途はButtonクラスにonPressedプロパティがあるのですが、これをカスタムウィジェットにするときに使われるやり方で…

23. FlutterでのCustomWidgetの作り方

今回はFlutterでCustomWidgetを作成する方法について学習します。 例えば、Text('文字列')というウィジェットを継承してカスタムなTextを作成したい場合などに使う用法ですね。 このやり方を知る前はFlutterでもTextを継承するだけだと思ったのですが、これ…

22. RSSアプリを色々カスタマイズしてみる

今回はRSSアプリのカスタマイズをしていきます。 デザインの調整がメインになります。 RSSアプリの作成 blog.tamappe.com RSSアプリの詳細ページの作成 blog.tamappe.com separatorを追加する まず最初にiOSにあるようなUITableViewのseparatorを作成します…

PythonでFirebaseのRealtime Databaseにアクセスする

個人開発でAPIのデータを作成するためにPythonでFirebaseにアクセスしたので備忘録としてソースコードをまとめます。 Firebaseのデータベースについて もう説明不要なくらいに有名になったFirebaseさんですが、今の所2種類のデータベースがありますので 簡単…

21. Flutterでの画像表示と枠線、角丸を付ける方法について

今回はFlutterで画像を表示させる方法とWidgetに枠線や角丸を付ける方法について学習します。 SwiftUIでも同じようなことを書きました。 qiita.com 画像の表示 Flutter公式では次のリンクが参考になります。 flutter.dev まずはプロジェクトファイルに画像を…

20. Flutter公式のプラグインを使ってWebViewを表示させる

今回はFlutterでWebViewウィジェットを使ってみたいと思います。 前回の続きになりますが、念の為、前回どこまでしたのかを復習する場合はこちらになります。 blog.tamappe.com FlutterのWebViewプラグイン Flutter公式にWebViewのパッケージwebview_flutter…

19. Flutterでwebfeedとhtmlを使ってRSSのリスト一覧を作成する

今回はFlutterでRSSの導入みたいなものを作成したいと思います。 RSSアプリの概要 今回RSSで使うXMLファイルはQiitaにユーザーフィードにしています。 ここで学習できた内容は ListViewとListTileの使い方 画面遷移 ライブラリのインストール ウィジェットの…

SeleniumでUIテストを自動化しよう

いつものFlutter開発とは話が変わりますが、Seleniumを使うとGoogle Chrome をプログラムで自動化することができます。 ちなみに今回の話しはMac限定でWindowsには対応しておりません。 (Selenium自体はWindowsにも対応していたはず) 今回はそのSelenium を…

18. FlutterのTabBarのカスタマイズ、Tabの高さの変更

今回は前回学習したTabBarをどこまでカスタマイズできるかについて試してみたいと思います。 blog.tamappe.com TabBar の高さの変更 TabBarのデフォルトの高さがどれくらいか情報が見つかりませんでしたが、タブの高さを変更することはできるみたいです。 Ta…

17. FlutterでSegmentController的なUIをTabBarViewを使って実装する

本日はFlutterのTabBarとTabBarViewについて学習します。 iOSでいえばスマートニュースやグノシーみたいなニュース系アプリに使われているトップ画面のメニューバーみたいなUIを実現できます。 TabBarの基本的な書き方 TabBarの基本的な書き方は次の通りです…

16. Flutter のデータベース外部パッケージSQFLiteを使ってみる

本日はFlutterでデータベース操作を学習しようと思います。 iOSとAndroidではSQLiteという軽量ライブラリがあります。SQLiteを使えばアプリ内にDB(DataBase)を作成しアプリ内にデータを保存できました。 そのSQLiteをFlutterで利用するための外部パッケージ…

15. Flutter のBottomNavigationBarでUITabbarControllerぽく作る

今回はFlutterでBottomNavigatonBarの拡張を行いたいと思います。 またBottomNavigatonBarの基本的な使い方は以前に学習しました。 blog.tamappe.com こちらは画面の切り替えができておらず、本当にアイコンの選択/未選択とウィジェットの更新だけの実装でし…

14. Flutterでパラメータ付き画面遷移の方法について学習する

前回はFlutter での画面遷移の方法について学習しました。 本日はそれをもとにして画面遷移時に遷移先の画面に値を渡す方法について学習します。 といってもそれほど難しくはなく発想はiOSやAndroidと同じです。 それでは見ていきます。 画面間の値渡しの方…

13. Flutterで画面遷移に使うNavigatorについて学習する

本日は複数画面の切り替え機能である「ナビゲーション機能」について学習します。 ナビゲーション機能はNavigatorというクラスが用意されているようです。 iOSでいうところのUINavigationControllerみたいなものだと推測しています。 Navigator クラスについ…

12. FlutterのTabbarであるBottomNavigationBarについて学習する

今回はiOSでいうところのUITabbarControllerに当たるBottomNavigationBarについて学習します。 BottomNavigationBar とは AppBarのように画面の上側ではなく、下側にもバーを表示させたいことがあります。 この下側にバーを設置するウィジェットがFlutter で…