著者：エリック・グラント

システムとアプリケーションの複雑さが増すにつれて、「一度書けばどこでも実行できる」ことが、ますます多くの開発ツールの究極の目標になり始めています。

これに基づいて、Googleは2017 I / O ConferenceでモバイルUIフレームワークFlutterをリリースしました。これにより、開発者はiOSおよびAndroidシステムで高品質のネイティブユーザーインターフェイスをすばやく構築できます。同時に、AppleはWWDC 2019で、Appleの主要なオペレーティングシステムにまたがることができるUIフレームワークであるSwiftUIを開発者に提供しました。

では、この傾向の下で、Flutterのようなツールは本当に新世代のモバイル開発の未来なのでしょうか？

数年前、私はJavaとObjective-Cを使用してAndroidとiOSの開発に手を出しました。約1ヶ月勉強した後、深く勉強しないことにしました。深く入り込んだ状態が見当たらない。

しかし最近、私はFlutterについて学び、モバイルアプリケーション開発の方向で再試行することにしました。マルチプラットフォームアプリケーションの開発が楽しくなるので、すぐに気に入りました。それについて学んだので、私はそれを使ってアプリとライブラリを作成しました。フラッターは非常に有望なステップのようです。私がこれを信じる理由をいくつか説明したいと思います。

1.Dartが提供するテクニカルサポート

Flutterは、Googleが開発したDart言語を使用しています。以前にJavaを使用したことがある場合は、Dartの構文が非常に似ているため、慣れているはずです。しかし、構文は別として、DartはJavaとは大きく異なります。

逸脱しないように、ダートについて詳しく説明するつもりはありませんが、私の意見では、ダートの最も有用な機能について説明したいと思います。この関数は非同期操作です。Dartは非同期操作をサポートするだけでなく、非常に簡単にします。

IOまたはその他の時間のかかる操作（データベースのクエリなど）を実行している場合は、すべてのFlutterアプリケーションで非同期操作を使用できます。非同期操作がない場合、時間のかかる操作を行うと、操作が完了するまでプログラムがフリーズします。これを防ぐために、Dartはasyncキーワードとawaitキーワードを提供して、これらの長い操作の完了を待っている間、プログラムが実行を継続できるようにします。

いくつかの例を見てみましょう。1つは非同期操作あり、もう1つは非同期操作なしです。

// Without asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

longOperation() {
    Duration delay = Duration(seconds: 3);
    Future.delayed(delay);
    print('Waited 3 seconds to print this and blocked execution.');
}

printSomething() {
    print('That sure took a while!');
}

出力t：

Waited 3 seconds to print this and blocked execution.
That sure took a while!

これは理想的ではありません。長時間の操作で動かなくなってしまうアプリは誰も使いたくない。それでは、少し変更して、asyncキーワードとawaitキーワードを使用しましょう。

// With asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

Future<void> longOperation() async {
    var retVal = await runLongOperation();

    print(retVal);
}

const retString = 'Waited 3 seconds to return this without blocking execution.';
Duration delay = Duration(seconds: 3);

Future<String> runLongOperation() => Future.delayed(delay, () => retString);

printSomething() {
    print('I printed right away!');
}

そして再び出力します：

I printed right away!
Waited 3 seconds to return this without blocking execution.

非同期操作では、完了までに時間がかかるコードを実行しますが、残りのコードの実行が妨げられることはありません。

2.コードを1回だけ記述し、AndroidとiOSの両方で実行します

AndroidとiOSで異なるコードベースを使用する必要があることを考えると、モバイルアプリケーションの開発には時間がかかる場合があります。FlutterのようなSDKを使用しない限り、両方のオペレーティングシステムに適応できるコードベースがあります。それだけでなく、完全にネイティブに実行することもできます。これは、ページの閲覧やナビゲーションなどがさまざまなオペレーティングシステムで完全に機能することを意味します。

一言で言えば、デバイスまたはシミュレーターを実行している限り、Flutterは、テスト用のアプリケーションを構築して実行するプロセスを指のように簡単にすることができます。

3、UI開発

UI開発は、私が期待していないことの1つです。私はバックエンド開発者なので、それに大きく依存するものに関しては、単純なものが必要です。これが私の目にフラッターが輝いているところです。

UIは、さまざまなウィジェットを組み合わせて、アプリの外観に合わせて変更することで作成されます。これらのウィジェットの表示方法はほぼ完全に制御できるため、最終的には常に必要なものを取得できます。UIをレイアウトするには、行、列、コンテナーなどのウィジェットを使用できます。コンテンツには、TextやRaisedButtonなどがあります。これらはFlutterが提供するウィジェットのほんの一部であり、他にもたくさんあります。これらのウィジェットを使用して、非常に単純なUIを構築できます。

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Flutter App'),
            centerTitle: true,
            elevation: 0,
        ),
        body: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Container(
                            child: Text('Some text'),
                        ),
                        Container(
                            child: RaisedButton(
                                onPressed: () {
                                    // Do something on press
                                },
                                child: Text('PRESS ME'),
                            ),
                        ),
                    ],
                ),
            ],
        ),
    );
}

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-gcd7ipPE-1594103092983）（https://upload-images.jianshu.io/ upload_images / 22436740-905dc24af6484113？imageMogr2 / auto-orient / strip％7CimageView2 / 2 / w / 1240）]

Flutterは、さまざまな小道具を持ったマジシャンのようなもので、アプリのテーマを簡単に作成できます。フォントや色を手動で変更したり、すべてを1つずつ設定したりできますが、時間がかかりすぎます。代わりに、FlutterはThemeDataと呼ばれるものを提供します。これにより、色、フォント、入力フィールドなどの値を設定できます。この機能は、アプリケーションの外観の一貫性を維持するのに優れています。

theme: ThemeData(
    brightness: Brightness.dark,
    canvasColor: Colors.grey[900],
    primarySwatch: Colors.teal,
    primaryColor: Colors.teal[500],
    fontFamily: 'Helvetica',
    primaryTextTheme: Typography.whiteCupertino.copyWith(
        display4: TextStyle(
            color: Colors.white,
            fontSize: 36,
        ),
    ),
),

このThemeDataを使用して、アプリケーションの色、フォントファミリ、およびいくつかのテキストスタイルを設定します。テキストスタイル以外はすべて、アプリ全体に自動的に適用されます。各ウィジェットのテキストスタイルは手動で1つずつ設定する必要がありますが、これは非常に簡単です。

child: Text(
    'Some text',
    style: Theme.of(context).primaryTextTheme.display4,
),

効率をさらに向上させるために、Flutterはアプリをホットリロードできるため、UIを変更するたびにアプリを再度開く必要はありません。今すぐ変更を加えて保存し、変更の効果を約1秒で確認できます。

第四に、図書館

Flutterは、箱から出してすぐに多くの強力な機能を提供しますが、さらに多くの機能が必要になる場合があります。DartとFlutterで利用できるライブラリが多数あることを考えると、これはまったく問題ではありません。アプリでの広告に興味がありますか？このためのライブラリがあります。新しいウィジェットが必要ですか？このためのライブラリがあります。

自分で行う場合は、独自のライブラリを作成して、コミュニティの他のユーザーとすぐに共有できます。プロジェクトへのライブラリの追加は非常に簡単で、pubspec.yamlファイルにコード行を追加することで実行できます。たとえば、sqfliteライブラリを追加する場合：

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^1.0.0

それをファイルに追加した後、flutterパッケージgetを実行すると、それだけです。さまざまなライブラリにより、Flutterアプリケーションの開発が簡単になり、開発プロセスの時間を大幅に節約できます。

5、バックエンド開発

現在、ほとんどのアプリはある種のデータに依存しており、後で表示して使用できるように、このデータはすべてどこかに保存する必要があります。したがって、アプリケーションを作成するための新しいSDK（Flutterなど）を探すときは、このことを覚えておくことが非常に重要です。

繰り返しになりますが、FlutterアプリはDartを使用して作成されており、Dartはバックエンド開発に非常に優れています。この記事では、多くのシンプルで簡単な関数について説明しましたが、DartとFlutterのバックエンド開発も例外ではありません。初心者でもエキスパートでも、データ駆動型アプリの作成は非常に簡単ですが、この単純さは品質と同じではありません。

ライブラリを使用して、選択したデータベースを使用できます。sqfliteライブラリを使用すると、SQLiteデータベースを非常にすばやく起動して実行できます。ワンピースモデルのおかげで、毎回オブジェクトを再作成しなくても、ほぼどこからでもデータベースにアクセスしてクエリを実行できます。

class DBProvider {
    // Singleton
    DBProvider._();

    // Static object to provide us access from practically anywhere
    static final DBProvider db = DBProvider._();
    Database _database;

    Future<Database> get database async {
        if (_database != null) {
            return _database;
        }

        _database = await initDB();
        return _database;
    }

    initDB() async {
        // Retrieve your app's directory, then create a path to a database for your app.
        Directory documentsDir = await getApplicationDocumentsDirectory();
        String path = join(documentsDir.path, 'money_clip.db');

        return await openDatabase(path, version: 1, onOpen: (db) async {
            // Do something when the database is opened
        }, onCreate: (Database db, int version) async {
            // Do something, such as creating tables, when the database is first created.
            // If the database already exists, this will not be called.
        }
    }
}

データベースからデータを取得した後、モデルを使用してデータをオブジェクトに変換できます。または、オブジェクトをデータベースに保存する場合は、同じモデルを使用してオブジェクトをJSONに変換できます。

class User {
    int id;
    String name;

    User({
        this.id,
        this.name,
    });

    factory User.fromJson(Map<String, dynamic> json) => new User(
        id: json['id'],
        name: json['name'],
    );

    Map<String, dynamic> toJson() => {
        'id': id,
        'name': name,
    };
}

ユーザーに表示する方法がない場合、データはあまり役に立ちません。これは、FlutterがFutureBuilderやStreamBuilderなどのウィジェットでステージに登場するときです。Flutter、SQLite、およびその他のテクノロジーを使用してデータ駆動型アプリを作成し、理解を深めることに興味がある場合は、次の記事を確認することをお勧めします。

「FlutterでのStreams、BLoC、およびSQLiteの使用」：Flutterでデータを処理する場合、Streams、BLoC、およびSQLiteは適切な組み合わせです。

6、いくつかの最終的な考え

Flutterを使用すると、ほぼ無限の可能性があるため、巨大なアプリでも簡単に作成できます。モバイルアプリの開発を行っていて、Flutterを試したことがない場合は、ぜひ試してみることを強くお勧めします。あなたもきっと気に入ると思います。Flutterを数ヶ月使ってみて、これがモバイル開発の未来と言えると思います。未来を数えることができないなら、これは間違いなく正しい方向への一歩です。

最終

ここでは、Android学習PDF +アーキテクチャビデオ+インタビュードキュメント+ソースノート、高度なアーキテクチャテクノロジーの高度なマインドマップ、Android開発のインタビューの特別な資料、複数の大物によって収集および整理された高度な高度なアーキテクチャの資料も共有します。

これらは私が暇なときに何度も何度も読む素晴らしい資料です。誰もが知識を習得し、原則を理解するのを効果的に助けることができます。もちろん、脱落をチェックして競争力を高めるためにも使用できます。

あなたがそれを必要とするならば、あなたはそれをここで手に入れることができます

この記事が気に入ったら、ちょっといいねを言ったり、コメント欄にメッセージを残したり、転送してサポートしたりしてください〜

モバイルアプリ開発の未来：Flutter