Flutter

【Flutter】Redux使用時にStatelessWidgetをアニメーションさせたい時の方法

FlutterでReduxアーキテクチャパターンを採用している場合、StatelessWidgetでの構築がメインになると思います。

ウィジェットをアニメーションさせたい場合が必ず出てくると思いますが、アニメーションは基本的にStatefulWidgetで行う事が前提となっているようで私は悩みました。

 

公式のドキュメントをみてみると、Statelessでアニメーションをさせる例がありますが、パラメータとしてStatefulWidgetで作成したAnimationControllerを持っている為、StatefulWidgetから呼び出す前提の方法になります。

 

この記事では、完全StatelessWidgetだけでウィジェットにアニメーションを持たせる方法を紹介したいと思います。

 

FlutterのReduxについてはこちらの記事でまとめています。

ここから先の解説はこの記事に沿ってReduxを導入した前提で進めていきますので一度ご覧ください。

FlutterにReduxアーキテクチャを実装させる

続きを読む

【Flutter】公式より多機能なWebViewプラグイン「flutter_inappwebview」の使い方

以前に公式のWebViewプラグイン「webview_flutter」について何度か紹介しましたが、その後「flutter_inappwebview」というとてもマルチな機能を搭載していて便利なプラグインを知りました。

webview_flutterの記事はこちら↓

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

今回はこの「flutter_inappwebview」の特徴と使い方を紹介したいと思います。

続きを読む

FlutterにReduxアーキテクチャを実装させる

Flutterでアプリ開発を深く進めていたら、Widget間のデータのやり取りや状態(State)の管理、UIの制御が複雑になり、シンプルなアプリの域を超えてしまうとデータ管理が難しいなと思い、「状態管理」をするためにFlutterにソフトウェアアーキテクチャを導入することにしました。

 

今回は、Web開発で以前に利用した事があり、Flutterでも利用可能な「Redux」アーキテクチャパターンを採用してみることにしました。

この記事では、FlutterでどのようにReduxアーキテクチャパターンを導入・利用していくのかについて紹介していきます。

続きを読む

【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法

前回の記事でFlutterにWebViewを使うことができるWebView_Flutterという公式プラグインについてご紹介しました。

今回は、Webview_Flutterを使ってどうやってFlutterアプリ(Dart)とWebページ(JavaScript)間でデータ交換をするのかについて紹介していこうかと思います。

前回同様、あまり情報がなく基本的に私が試した内容を紹介する為、正確な方法なのか正しい認識なのかは少しわからない点もあります。

Webview_Flutterの導入と基本的な使い方については前回の記事をご覧ください。

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

続きを読む

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。

この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。

pub.dev: https://pub.dev/packages/webview_flutter

 

ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので(2019年現在)、私のできる範囲で調査した内容をこの記事で紹介します。

私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。

続きを読む