Flutter

【Flutter】Widgetを縦方向横方向に並べ替えをするReorderWrapの使い方

先日、Flutterで縦横並べ替えが出来る「ReorderWrap」というツールを自作しました笑

【Pub.dev】

https://pub.dev/packages/reorderwrap

【Github】

https://github.com/shoushimizu1025/reorder_wrap

 

このツールを使うとこのように縦横並べ替え&並べ替えた後に並び順をコールバック関数で受け取る事が出来ます。

 

作った理由

Flutter公式の機能には縦並べ替えの「ReorderableListView」というWidgetはありますが、縦横並べ替え(マス目状並べ替え)機能を持つWidgetがありませんでした。

このようなツールは既に素晴らしいものがありますが、私の使っている環境では2020/2/20時点でFlutterバージョン関係のエラーで利用できなかった為、「仕方ない、作ってみるか!」と安易な気持ちで作成しました。

【素晴らしい並べ替えツール】

https://pub.dev/packages/reorderables

 

ツールの使い方

特徴

このツールは縦並べ替えの「ReorderableListView」Widgetに影響を受けています。

また、ツール名に「Wrap」とある通り、WrapWidgetで並べ替え機能部分をラップしています。

なので、画面を飛び出さずに折り返して、複数行となって表示されます。

Wrapに、行間をまたいで並べ替えを行えるようにしたのが「ReorderWrap」です。

 

移動方法

ReorderableListView」と同じくLongPressで移動を開始します。

 

利用できる条件

WrapWidgetと同じく、対象となるWidgetリストをクラスの引数として渡します。

その際、あまり汎用的な構築を行っていなく、Widgetリスト全ての縦横幅が同じである必要があります。(そのうち直すかも)

縦10横15の場合は、全てのWidgetが縦10横15でなければなりません。

 

使用例

Pub.devの通りですが一応載せておきます。

ReorderWrapは4つの引数を設定します。

・itemHeight

Widget1個分の高さ(int)

 

・itemWidth

Widget1個分の横幅(int)

 

・children

List<Widget>型のリストデータを設定します。

 

・reorderCallback

コールバック関数です。

引数に、並び順Indexリスト(List<int>)、移動前のIndex(int)、移動後のIndex(int)を指定して、これらを受け取れます。

 

最後に

同じく縦横並べ替え機能に悩んでいる方の助けになれば幸いです。

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技術を搭載したいと考えている人の参考になればと思います。

続きを読む