Flutter

正式な書類に基づきます.

設定

SDKは、ホームページから個別にダウンロードできます.
Android studioを使用する場合は、プラグインプロジェクトの作成時にSDKをインストールできます.(バージョンによって実行方法が異なります)
すべての進行はアンドロイドスタジオを利用して行われています.

New Project

ファイルには以下のように説明されています.

IDEを開き、「新規Fluterプロジェクトの作成」を選択します.

プロジェクトタイプとしてFluterアプリケーションを選択します.「次へ」をクリックします.

Fluter SDKパスがSDKの場所を指定していることを確認します(テキストフィールドが空の場合は、「SDKのインストール」を選択してください).

プロジェクト名(myappなど)を入力します.「次へ」をクリックします.

完了(Finish)

をクリックします.

Android StudioがSDKをインストールし、プロジェクトを作成するのを待っています.

フォルダ

プロジェクトの下のlibフォルダのmain.省道を使う.

Flutコードライブラリを格納するフォルダがlibフォルダです.
Fluterはこのファイルに基づいてアプリケーションを作成して実行します.

Hello World

テスト環境はAVD(Android Virtual Devices)、Pixel 2 API 28を使用した.
すぐに構築を開始すると、次の画面が表示されます.

AndroidはHelloWorldこれはちょっと気まずい
TextViewのパーツを真ん中に置きます.
~~\lib\main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

コードの説明

main.dartのmain()関数から始まります.

void main() => runApp(MyApp());「=>」は、関数の実装と返されるサムネイル表現です.(かっこと同じ)

runApp関数は、Widget Classをパラメータとして受け入れ、コンポーネントツリーを画面に表示する関数です.

class MyApp extends StatelessWidget情報を格納する必要のない部品をWidgetのタイプから継承します.

Widget build(BuildContext context)この関数に基づいて、コンポーネントを画面上で構築できます.

return MaterialApp()MaterialAppは、GoogleのMaterial Designを使用できる基本的なコンポーネントクラスです.

title: 'Welcome to Flutter'ファイルには次のように記述されています.あまり目立たない属性です.
A one-line description used by the device to identify the app for the user.
On Android the titles appear above the task manager's app snapshots which are displayed when the user presses the "recent apps"button.

home: Scaffold()homeプロパティは、画面に最初に表示されたルータです.
Scaffoldは、基本材料設計の視覚的レイアウト構造を実現する.
ホームはMaterialAppクラスの必須オプションです.

appBar: AppBar(title: const Text('Welcome to Flutter'), )アプリケーションの上部バーの名前を指定します.

body: const Center( child: Text('Hello World'), )画面のCenterにText(Hello World)が表示されます.

Widgetは

コードの説明部分ではいつもwidgetに言及していますが、Flutterでは、すべてのことがwidgetで始まっています.これはよくある内容です.
Flutterでは,Layoutや動作などが部品として扱われる.
書類にはUI를 선언하고 구성하는 방식と書いてあります.

Widgetタイプ

MySappクラスが各部品を継承していることがわかります.

StatelessWidget
ステータスを保存する必要のない静的コンポーネント
buildも最初だけ実行されます.
AndroidのImageViewやTextViewなどの静的コンテンツに使用

StatefulWidget
ユーザーが対話できるようにステータスを保存する必要があるコンポーネント
データを受け取るとリアルタイムになります.
最初の項目生成時に表示される+ボタンを押すと、数字が上がる場合に対応します.
setState()が発生するたびに再生成されるので、ダイナミックスクリーンを簡単に実現できます.

Widget Tree

サンプルコードでは、1つのコンポーネントに他の複数のコンポーネントを含めることもでき、この形状をコンポーネントツリーと呼ぶこともできます.
runApp()関数パラメータとして受信したMyAppをコンポーネントツリーのルートと呼ぶ.

Hello World構造

StatelessWidget

コンポーネントツリーのルートとしてStatelessWidgetを使用しており、簡単なテキストなので状態を保存する必要はありません.

MaterialApp

通常、複数の必須部品を包装するために使用される部品
WidgetAppに基づいて、AnimatedThemeやGridPaperなどのMateria設計に関連する機能が追加されました.

Scaffold

基本的なソリッド設計のビジュアルレイアウト構造を実装します.