本エントリではデフォルトで実装される「ページを戻る機能」を無効化にする方法を説明する。 ページを戻る機能 ページを戻る機能を無効化する方法 「AppBarの左に表示される戻るボタン」を無効化する 「画面端から右スワイプスで戻る機能」を無効化する ペー…

本エントリではListTileを用いて簡単にリストのアイテムを作成する方法を説明する。 ListTitleとは 使用頻度の高いプロパティ title subtitle leading trailing onTap よくあるリストのアイテム作成方法 ListTitleとは api.flutter.dev ListTileは高さが固定…

SetはIterableを継承したクラスで、複数の要素を格納できる重複なしのデータ型。 本エントリではSetの生成方法を説明する。 Setインスタンスの生成 リテラルで初期化 Set() Set.from() Set.identity() Set.of() Set.unmodifiable() Setインスタンスの生成 リ…

本エントリではList型データの操作(追加、削除、フィルター...)について説明する。 Listとは 説明用データ 追加 add() addAll() fillRange() insert() insertAll() 削除 clear() remove() removeAt() removeLast() removeRange() removeWhere() フィルター w…

本エントリではList型データの生成方法を説明する。 Listとは Listインスタンスの生成 リテラルを代入 List.empty() List.filled(要素数, 要素の値) List.from(他のIterable型データ) List.generate(要素数, 要素を生成するコールバック関数(引数: index)) L…

Dartで乱数を作成する方法を説明する。 必要なライブラリ パターン別乱数生成方法 整数( 例. 0から100の間の整数 ) 少数 ( 例. 0.0から0.999...の間の少数 ) 自然数 ( 例. 1から100の間の整数 ) 任意の範囲の整数 ( 例. 50から60の間の整数 ) 任意の範囲の少…

本エントリではSnackBarの使用方法について説明する。 SnackBarとは SnackBarの作成・表示方法 表示方法 デザインの変更 ボタンあり 表示時間の調整 背景色の変更 サイズの変更 角の丸さ調整 SnackBarとは api.flutter.dev SnackBarはアプリの画面下部に数秒…

本エントリでは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>…