Flutterの基礎

by

Flutterでよく使う機能

よく使うコマンド

コマンド説明
flutter runデバッグモードでアプリを実行
flutter run –releaseリリースモードでアプリを実行
flutter create “アプリ名”アプリのプロジェクトを作成する.作成されたアプリにはカウンタのサンプルが書かれている.
flutter devices接続されているデバイスのリストを表示
flutter pubパッケージ管理、VS codeのflutterプラグインを入れてあれば、自動でパッケージ管理をしてくれる
flutter doctorflutterの管理

デバッグモードでよく使う機能

デバッグモードで実行(flutter run)したときに、以下の機能が実行中のターミナルから使用できる

機能入力キー説明
Hot reloadrbuildメソッドの再実行. 見た目や位置の変更をしたときに使用する. 変更の確認を即座にできる. flutterで１番便利だと思う機能
Hot restartRアプリの再実行. Hot reloadでも更新できないときに使う. Hot reloadより更新に時間がかかるが、アプリを停止させて再実行するより高速. Hot reloadと共に便利だと思う機能
Quitqアプリを停止する
コマンドリストh全てのコマンドの簡単な説明を表示する
スクリーンショットsスクリーンショットを行う. 撮影した結果はPCのアプリのルートフォルダ直下に保存される.
位置の目安線の表示pwidgetなどの位置や範囲の線を表示する

Packageのインポート

  1. プロジェクトフォルダ直下にあるpubspec.yamlを編集する



    例としてflutter_blue_plusを追加
  2. flutter pubを実行(VS codeを使用していて、flutterプラグインを入れている場合は、pubspec.yamlの編集保存後自動で実行してくれる

  3. Dartファイルにimport文を書く
  4. カメラやbluetoothなどユーザーの使用許可が必要な機能を使用するときは、以下のファイルを編集する
Androidandroid/app/src/main/AndroidManifest.xml
iOSios/Runner/Info.plist

アプリの基本的な画面構成

基本的な画面構成にはMaterialAppとScaffoldを使用する.

  • MaterialAppはデバッグモードのときに右上にdebugと表示したり、webアプリケーションのタブに表示する文字や、ルーティングを行うために使用する.
  • Scaffoldはアプリ名を画面上に表示したりすることに使用する.下図の赤枠がScaffoldの範囲になる.


Scaffoldのよく使う引数

引数説明
appBar上図の紫枠. 画面の上端に表示する.
body上図の緑枠. 画面の中央に表示する.
bottomNavigationBar画面の下端に表示する
floatingActionButton上図の虫眼鏡アイコンのボタン. 画面上にボタンを配置する.
drawer左側から出てくるメニューなどを表示する.

Flutter(Dart)の用語と書き方

widget

アプリで実際に表示するパーツのことをwidgetという. flutterではwidgetを配置することで画面を構成する.

widgetの例

textメッセージを表示
columnwidgetを縦に並べる
Iconアイコンを表示
TextButtonボタンを表示

widgetのstate

flutterでは画面に動きをつけるために状態(state)を保存する機能がある. widgetにはstateを保存し利用できるStatefulWidgetとstateを利用できないStatelessWidgetがある.
基本的には動きのある画面を作る場合はStatefulWidgetを使用し、画面を更新する必要がない場合にはStatelessWidgetを使用する. ただしStatelessWidgetでもstreamを使用することで、更新を行うことができる.

stream

bluetoothのデータ受信時や一定時間で処理するなど特定のタイミングで処理をしたい場合には、streamを使用する.

関数

基本的な書き方

戻り値の型 関数名(引数){
処理の内容
}

例

void func(int a){
  print(a);
}

引数の種類と書き方

引数についての知識は基本的な機能を使用する際にも必要となる.例えばTextでは表示するメッセージの他に、名前付き引数で文字のサイズや色などを設定することになる.また必須引数はclassのコンストラクタによく使用される.

引数の種類宣言呼び出し
基本void func(int a){
print(a);
}		func(1)
オプション引数void func(int a, [int b = 2]){
print(a);
print(b);
}		func(1)または
func(1,3)
名前付き引数void func(int a, {int b = 2}){
print(a);
print(b);
}		func(1)または
func(1, b: 3);
必須引数void func(int a, {required int b}){
print(a);
print(b);
}		func(1, b: 3);
オプション引数

引数を[ ]で囲むことでオプション引数になる. オプション引数にすることで、関数を呼び出すときに値を指定しなくてもよくなる. 呼び出しの時に値を入れればその値になり、入れなければ宣言で設定した値になる.

名前付き引数

引数を{ }で囲むことで名前付き引数になる. 名前付き引数にすることで、関数を呼び出す時に明示的に引数名を指定して値を代入することになる. 名前付き引数はオプション引数のように値を入れなければ、宣言時に設定した値になる.

必須引数

名前付き引数の型の前にrequiredを入れることで必須引数になる. 呼び出すときは引数名を指定して値を入れなければならない. (値を入れないとエラーになる)

無名関数

Flutter(Dart)では引数に関数型を指定することができる. これにより関数に引数としての関数を渡すことができるが、渡す関数の名前をいちいち考えるのは大変なので、そのような場合には無名関数を使用する. 無名関数は以下のように宣言する.

無名関数の処理が既存の関数1つだけの場合(引数の型 引数)=>関数()
無名関数の中でいろいろな処理をする場合(引数の型 引数){
処理
}

このように無名関数では関数名を省略する.以下に使用例を示す.

void func({required Function func}){
  func(3);
}

func(
  func: (int a){
               print(a);
               print(a+1);
            }
);

null safety

flutter(Dart)では変数にnullを許容するか、禁止にするか指定することができる. 特に指定しなければ、変数はnullが入ることがない変数となる. nullを許容しないことで、変数の値がnullかどうかを判定する必要がなくなる.
実際にプログラミングをするときにはnullを許容したい場合がある. 例えば、変数のスコープの関係で先に変数名だけを宣言し、後で値を入れる場合に、とりあえず宣言した時にはnullを入れておく場合である. 特に変数にclassのインスタンスなどを後から入れる場合には、適当な初期値を入れておくことは困難である. また、widgetでもnullを許容する変数を引数としている場合がある.

書き方

null禁止int a = 1;
null許容int? a;
(null禁止の場合は宣言時に必ず初期値を代入しておく必要がある)

null許容とclass

null許容の変数でclassのインスタンスを利用する場合、その変数がnullなのか、値が入っており実態があるかどうかは大問題である. nullではそのクラスの変数やメソッドを利用できないからである. そのためnullかどうかの確認などを行う機能が備わっている. null許容の文字列変数を例として書き方を示す.

String? value;                         //変数の宣言

String a = value ?? "m";        //valueがnullならaの値を"m"にし、nullでないならaの値はvalueの値となる

print(value?.length);             //nullか判定してからアクセス

print(value!.length);              //nullではないことを明示する

コメントする