本エントリではFloatingActionButtonのデザインバリエーションについて説明する FloatingActionButtonとは FloatingActionButtonのデザインバリエーションについて FloatingActionButton.small() FloatingActionButton.large() FloatingActionButton.extende…

本エントリでは floatingActionButtonを複数表示する方法 を以下の流れで説明する。 floatingActionButtonとは floatingActionButtonを1個表示する [補足] floatingActionButtonに文字列を表示したいケース floatingActionButtonを複数個表示する 垂直方向に…

本エントリではIconButtonの使用方法についてまとめる。 IconButtonとは 必須のプロパティ onPressedがnullの場合の表示 デザイン サイズ アイコンの色 タップ時の背景色 タップ中の背景色 タップ時の処理 通常タップ 長押しタップ その他 アイコンの回転 Ic…

以下のコードの様にTextウィジェットに文字列を渡すだけの場合、画面幅まで文字列が達した場所で改行され表示される。 改行なしの場合 そこで任意の場所で改行を行いたい場合、以下の方法で簡単に実現することができる。 \n を用いる 三重引用符（ """ ）を…

ElevatedButtonとは 実装 デフォルトのデザイン 無効時のデザイン デザイン設定一覧 サイズ styleプロパティを指定 SizedBoxでラップ サイズを設定する際の注意点 背景色 形状 枠線 枠線の色を設定する 枠線の太さを設定する ElevatedButtonとは api.flutter…

本エントリではウィジェットをスワイプすることで削除する方法について以下の流れで説明する。 スワイプで削除する機能の実装方法 サンプルアプリ 動作 作り方 リストアイテムの用意 ListView.builder()ウィジェットの配置 CardウィジェットをDismissibleウ…

開発が進むとimportでパッケージを関連付ける機会が増え、管理が面倒になる場合がある。 その様な場合、export文を用いると管理を楽にすることができる。 本エントリではexport文を用いたリファクタリングの方法を説明する。 exportとは exportの使い方 expo…

ネットワーク通信中などでユーザーの操作を防ぎたい時には、全画面をやや暗くしてローディングアニメーションを表示する手法がよく使用される。 この様なUIを実現するためのパッケージはpub.devにも多く存在するが、折角なのでスクラッチで作成してみる。 完…

以下のスクリーンショットのように、ユーザーに複数の選択肢の中から一つを選んでもらう際にRadioボタンを作成したいケースがある。 material.io radio buttons sample このようなケースではRadioウィジェットを使うと簡単に作成できる。 本エントリではRadi…

アイテムを水平方向に並べた際、折り返して表示をしたい場合がある。 このようなケースではWrapウィジェットを用いることで、 画面に収まらないアイテムを折り返して表示してくれる。 本エントリではWrapウィジェットの使い方について説明する。 Wrapウィジ…

アプリを開発していると、画像のようにページ下部に画面遷移用のナビゲーションバーを実装したい時がある。 例 zozotown Flutterではこのような機能を、ScaffoldウィジェットのBottomNavigationBarを利用することで簡単に実装できる。 本エントリではBottomN…

flutterではwidgetのサイズを指定する際、論理ピクセルを用いる。 論理ピクセルを用いるとデバイスごとに異なる物理解像度を意識せずにUIを作成できる 本エントリでは論理ピクセルについての基礎知識と使用する際の注意点についてを以下の流れで説明する。 …

Flutterアプリの開発においてwidgetの名前を変えたい時にはAndroid StudioのRefactor機能を使うと楽。 本エントリでは例としてflutter create <appname>で作られるカウントアップアプリの MyAppをMyGreatAppと変換する。 Android StudioのRefactor機能の使い方 名前を</appname>…