macOS での Flutter 2.2 の使用 - iOS および Android アプリの開発 - 0 から 1 までのチュートリアル

使用後：ダーツはとても強力です！サーバー側、モバイルアプリ側、および Web 側のプログラミング言語の作成をサポートしています。構文はシンプルです。高レベルのオブジェクト指向プログラミング言語をマスターしている限り、Dart を学びに来てください。必ず習得します。すべて1時間以内に完了します！

1.フラッターをダウンロードする

直接ダウンロード、解凍する必要があります

https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.2.1-stable.zip

git経由

git clone https://github.com/flutter/flutter.git -b stable

環境変数を設定します。一度設定すると、ターミナル（ターミナル）を閉じた後、次回から設定する必要があるため、これは 1 回限りの設定です。
フラッターを解凍/クローンした後、中間のパスをディレクトリアドレスに変更します。

export PATH="$PATH:/Users/admin/Documents/flutter/bin"

2. フラッターのインストールと構成の全体的な検出は正しい

flutter doctor

macOS には Xcode と Android Studio という 2 つの統合開発ツールがインストールされている必要がありますが、flutter を使用して Web アプリケーションを開発する場合は Chrome ブラウザもインストールする必要がありますので、インストールされていない場合は必要に応じてインストールしてください。

3. 簡単な Flutter プログラムの例

flutter create testapp1

testapp1 はテストプロジェクトの名前です。小文字でなければなりません。そうでないとエラーが報告されます。
プロジェクトが作成されると、testapp1 ディレクトリーに次のようなファイル構造が表示されます。
ここに画像の説明を挿入

iOSはiOS側のプロジェクトを指します
android は Android 側のプロジェクトを表します
Web は Web 側の PC および H5 プロジェクトを意味します
pubspec.yaml は、フラッターのリソースと依存ライブラリの管理を表します。

つまり、flutter プロジェクトは 1 回開発され、3 つの端末で実行されます。
次に、cd testapp1ディレクトリの下でこのプロジェクトを実行します

flutter run

実行する電話機またはエミュレータを選択します。

iOS プロジェクトを実行する場合は、まず ios/Runner.xcworkspace プロジェクトを開き、実マシン/シミュレーターで実行するように署名を設定します。
Android プロジェクトを実行する場合は、まず Android プロジェクトを開いて、関連するパラメーターを設定します。

実機/シミュレーターでアプリを実行する手順については、Baidu に多数のチュートリアルがありますので、自分で検索してください。

4. 最も基本的かつ基本的な Flutter コードの書き方

Flutter ではすべてがウィジェット (コンポーネント) であるため、まず 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: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

プロジェクトを再実行して効果を確認します。コードリンク
ここに画像の説明を挿入

構造はとってもシンプル！

メイン関数、プログラムエントリー
Flutter アプリ自体は単なるウィジェットです
ほとんどのウィジェットには、build() 関数内のレイアウトとコンポーネントを返す build() 関数があります。
MaterialApp は、Google が提供するマテリアル UI ライブラリのコンポーネントです
インターフェイスに表示されるコンテンツは、Scaffold コンポーネントを通じてレイアウトされます。

この記事を読むと、Dart についての予備的な理解が得られます
https://flutter.dev/docs/get-started/codelab
レイアウト全体のツリー構造図
ここに画像の説明を挿入
レイアウトの方法:

Flutter のデフォルトのコンテナレイアウト。行と列がコンテナ内にネストされており、コンテナは引き続き行と列にネストできます。

5. フラッターの原理

ここに画像の説明を挿入
この写真のアドレス:ポータル

Flutter は Google がオープンソース化した UI フレームワークのセットであり、クロスプラットフォームです。つまり、iOS、Android、macOS、Linux などのプラットフォーム上でリリースして実行できます。もちろん、Huawei 紅蒙携帯電話の OS です。も可能です。

図に示すように、Flutter の上位 UI、アニメーション、描画、ジェスチャ、基本ライブラリ全体がすべて Flutter を使用して実装されており、コードは完全にオープンソースです。つまり、クリックするとソースコードを直接確認できます。フレームワークの実現におけるウィジェット上で。基礎となるエンジンは C/C++ を使用して実装されており、これについては何も言うことはありません。

重点：

毎日使うものについて
使用されるレイアウトはMaterialAppAndroid のようなネイティブスタイルです
使用されているレイアウトはCupertinoAppiOS 風のサウンドトラックスタイルです

たとえば、Flutter を初めて使用するブロガーは、次の図に示すように、アプリに似たグラフィックホームページを開発しました: iOS & Android & Web H5
ここに画像の説明を挿入

上記のコード
デモプロジェクトのダウンロード: https://github.com/VictorZhang2014/first_simple_flutter_project/tree/master

参考

1.公式チュートリアル macOS
2. DART プログラミング言語中国語チュートリアル
3. Flutter ウィジェットレイアウトの基本チュートリアル
4. Meituan Flutter の原理と実践