Flutterとは

### Flutterの特徴
Flutterはマルチプラットフォームのための開発環境
SDKにより専用のAPIを提供している
Androidで採用されているマテリアルデザインをベースに設計しているが、iOS用のクパティーノというUIフレームワークを用意している
開発言語はDart
プログラムをプラットフォームごとにネイティブコードにコンパイルする
IntelliJ(Android Studio)/Visual Studio Codeに対応

### Flutter開発に必要なもの
JDK
Dart
Flutter SDK
IntelliJ(Android Studio)/Visual Studio Code
Visual Studio
Xcode

$ java -version
openjdk version “18.0.2.1” 2022-08-18
OpenJDK Runtime Environment Homebrew (build 18.0.2.1+0)
OpenJDK 64-Bit Server VM Homebrew (build 18.0.2.1+0, mixed mode, sharing)

flutterをdownload
https://docs.flutter.dev/get-started/install

パスを通す
$ vi ~/.bash_profile
export PATH=$PATH:/Users/mac/flutter/flutter/bin
$ source ~/.bash_profile
$ flutter upgrade

intelliJ からdownload
https://www.jetbrains.com/ja-jp/idea/

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'hello, Flutter world!!',
        style: TextStyle(fontSize:32.0),
      ),
    );
  }
}

Flutterはwidgetという部品の組み合わせによって作成される
widget treeによって記述する

ウィジェットによって記述
mainはアプリ起動時に呼び出される関数

void main() {
  runApp(MyApp());
}

StatelessWidgetはステート(状態を表す値)を持たないwidgetのベースとなるクラス
StatelessWidgetかStatefulWidgetのいずれかを継承して作成する
MaterialAppというインスタンスが返されている

class ${className} extends StatelessWidget {
	
	@override
	Widget build(BuildContext context) {
		return MaterialApp(...略...),
	}
}

titleはアプリケーションのタイトル、homeがwidget
Textウィジェットを指定

    return const MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'hello, Flutter world!!',
        style: TextStyle(fontSize:32.0),
      ),
    );

### アプリの構造
– アプリケーションはmain関数として定義
– runApp関数では、StatelessWidget継承クラスのインスタンスを引数に指定
– StatelessWidget継承クラスにはbuildメソッドを用意する
– MaterialAppの引数homeに、実際にアプリ内に表示するwidgetを設定する

標準的なwidgetはwidget.dartというパッケージにまとめられている
material.dartとcupertino.dartが用意されている

ScaffoldとAppBar

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Flutter!"),
        ),
        body: Text(
          'hello, Flutter world!!',
          style: TextStyle(fontSize:32.0),
        ),
      ),
    );

Scaffoldは建築現場の足場
Scaffoldには基本的なデザインとレイアウトが組み込まれている
Scaffoldでは Scaffold(appBar:, body:)としてインスタンスを作成する

空白エリアの表示を担当するのがbody