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

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

Dart

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のスキルアップとしてはちょうどいい題材かなと思っています。 アプリのデザイン構成 これから何日間かにわたっ…

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を作成します…

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の使い方 画面遷移 ライブラリのインストール ウィジェットの…

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 で…

11. FlutterのScrollViewについて学習する

今回はFlutterのScrollViewことSingleChildScrollViewについて学習します。 SingleChildScrollViewは特別な設定をしなくてもウィジェットを中に入れておくだけで、そのサイズに応じて自動的にスクロール表示ができるウィジェットです。Scroll用のウィジェッ…

10. FlutterでListViewをタップした時の挙動を実装する

前回はListViewの表示について学習しました。 実際のアプリ開発では画面の表示だけでなくそのUIをタップしたときの挙動も実装しなければならないことが多いです。 今回はそのListViewで表示されているものをタップしたときの処理を実装していきます。 ListVi…

9. FlutterのListViewについて学習する

本日はFlutterのListViewについて学習します。 ListViewとは 少し前に複数ウィジェットを配置するための縦に並べるColumnと横に並べるRowについて学習しました。 ListViewはこのColumnに似ています。 どちらかというとAndroidの知識があるとAndroidにすでにL…

8. FlutterのGridViewレイアウトを学習する

本日はFlutter のGridViewについて学習します。 前回は複数のウィジェットを乗せるためのウィジェットColumnとRowについて学びました。ColumnはiOSでいえばUITableView、AndroidではRecyclerViewと同じような役割を持っていました。 本日のGridViewはどちら…

7. Z軸にウィジェットを並べるStack

今日はStack について学習します。 Stackレイアウトについて Stack は縦でも横でもなくウィジェットを重ねるためのレイアウトです。 基本的なイメージは前回のColumnやRowと同じ機能で複数のウィジェットを配置するために用いられます。 つまり、ColumnやRow…

6. Column と Row ウィジェットで複数のウィジェットを配置する

今日はColumn とRow について学習しました。 Flutter のColumn とRow の概念はiOSのUIKitにはないようなUIです。 一つのレイアウトに複数のウィジェットを配置したい場合に使います。 Androidに近い概念があります。 そのためAndroidのレイアウトと比較して…

5. レイアウトウィジェットについて

今回はFlutter のレイアウトで使うレイアウトの一部について学習します。 学習するウィジェットはText, Center, Container クラスです。 Text ウィジェット について まずはサンプルコードを書きます。 Text( 'Hello Flutter', style: TextStyle(fontSize: 3…

4. Flutter におけるボタンウィジェットについて

今回はFlutter で使えるボタンのウィジェットについて学習します。 ButtonWidget の種類について これまでのバックグラウンドがiOSエンジニアでしたのでiOSと比べてみます。 Flutter iOS FlatButton UIButtonと同じ RaisedButton UIButtonが立体的に表示され…

3. Flutter のState クラスについて勉強する

今回はFlutter の状態を扱う機能であるState クラスについて勉強します。 これまで書いてきた StateクラスはStatelessWidget(静的クラス)でした。 Flutter のState は2種類存在します。 StatelessWidget (静的なState) StatefulWidget (動的なState) よくFlu…

2. iOSエンジニアがFlutter を触ってみた2

iOSエンジニアがFlutter を触ってみた2 今回は Scaffold と AppBar について勉強しましょう。 【目次】 iOSエンジニアがFlutter を触ってみた2 Scaffold と AppBar Scaffold について整理する Scaffold と AppBar Scaffold はアプリの構成の骨組みみたいなも…

1. iOSエンジニアがFlutter を触ってみた

iOSエンジニアがFlutter を触ってみた 去年から気になっていた技術のFlutterをとうとう今年から触っていきます。 iOSエンジニア視点で記事を書いているのでiOSアプリ開発との差異に注目しながら記事を書いていきます。 iOSエンジニア向けにFlutterとはどんな…