Flutter基本構造(書き方)
今回はアプリの基本構造(書き方)について紹介します。
以下のコードを解説したいと思います。
import 'package:flutter/material.dart'
void main() {
runApp(MyApp());
}//起動時にmain関数呼び出し
//main関数からrunApp関数を呼び出すことで、MyAppが実行される。
class MyApp extends StatelessWidget {
@overrideWidget build(BuildContext context) {
return MaterialApp(home: Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: Center(
child: Text("Body"),
),
),
);
}
}//StatelessWidgetを継承したクラス
//build関数を用意し、MaterialAppインスタンスをreturnする
//homeに実際にアプリ内に表示するWidgetを設定する
アプリの完成イメージ
全体の大まかな流れ
1. 起動時に最初に呼び出されるのは、main関数。
2. main関数からrunApp関数を呼び出すことで、アプリが実行される。
3. runApp関数に引数で指定した、StatelessWidgetを継承したクラスがアプリ本体のUIとなる。
4. StatelessWidgetを継承したクラスには、build関数を用意し、MaterialAppインスタンスをreturnする。
5. MaterialAppに用意されている、homeに実際にアプリ内に表示するWidgetを設定する。
1.最初に呼び出されるのは、main関数。
最初にimportしている「material.dart」は、マテリアルデザインのUIがまとめられたパッケージです。次に、main関数の中でアプリを実行する為のrunApp関数を呼び出します。※runApp関数は引数必須の為、カッコの中に実行するクラス入れないとビルドエラーになります。
import 'package:flutter/material.dart';
void main() {
runApp();
}
2. main関数からrunApp関数を呼び出しアプリが実行される。3. StatelessWidgetを継承したクラスがアプリ本体のUIとなる。
StatelessWidgetを継承したMyAppクラスを作成し、runApp引数に設定します。
ここで指定したMyAppクラスがアプリ本体となります。今回はMyAppとしましたが、クラス名は何でも大丈夫ですが基本的にはMyAppです。※StatelessWidgetはbuild関数が必須の為、この時点もまだビルドエラーになります。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
}
4. build関数を用意し、MaterialAppインスタンスをreturnする。appbarとbodyの部分
StatelessWidetに必要なbuild関数をオーバーライドし、
MaterialAppインスタンスをreturnします。
この時点でビルドエラーは消えますが、
肝心のUI部分を記述していない状態です。
Widget build(BuildContext context) {
return MaterialApp();
が骨格となる枠を作ると言うことですね。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp();
}
}
5. homeに実際にアプリ内に表示するWidgetを設定する。
MaterialAppに用意されている、「home」に実際にアプリ内に表示するWidgetを設定します。今回はScaffoldという、一般的なデザインの土台となるWidgetを使用しています。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: Center(
child: Text("Body"),
),
),
);
}
}
Flutterでの基本部品
Flutterアプリでは、アプリケーション全体管理するための「MaterialApp」と画面全体を構成するための「Scaffold」という部品が用意されています。
MaterialAppは、Flutterアプリケーションの全体を管理するものです。主に全体の状態監視、そして、全体にかかわるプロパティの管理しています。
Scaffoldは「足場」という意味になりますが、画面全体を管理する部品になります。
実際のアプリ作り
余談
オブジェクト指向
初心でも理解しやすいように解説すると。。。。
・クラス
・インスタンス
・オブジェクト
の3つの用語が頻繁に登場します。この3つは、とても大事です。
オーバーライド
オーバーライドは一言で言うと「子クラスで親クラスのメソッドを再定義することなんだな～」と、お考えください。
書き換えた後のプログラムを実行すると、画面には
ピヨシウム光線！ と表示されます。
https://wa3.i-3-i.info/word138.html
//ピヨ太ママクラス
class PiyotaMama{
public void hissatuwaza(){
System.out.println("ぴよぴよ波！");
}
}//ピヨ太君クラス
class Piyota extends PiyotaMama{
public void hissatuwaza(){
System.out.println("ピヨシウム光線！");
}
}//主処理
public class test{
public static void main(String[] args){
//ピヨ太君クラスのインスタンス「piyota」を生成
Piyota piyota = new Piyota();//必殺技発射！
piyota.hissatuwaza();
}
}
