Re:birth エンジニアリング

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

iOS

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

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

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

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

FlutterでのCustomWidgetの作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flutter のBottomNavigationBarでUITabbarControllerぽく作る

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

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

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

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

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

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

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

FlutterのScrollViewについて学習する

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

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

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

FlutterのListViewについて学習する

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

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

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

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

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

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

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

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

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

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

今回は Scaffold と AppBar について勉強しましょう。 Scaffold と AppBar Scaffold はアプリの構成の骨組みみたいなもので家みたいなものをイメージしています。 AppBar はiOS でいうところのNavigationBar そのものです。 では基本構成を見ていきます。 ma…

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

超久しぶりにブログを更新します。 Flutter の基本構成 Flutter アプリの最小限実装 main.dart にこのソースコードを書きます。 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This w…

RxSwift+NotificationCenterの購読機能を使ってキーボードが被らない機能を実装する

概要 今回はNotificationCenterのRxSwiftについて解説していきます。 github.com このページをみるとNotificationCenterにはnotificationのfunctionがあることがわかります。 ということは NotificationCenter.default.rx.notification("", object: nil) と…

WKWebViewのRXデータバインディングを実装する

概要 今回はWKWebViewのRxSwiftのローディング処理について見ていきます。 実はRxSwiftにWKWebViewのものがないためかrxのプロパティがありません。 ただし公式がWKWebViewに対するライブラリを提供していますのでこれをインストールして貰えればrxが使える…

RxSwiftを使ってUIKitのRXデータバインディングを実装する

概要 今回はRxSwiftを使ってUIKitのデータバインディングの実装を見ていきます。 RxSwiftはUIKitの数だけメソッドがあります。 こちらのページがRxで実装できるクラスの一覧です。 github.com めちゃくちゃ多いですね。大体のUIKitをRxで書ける事がわかりま…

Swiftのデリゲートメソッドでデフォルト引数ぽく書く方法

概要 コードレビューの時にデリゲートメソッドの部分で指摘を受けて修正しようと思ったのですが、 なかなかすぐに思いつかなかったので記事として残してみることにしました。 自分への備忘録です。 記事にまとめてみると復習の意味でも結構いい勉強になりま…

RxDataSourceを使ってTableViewのHeaderとFooterを生成してみる

概要 前回はRxDataSourceを使って基本的なUITableViewのテンプレートを作ってみました。 RxDataSource github.com 今回はこのRxDataSourceについて弄ってみてどんな事ができるのかについてより詳しくみていこうと思います。 基本的なstoryboardの配置やソー…

RxDataSourceを使ってUITableViewのデータバインディングを実装するテンプレートを作ってみた

概要 今回はRxSwiftの機能をまとめたUITableView用のデータバインディングライブラリRxDataSourceを使ってUITableViewを実装していく方法を解説します。 github.com RxDataSourceの概要を説明すると Writing table and collection view data sources is tedi…

RxSwiftでUITableViewのセルをタップした時にバインディングされているitemのmodelの情報を取得する

概要 今回はRxSwiftを使ってUITableViewで表示されたセルのitemをタップした時にitemのmodelの情報を取得する方法について解説します。 前回の blog.tamappe.com と似てるようで実は違ったりします。 この方法によりリスト表示のセルをタップして画面遷移さ…