Flutter で BGM や効果音を再生する方法について紹介します！今回は、AudioPlayers のパッケージを使用して音声を再生します。 事前準備 事前準備として、AudioPlayers のパッケージインストールや、...

Flutter で WebView を使用して、Webページを表示する方法についてご紹介します！ 事前準備 パッケージをインストール Flutter の WebView については、公式のパッケージがあります。まずは、公...

Flutter で 以下のような HP によって色が変わる HP ゲージをつくってみました！そのソースコードと解説、使い方を紹介します！ ソースコード 今回作成した HP ゲージの独自 Widget クラスのソ...

Flutter におけるプログレスインジケータのサイズや、線の太さ、色といったデザインを変更する方法を紹介します！Flutter のプログレスインジケータの種類と表示方法については、以下の記事で詳しく紹介していますので、よろしければご参照...

Flutter における プログレスインジケータ（Progress Indicator）の種類と表示方法について紹介します！プログレスインジケータは、処理の進行状況を表すときに使用されます。Progress が「進捗」、Indicator...

Flutter で使用できるボタンには、どのようなものがあるか基本的なものを紹介します。また、ボタンのデザインを変更する方法も一緒に紹介します。 基本的なボタンの種類 ボタン表示用 Widget には、基本的なものとして以下...

Flutter でドロップダウン(プルダウン)メニューを表示するには、DropdownButton を使用します。今回は、この DropdownButton について紹介します！ DropdownButton の使い方 必要な...

同じような Widget のまとまりを何回も使い回す場合、似たようなコードが繰り返されます。繰り返しがあっても動作はしますが、コードがわかりにくくなったり、変更が大変になったりします。そこで今回は、独自 Widget クラスを作成して使い...

ボタンの背景をグラデーションにする方法を2種類紹介します。 ElevatedButton を使う方法 ElevatedButton の子Widget に、Inkを指定します。Ink を使うことで、Ink の子Widget であ...

Text や Image、Column のような Widget を下寄せして配置する方法を4種類紹介します。ここでは、下寄せにして配置することを例にしていますが、上寄せや左右寄せなどにも応用できます。 Container 内の Wi...

Flutter には、ビルドモードが3種類あります。アプリ開発の状況・場面に応じてアプリの動かし方を変えるために、ビルドモードを使い分けます。今回は、このビルドモード3種類について紹介します。 Debug Mode（デバッグ モード...

今回は、Flutter アプリの画面の向きを変更・固定する方法を紹介します。 画面の向きを変更する方法 まず、特定の画面の向きを変更したい場合についてです。画面の向きを変更するには、service.dart をインポートして、...

今回は、SafeArea でステータスバーやノッチを避けて表示させる方法を紹介します。 SafeArea を使わないと… SafeArea を使っていない以下のソースコードを実行してみます。 @override Widg...