FlutterにはshowDialog()という関数が用意されていて、かんたんにダイアログを表示できます。Fadeアニメーションで背景が透過の黒になり、ダイアログ表示されるアレです。トランジションをカスタマイズしたい、独自のダイアログを作成したい時どうするのでしょうか？ ちょっと古めの記事ですが、以下を参考にさせてもらいました。 結論私も同じ結論ですが😁、PopupRoute という抽象クラスを継承して独自のダイアログを作成します。 PopupRouteの使い方前述の記事
HTMLの場合はCSSだけでふきだしを作成できるのですが、Flutterではどうやるのでしょうか。そのままの名前でBubbleというOSSがあり、様々な形のふきだしを作成できるようです。これでOKなら良かったのですが、デザイナーが指定する形と合わないので自作することにします。 ShapeDecorationを使う Containerのdecorationプロパティでボーダーラインを描画するので、これを使えばふきだしのボーダーラインを実現できそうです。ふきだしの中身はCont
表示要素が画面の縦サイズやContainerなどで指定した領域をはみ出たときにスクロールさせる方法です。 SingleChildScrollViewを使うスクロールさせたい要素をSingleChildScrollViewでラップするだけです。Containerで高さの制約をつけます。 サンプルコードでは、boxHeight＜402の場合はスクロールしますが、boxHeightが402以上の場合はスクロールしません。高さ100のContainerが4つあるので、しきい値は4
FlutterのCardとListTileを使えばよくあるこんなカード型のViewがかんたんに実現できます。 ですが、実現したいデザインと少し違う場合は、ListTileを使わずにColumnとRowを組み合わせることになると思います。公式のListTileクラスでサンプルを確認できます。 ContainerとColumnとRowを組み合わせた素振りをしてみます。以下のようなデザインにしたいと思います。 ・カードをタップしたらリップルエフェクトを効かせる ・リップルエフ
DartのListクラスのメソッドについて、Javascriptと比較したいと思います。 『JavascriptのArray.find()はDartでどう書くの？』といったニーズ（ほぼ自分用）にお応えしてまとめました。 長さ// Javascriptconst length = items.length; // Dartfinal length = items.length; 連結する// Javascriptitems.concat(otherItems);// S
HTTP GETでREST APIにアクセスするHTTPクライアントクラスを作ります。 サーバがJSON形式のデータを返すことを想定します。 HTTPクライアントはWidgetが共通で利用するためシングルトンクラスにします。 実際に開発する時は、サーバ側も同時並行で開発することがよくあります。 そのため、サーバにアクセスしないでテストするためのスタブも実装します。 スタブとは、一言でいうとダミーデータを返す代用プログラムのことです。 httpパッケージのインストールまずh
シングルトンとはシングルトンクラスは、あるクラスのインスタンスが２つ以上生成されないことを保証するデザイン・パターンの１つです。一般的にシングルトンクラスの実装は以下の仕様となります。 ・インスタンスを１つだけ生成する ・クラスのスタティックメンバとしてインスタンスのキャッシュを保持する ・インスタンスのキャッシュを返すファクトリーコンストラクタ どういうときに使うかシングルトンクラスは、インスタンスの状態を保持してクラス間で共通のメソッドやプロパティにアクセスした
Flutterの基本中の基本はContainerです。他のBlog等でもよく解説されていますが、色々な機能があります。私がよく使う機能を中心にまとめます。 width, heightContainerの幅と高さです。値はdouble型ですが小数点を含めなくてもOKです。冗長になるので私は整数を書いてしまいます。 Container( width: 100, height: 100, child: Text('テキスト'),); pad
