Flutterで始めるはじめてのモバイルアプリ開発

［表紙］Flutterで始めるはじめてのモバイルアプリ開発

紙版発売

B5変形判／328ページ

定価3,080円（本体2,800円＋税10%）

ISBN 978-4-297-14639-9

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

はじめてモバイルアプリを開発する人向けに，「Flutter（フラッター）」というフレームワークを使ってアプリを開発する方法を解説します。

一般的にスマートフォンなどのモバイルアプリは，iOSアプリはSwift，AndroidはKotlinというプログラミング言語を使って開発しますが，Flutterを使えばDartというプログラミング言語だけを使ってiOS/Android両方のアプリを開発できます。

作って動かす楽しさを感じながらFlutterでのアプリ開発の基本を身につけることを念頭におき，サンプルアプリを作りながらプログラミング言語の文法やフレームワークの使い方などを学べる構成になっています。環境構築や操作でつまづかないように，画面のスクリーンショットやサンプルコードを多く掲載しています。さらに，そのまま動くサンプルプログラムを本書のサポートページにてダウンロード提供します。

初学者が途中で挫折せずに初のアプリ開発を完成できるまで導きます。

こんな方におすすめ

  • モバイルアプリ開発初心者（プログラミングの基礎を習得していること）
  • モバイルアプリ開発をしたいWebアプリ開発経験者

目次

第1章　Flutterでアプリ開発を学ぶにあたって

  • 1.1　Flutterとは
  • 1.2　Flutterの特徴
    • 1.2.1　クロスプラットフォーム開発
    • 1.2.2　宣言的UI
    • 1.2.3　ホットリロード
  • 1.3　本書の内容について
    • 1.3.1　各章の概要
    • 1.3.2　対象読者
    • 1.3.3　本書が前提とする環境

第2章　Flutterの開発環境の構築・準備

  • 2.1　本章で解説すること
  • 2.2　SDKのインストールと開発環境の設定
    • 2.2.1　Flutter SDKをインストールする
    • 2.2.2　flutterコマンドを使えるようにする
    • 2.2.3　必要な環境が設定ができているかをチェックする
  • 2.3　Android Studioのインストール／セットアップ
    • 2.3.1　Android Studioをダウンロード／インストールする
    • 2.3.2　Android Studioの初期設定を行う
    • 2.3.3　FlutterプラグインとDartプラグインをインストールする
  • 2.4　Xcodeのインストール
    • 2.4.1　Xcodeをダウンロード／インストールする
    • 2.4.2　Xcodeのライセンスに同意する
    • 2.4.3　CocoaPodsをインストールする
  • 2.5　Flutterプロジェクトの作成とファイル構成
    • 2.5.1　Android Studioで作成する方法
    • 2.5.2　ターミナルで作成する方法
    • 2.5.3　Flutterのファイル構成
  • 2.6　Flutterプロジェクトの開き方
    • 2.6.1　作成したプロジェクトを開く
    • 2.6.2　外部から入手したプロジェクトを開く
  • 2.7　Androidエミュレータの起動方法
    • 2.7.1　事前準備を行う（Launch in a tool windowの解除）
    • 2.7.2　エミュレータを用意する
    • 2.7.3　エミュレータを起動する
  • 2.8　iOSシミュレータの起動方法
  • 2.9　VS Codeで開発する方法
    • 2.9.1　Flutterプラグインをインストールする
    • 2.9.2　Androidライセンスに同意する
    • 2.9.3　VS Codeが認識されているか確認する
  • 2.10　ブレークポイントとホットリロード
    • 2.10.1　ブレークポイントを設定する
    • 2.10.2　ブレークポイントを使ってデバッグする
    • 2.10.3　ホットリロードを使う
    • 2.10.4　本書を読み進めるにあたって

第3章　Dartの文法

  • 3.1　DartPad
    • 3.1.1　DartPadの使い方
    • 3.1.2　本書のサンプルコードを実行する場合の注意点
  • 3.2　Dartとは
  • 3.3　変数の宣言
    • 3.3.1　変数の宣言と値の代入
    • 3.3.2　型推論
    • 3.3.3　動的な型
    • 3.3.4　コンパイル時定数
  • 3.4　基本的なデータ型
    • 3.4.1　int，double（数値型）
    • 3.4.2　String（文字列型）
    • 3.4.3　bool（真偽値型）
    • 3.4.4　List（配列）
    • 3.4.5　Map（Key/Valueペア）
  • 3.5　文字列結合と変数展開
  • 3.6　演算子（Operators）
    • 3.6.1　算術演算子（Arithmetic operators）
    • 3.6.2　複合代入演算子（Compound assignment operators）
    • 3.6.3　等価演算子，関係演算子（Equality and relational operators）
  • 3.7　制御構文
    • 3.7.1　条件分岐if-else文
    • 3.7.2　条件分岐switch文
    • 3.7.3　繰り返しwhile文
    • 3.7.4　繰り返しfor文
  • 3.8　Null Safety
  • 3.9　関数
    • 3.9.1　引数や返り値のない関数の定義と呼び出し
    • 3.9.2　引数の定義
    • 3.9.3　返り値の定義
  • 3.10　クラスと継承
    • 3.10.1　クラスの定義
    • 3.10.2　変数を持つクラスの定義，インスタンスの生成
    • 3.10.3　クラス内関数（メソッド）の定義
    • 3.10.4　クラスの継承
  • 3.11　変数や関数の可視性
  • 3.12　例外処理
    • 3.12.1　例外処理try-catch文
    • 3.12.2　例外処理try-catch-finally文

第4章　Flutterウィジェットの基本

  • 4.1　ウィジェット
  • 4.2　Flutterアプリの基本構造
    • 4.2.1　Flutterのサンプルアプリのコードを見てみる
    • 4.2.2　main関数
    • 4.2.3　StatelessWidget
    • 4.2.4　StatefulWidget
    • 4.2.5　MaterialApp
    • 4.2.6　ScaffoldとAppBar
  • 4.3　UI関連のウィジェット
    • 4.3.1　Textウィジェット
    • 4.3.2　TextStyleクラス
    • 4.3.3　Iconウィジェット
    • 4.3.4　Imageウィジェット
    • 4.3.5　FloatingActionButtonウィジェット（FAB）
  • 4.4　サンプルアプリのコードの解説
    • 4.4.1　自動生成されたmain.dartを読み解く
  • 4.5　イベントを発生させるためのウィジェット
    • 4.5.1　TextButtonウィジェット
    • 4.5.2　ElevatedButtonウィジェット
    • 4.5.3　OutlinedButtonウィジェット
    • 4.5.4　IconButtonウィジェット
  • 4.6　レイアウト関連のウィジェット
    • 4.6.1　Containerウィジェット
    • 4.6.2　Colorsクラス，Colorクラス
    • 4.6.3　EdgeInsetsクラス
    • 4.6.4　Centerウィジェット
    • 4.6.5　Columnウィジェット
    • 4.6.6　Rowウィジェット
    • 4.6.7　ColumnとRowの位置ぞろえ
    • 4.6.8　SingleChildScrollViewウィジェット
    • 4.6.9　ListViewウィジェット
    • 4.6.10　GridViewウィジェット
  • 4.7　1画面だけのサンプルアプリの作成
    • 4.7.1　基礎となるUIレイアウトを実装する
    • 4.7.2　①各ボタンをタップしたときの処理を実装する
    • 4.7.3　②コンポーネントの間隔を調整する
    • 4.7.4　③ボタンの角丸を実装する

第5章　テキスト入力と画像の表示

  • 5.1　State
  • 5.2　状態に関連するウィジェット
    • 5.2.1　StatelessWidget（おさらい）
    • 5.2.2　StatefulWidget（おさらい）
  • 5.3　テキスト入力関連のウィジェット
    • 5.3.1　TextFieldウィジェット
    • 5.3.2　TextEditingControllerクラス
    • 5.3.3　ListTileウィジェット
    • 5.3.4　ListTileとListViewでリスト一覧を作る
  • 5.4　外部ファイルのインポート方法と画像の表示方法
    • 5.4.1　Flutterプロジェクトにassetsディレクトリを作成する
    • 5.4.2　assetsディレクトリに画像ファイルを追加する
    • 5.4.3　画像ファイルを読み込む
    • 5.4.4　画像を表示させる
  • 5.5　ボタンやテキスト入力を利用したサンプルアプリの作成
    • 5.5.1　UIレイアウトを実装する
    • 5.5.2　Todoカードを実装する
    • 5.5.3　テキストフィールドを実装する
    • 5.5.4　諸処の調整と修正を行う
    • 5.5.5　カード，テキストフィールドの装飾・間隔調整を行う
    • 5.5.6　Todo作成処理を関数化する
    • 5.5.7　完了機能，削除機能を追加する

第6章　クラスの作り方

  • 6.1　クラスとは
    • 6.1.1　新しいクラスを作る目的
  • 6.2　クラスとコンストラクタの定義のしかた
    • 6.2.1　新しいdartファイルを作成する
    • 6.2.2　クラスとコンストラクタを定義する
    • 6.2.3　作成したファイルやクラスを呼び出す
    • 6.2.4　その他のコンストラクタの書き方
  • 6.3　継承
    • 6.3.1　クラスを継承して新たなクラスを定義する
  • 6.4　カスタムウィジェットを作成する方法（StatelessWidget）
    • 6.4.1　カスタムウィジェットを作成する
    • 6.4.2　カスタムウィジェットを使用する
    • 6.4.3　必須プロパティを作成する
    • 6.4.4　値の設定が省略できるプロパティを作成する
  • 6.5　カスタムウィジェットを作成する方法（StatefulWidget）
    • 6.5.1　カスタムウィジェットを作成する
    • 6.5.2　カスタムウィジェットを使用する
    • 6.5.3　プロパティを作成する
    • 6.5.4　関数を受け渡せるプロパティを作成する
  • 6.6　Todoアプリに新しいウィジェットを作成してコードを分割する
    • 6.6.1　Todoカードをカスタムウィジェット化する
    • 6.6.2　テキストフィールドをカスタムウィジェット化する
    • 6.6.3　分割後のTodoアプリ

第7章　アプリケーションの画面遷移

  • 7.1　アプリの画面構成と遷移
    • 7.1.1　Flutterにおける画面遷移のしくみ
    • 7.1.2　Navigatorを使って画面遷移させる
    • 7.1.3　ルーティングを使って画面遷移させる
  • 7.2　定数クラスによるルーティングの管理
    • 7.2.1　定数を宣言する
    • 7.2.2　定数クラスを定義する
    • 7.2.3　ルーティングを定数クラスで管理する
  • 7.3　ページ遷移やナビゲーション関連のウィジェット
    • 7.3.1　BottomNavigationBarウィジェット
    • 7.3.2　TabBarウィジェットとTabBarViewウィジェット
  • 7.4　画面遷移を伴うアプリの作成
    • 7.4.1　ルーティングのパスを設定する
    • 7.4.2　Taskオブジェクトを作成する
    • 7.4.3　タスクを記録するためのクラスを作成する
    • 7.4.4　各画面のクラスを作成する
    • 7.4.5　main.dartを作成する
    • 7.4.6　アプリを動作させてみる

第8章　各プラットフォームに対応させる

  • 8.1　プラットフォーム対応とは
  • 8.2　サポートする端末の向きを指定する方法
    • 8.2.1　端末の向きを表す用語
    • Column　端末回転をテストするときの注意点
    • 8.2.2　端末の向きを指定する
  • 8.3　端末のプラットフォームの違いに対応する方法
    • 8.3.1　端末のプラットフォーム情報を取得する
    • 8.3.2　AndroidかiOSかを判定してウィジェットを出し分ける
  • 8.4　端末の画面サイズの違いに対応する方法
    • 8.4.1　なぜ画面の横幅と高さが必要なのか？
    • 8.4.2　MediaQueryを使って画面サイズを取得する
    • 8.4.3　LayoutBuilderを使って相対的にウィジェットのサイズを調整する
  • 8.5　Cupertinoウィジェット
    • 8.5.1　CupertinoPageScaffold，CupertinoNavigationBar
    • 8.5.2　CupertinoIconsクラス
    • 8.5.3　CupertinoAppウィジェット
    • 8.5.4　SafeAreaウィジェット
    • 8.5.5　CupertinoTextFieldウィジェット
    • 8.5.6　CupertinoButtonウィジェット
    • 8.5.7　Switchウィジェット，CupertinoSwitchウィジェット
  • 8.6　OS別にUIを切り替えるテクニック
    • 8.6.1　ウィジェットを変数に代入する
    • 8.6.2　OS別にUIを切り替える
  • 8.7　Android/iOSに対応したアプリの作成
    • 8.7.1　セーフエリアに対応する
    • 8.7.2　新規作成ボタンをナビゲーションバーに設置する
    • 8.7.3　プッシュ遷移からモーダル遷移に変更する
    • 8.7.4　カードを画面幅に応じたサイズで表示させる

第9章　アプリのリリース

  • 9.1　アプリをリリースするために
    • 9.1.1　iOSアプリを審査に出すための条件
  • 9.2　リリース前に実施すべきこと
    • 9.2.1　スプラッシュ画面（起動時画面）の作成
    • 9.2.2　アプリ名，アプリアイコン画像の設定
    • 9.2.3　App IDの登録
    • 9.2.4　アプリのメタデータの登録
  • 9.3　アプリのリリース
    • 9.3.1　App Store Connectにアップロードする
    • 9.3.2　アプリのビルドと審査

著者プロフィール

Tamappe（たまっぺ）

モバイルアプリエンジニアとして10年以上の経験を持つ。本書執筆時点では，LINEヤフー株式会社に所属。2014年よりiOSアプリの開発に従事し，2018年からはAndroidアプリ開発にも携わる。Flutterとの出会いは2018年で，現在は社内向けSDKの開発にも関わるなど，幅広いモバイル技術に対応。趣味はシミュレーションゲームや筋トレ，技術書の読書。