Flutter 【Flutter】スクロール可能なリストを表示する ListView の使い方
今回は、ListView について紹介します！ListView は、スクロール可能なリストを表示するための Widget です。画面に ListView の項目が収まらない場合はスクロールできます。 基本の使い方 以下のように、childr...
Flutter 記事一覧
Flutter Flutter 【Flutter】TimePicker で時刻を入力できるようにする
Flutter で時刻を入力できるようにする方法について紹介します！ 日付入力を受け付ける DatePicker については、以下の記事で紹介しています。 方法 以下の関数を、ボタンの押下時等に呼び出すことで、時刻入力を受け付けることができ...
Flutter 【Flutter】カレンダーから日付を入力できるようにする方法
Flutter でカレンダーを表示して、日付入力を受け付ける方法について紹介します！ 方法 以下の関数を呼び出すと、カレンダーが開いて日付を選択できるようになります。 Future<void> _selectDate(BuildContex...
Dart 【Dart】DateTimeで日付・時刻を操作する方法 まとめ
Flutter で、日付や時刻を扱うDateTimeクラスで、「現在の時刻を取得する」、「日付を比較する」、「フォーマットする」などの操作方法を紹介します。 現在の日付・時刻を取得する ローカルの日付・時刻 ローカル(端末)の現在の日付・時...
Flutter 【Flutter】Widget を条件分岐で出し分ける方法
Flutter で、Widget を条件に応じて、出し分けたい時もあると思います。この時、if 文や switch 文を直接 child で使用して制御しようとすると、エラーになります。自分も最初 if 文を使用して Widget を制御し...
Flutter 【Flutter】AudioPlayers で音声を再生する
Flutter で BGM や効果音を再生する方法について紹介します！今回は、AudioPlayers のパッケージを使用して音声を再生します。 事前準備 事前準備として、AudioPlayers のパッケージインストールや、音声ファイルの...
Flutter 【Flutter】WebView で Web ページを表示する方法
Flutter で WebView を使用して、Webページを表示する方法についてご紹介します！ 事前準備 パッケージをインストール Flutter の WebView については、公式のパッケージがあります。まずは、公式パッケージをインス...
Flutter 【Flutter】LinearProgressIndicator で、HP ゲージをつくってみた
Flutter で 以下のような HP によって色が変わる HP ゲージをつくってみました！そのソースコードと解説、使い方を紹介します！ ソースコード 今回作成した HP ゲージの独自 Widget クラスのソースコードが以下になります。 ...
Flutter 【Flutter】プログレスインジケータのデザイン変更方法
Flutter におけるプログレスインジケータのサイズや、線の太さ、色といったデザインを変更する方法を紹介します！Flutter のプログレスインジケータの種類と表示方法については、以下の記事で詳しく紹介していますので、よろしければご参照く...
Flutter 【Flutter】プログレスインジケータの種類と表示方法
Flutter における プログレスインジケータ（Progress Indicator）の種類と表示方法について紹介します！プログレスインジケータは、処理の進行状況を表すときに使用されます。Progress が「進捗」、Indicator ...
Flutter 【Flutter】基本的なボタン3種類とデザインの変更方法
Flutter で使用できるボタンには、どのようなものがあるか基本的なものを紹介します。また、ボタンのデザインを変更する方法も一緒に紹介します。 基本的なボタンの種類 ボタン表示用 Widget には、基本的なものとして以下の3種類がありま...
Flutter 【Flutter】ドロップダウン(プルダウン)メニューの作り方
Flutter でドロップダウン(プルダウン)メニューを表示するには、DropdownButton を使用します。今回は、この DropdownButton について紹介します！ DropdownButton の使い方 必要なプロパティ D...
Flutter 【Flutter】独自の Widget クラスを作成する方法
同じような Widget のまとまりを何回も使い回す場合、似たようなコードが繰り返されます。繰り返しがあっても動作はしますが、コードがわかりにくくなったり、変更が大変になったりします。そこで今回は、独自 Widget クラスを作成して使い回...
Flutter 【Flutter】グラデーションボタンを作成する方法
ボタンの背景をグラデーションにする方法を2種類紹介します。 ElevatedButton を使う方法 ElevatedButton の子Widget に、Inkを指定します。Ink を使うことで、Ink の子Widget である Conta...
Dart 【Dart】乱数の生成方法と3つの応用例
Dart で乱数を生成する方法を紹介します。また、乱数の応用例として、指定の範囲でランダムに整数を生成する方法や、指定の桁数の整数をランダムに生成する方法、ランダムな文字列の作成方法も紹介します。 乱数の生成方法 math ライブラリの R...
Flutter 【Flutter】Widget を下寄せして配置する4種類の方法
Text や Image、Column のような Widget を下寄せして配置する方法を4種類紹介します。ここでは、下寄せにして配置することを例にしていますが、上寄せや左右寄せなどにも応用できます。 Container 内の Widget...
Flutter 【Flutter】アプリの動かし方とビルドモード（Debug / Profile / Release）について
Flutter には、ビルドモードが3種類あります。アプリ開発の状況・場面に応じてアプリの動かし方を変えるために、ビルドモードを使い分けます。今回は、このビルドモード3種類について紹介します。 Debug Mode（デバッグ モード） De...
Flutter 【Flutter】画面の向きを変更・固定する方法
今回は、Flutter アプリの画面の向きを変更・固定する方法を紹介します。 画面の向きを変更する方法 まず、特定の画面の向きを変更したい場合についてです。画面の向きを変更するには、service.dart をインポートして、SystemC...
Flutter 【Flutter】SafeArea で画面端の表示を整える
今回は、SafeArea でステータスバーやノッチを避けて表示させる方法を紹介します。 SafeArea を使わないと… SafeArea を使っていない以下のソースコードを実行してみます。 @override Widget build(B...
Flutter 【Flutter】戻るボタンを非表示、無効にする方法 まとめ
Flutter で戻るボタンを非表示にする方法と、無効にする方法を紹介します！ AppBar の戻るボタンを非表示にする方法 AppBar の戻るボタンを非表示にするには、AppBar の設定として、automaticallyImplyLe...