More than 1 year has passed since last update.

スマホアプリクロスプラットフォーム開発 in Flutter

Last updated at 2022-01-31Posted at 2022-01-31

Index

１．Flutterフレームワーク
２．AndroidStudioで開発できる
３．UIの記載はネストを多用する
４．UIとビジネスロジックを分けて書く
５．KotlinとSwiftによる書き分けが必要な場合がある
６．Dartプログラムのエントリーポイント
７．使用パッケージの宣言
８．ホットリロードで一回一回ビルドしなくてもいい
９．動作確認
１０．アプリ公開

１．Flutterフレームワーク

2018年12月にGoogleからリリースされた、モバイルアプリ開発用のフレームワーク。

Dart言語

従来ならば、AndroidならKotlin
iOSであればSwift
という、それぞれの言語を覚えなければいけないが

Flutterの場合は、DartというJavaライクな言語を覚えるだけで
両方の開発ができ、学習コストを抑えることができる。

２．AndroidStudioで開発できる

AndroidStudioのインストール

Flutterのインストール

３．UIの記載はネストを多用する

画面を構成するコンポーネントはWidgetというクラスが基底クラスにあり
各コンポーネントはWidgetを継承する。
Widgetを並べることで画面を作っていく。

コード

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

４．UIとビジネスロジックを分けて書く

BLoC（BusinessLogicComponent）というアーキテクチャを用いることで、UIとビジネスロジックを分けて書くことができるようになる

BLoCパターンを用いることにより、次のことができるようになる

・ソースファイルごとの責務を明確化し、ソースの見通しがよくなる
・イベントハンドラ（StreamBuilder）を使って、状態管理をできる

参考URL）長めだけどたぶんわかりやすいBLoCパターンの解説
https://qiita.com/kabochapo/items/8738223894fb74f952d3

５．KotlinとSwiftによる書き分けが必要な場合がある

UI部分、HTTP通信、内部ストレージへの保存などは一つのソースで書くことができるが
担当したプロダクトにおいてFirebaseとAzureNotificationHubsを利用したプッシュ通知をすることがあり、
Firebaseに端末を登録をするところまではDart記載で共通だが、
プッシュ通知の送信先を指示する部分であるAzureNotificationHubsへの端末識別情報の登録部分は、
Dartが対応していない部分であり、KotlinとSwiftで書き分ける必要がある。

６．Dartプログラムのエントリーポイント

以下のように、C言語などと同じで、main()から始まる

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @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'),
        ),
      ),
    );
  }
}

参考URL）
https://docs.flutter.dev/get-started/codelab

７．依存パッケージの宣言

pubspec.yamlという設定ファイルで、HTTP通信や内部ストレージアクセスなど、使用するパッケージを宣言する。
また、「version」でアプリバージョンを設定する

name: <project name>
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:       # Required for every Flutter project
    sdk: flutter # Required for every Flutter project

  http: '>=0.12.0 <0.13.0'
  cupertino_icons: ^1.0.2 # Only required if you use Cupertino (iOS style) icons

dev_dependencies:
  flutter_test:
    sdk: flutter # Required for a Flutter project that includes tests

flutter:

  uses-material-design: true # Required if you use the Material icon font

  assets:  # Lists assets, such as image files
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

  fonts:              # Required if your app uses custom fonts
    - family: Schyler
      fonts:
        - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
          style: italic
    - family: Trajan Pro
      fonts:
        - asset: fonts/TrajanPro.ttf
        - asset: fonts/TrajanPro_Bold.ttf
          weight: 700

参考URL）
https://docs.flutter.dev/development/tools/pubspec