Flutter 記事一覧

スポンサーリンク
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 には、基本的なものとして以下...
Flutter

【Flutter】ドロップダウン(プルダウン)メニューの作り方

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

【Flutter】独自の Widget クラスを作成する方法

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

【Flutter】グラデーションボタンを作成する方法

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

【Dart】乱数の生成方法と3つの応用例

Dart で乱数を生成する方法を紹介します。また、乱数の応用例として、指定の範囲でランダムに整数を生成する方法や、指定の桁数の整数をランダムに生成する方法、ランダムな文字列の作成方法も紹介します。 乱数の生成方法 math ラ...
Flutter

【Flutter】Widget を下寄せして配置する4種類の方法

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

【Flutter】アプリの動かし方とビルドモード(Debug / Profile / Release)について

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

【Flutter】画面の向きを変更・固定する方法

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

【Flutter】SafeArea で画面端の表示を整える

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

【Flutter】戻るボタンを非表示、無効にする方法 まとめ

Flutter で戻るボタンを非表示にする方法と、無効にする方法を紹介します! AppBar の戻るボタンを非表示にする方法 AppBar の戻るボタンを非表示にするには、AppBar の設定として、automatically...
Dart

【Dart】0や空白で埋めて文字数や桁数を合わせる方法

文字や数字を表示させるとき、0 で埋めたり、空白で埋めて先頭や末尾を揃えたいときはありませんか? そこで今回は、Dart で文字数や桁数を合わせる方法について紹介します。 0や空白で埋める方法 文字列の左側に追加 文字列...
Flutter

【Flutter】ダイアログの表示の仕方

今回は、Flutter でダイアログを表示する方法を紹介します。 初めに Flutter で使用できるダイアログは、基本的には、AlertDialog、SimpleDialog、CupertinoAlertDialog の3つ...
Flutter

【Flutter】ボタンの無効化と有効/無効を切り替える方法

今回は、Flutter のボタンを押せなくする(無効化する)方法について紹介します。単に無効化するだけでなく、条件によって、有効化と無効化を切り替える方法についても紹介します。 ボタンを無効化 ボタンを無効化するには、onPr...
Dart

【Dart】List の使い方(宣言、プロパティ、メソッド)

配列の一つである List について、宣言の仕方から List のプロパティ、追加や削除といった様々な List の操作方法(メソッド)まで紹介します。 List の宣言 宣言の基本の形は、以下のようになります。 Lis...
Flutter

【Flutter】データを渡して画面遷移する方法

Flutter で画面遷移するときに、データを受け渡す方法を紹介します。画面遷移の基本については、以下の記事をご参照ください。 データの受け取り方 データを受け取る側は、 StatelessWidget の場合と ...
Flutter

【Flutter】画面遷移の方法

Flutter アプリで画面遷移する方法について紹介します。 画面遷移の仕組み まず、コードの意味を把握しておくため、Flutter の画面遷移がどのように行われているか、その仕組みを簡単に紹介します。 Flutter ...
Flutter

【Flutter】画像を表示する方法

今回は、Flutter アプリで画像を表示する方法を2種類紹介します。 ネットにある画像を表示 以下の形式の Widget を配置することで、ネット上の画像を表示できます。 Image.network('画像のU...
スポンサーリンク
タイトルとURLをコピーしました