【Flutter】初めてのクロスプラットフォームアプリ開発! iOS・Androidアプリ開発入門

【Flutter】初めてのクロスプラットフォームアプリ開発! iOS・Androidアプリ開発入門

Flutterの開発環境構築がまだの方はこちら

「Flutterの開発環境構築が終わったからとりあえず何か簡単なアプリを作ってみたい」

「実際にアプリを開発しながらWidgetに触れてみたい」

このような方におすすめです。

本記事では、Flutter未経験でもできるシンプルな「さいころアプリ」をiOS、Android向けに開発していきます。また、本記事では記事を読みやすくするために各パートの解説を簡潔にし、代わりに詳細リンクを各パートごとに載せてあります。

ティファ

本記事を通して上動画のさいころアプリを開発していくよ!

目次

Flutterでアプリ開発を始める前に「Widget」を理解する

Widget1
Widgetを理解する
  • Widgetとは、FlutterアプリのUIを構築しているパーツ
  • FlutterのUIはWidgetがツリー状(Widgetツリー)に組み合わさって構築されている
  • Widgetは「StatelessWidget」または「StatefulWidget」のどちらかに分類される
  • Widgetはクラスをインスタンス化したオブジェクト

Flutterでアプリ開発をする上で、まず初めに知っておきたいのが「Widget」です。

Widgetとは、FlutterアプリのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widgetツリー)に組み合わさって構築されています。

Widgetには「StatelessWidget」と「StatefulWidget」の2種類ある

  • StatelessWidgetとは、状態がずっと変化しないWidgetのこと
  • StatefulWidgetとは、ユーザーによる操作やデータを受け取った際などに状態が変化するWidgetのこと

Flutterで使用されているWidgetは「StatelessWidget」または「StatefulWidget」のどちらかに分類されます。

ティファ

今回作るアプリではサイコロ画像が変化するので、自作のStatefulWidgetを作っていきます!

Widgetはクラスをインスタンス化したオブジェクト

FlutterではDart言語が使用されていて、Widgetはクラスをインスタンス化したオブジェクトです。よって、Widgetはプロパティ、メソッド、コンストラクタで構成されており、Dart言語のクラス同様に扱うことができます。

ティファ

Flutterでアプリ開発をするならDart言語の基礎を先に学習しておくのがおすすめだよ!

Flutterアプリ開発の下準備:Android Studioで開発

Flutterの環境構築をまだ終えてない方はこちらの記事でFlutterの環境構築ができます。

まずはFlutterの新規プロジェクトを作成して「iOS Simulator」と「Android Emulator」の両方のVM(Virtual Machine)を起動させます。

ティファ

本記事ではAndroid Studioでアプリ開発を行なっていますが、別のIDEでも同様にアプリ開発が可能です。

FlutterでシンプルなiOS、Androidアプリを作る:さいころアプリ

今回開発するアプリは、ボタンを押すとランダムなさいころの目が表示される「さいころアプリ」です。とてもシンプルですが、StatefulWidgetの定義の仕方、libraryの導入方法などが学べます。

本当に1からFlutterアプリ開発の仕方を解説していくので、Flutterの新規プロジェクトを作成したら、デフォルトで書かれている全てのコードを消去してください。

Flutterアプリ開発

今回のアプリ開発の工程

ティファ

それでは、Flutterでさいころアプリを実際に開発していきましょう!

その1:material libraryのパッケージを導入する

Flutterアプリ開発1

FlutterアプリのUIはWidgetで構築されており、Widgetを使用するにパッケージを導入する必要があります。

Flutterのコアとなるパッケージには、Google推奨のマテリアルデザインを実装したWidgetが使用できる「material library」とAppleの「cupertino library」があります。また、外部パッケージを導入することでより様々なWidgetを使用できます。

ティファ

今回はmaterial libraryのWidgetだけ使用していくよ!

material libraryの導入手順

STEP
material library導入
material library公式ページ
//material libraryの導入コード
import 'package:flutter/material.dart';

material libraryを導入するには、まず上画像にある赤枠のコードをコピーします。

ティファ

今回はFlutterを学ぶためにコードを消してしまったけど、デフォルトでmaterial libraryは導入されているよ!

STEP
Flutterアプリ開発1

コピーしたコードを「main.dart」の1行目にペーストします。

ティファ

これでmaterial libraryの導入完了だよ!

その2:main関数・runApp関数の役割を理解する

main関数とは、プログラムを実行した際に最初に呼び出される関数で、main関数に定義されたプログラムが実行されます。

runApp関数を使えば、引数として代入されたWidgetをWidgetツリーのroot(ルート)としてプログラムを実行できます。

import 'package:flutter/material.dart';

void main(){
  runApp(MyWidget()); //MyWidget()にrootにしたいWidgetを代入する
}
ティファ

main関数とrunApp関数はFlutterでアプリ開発をする上で重要な役割をしているからしっかり理解しておこう!

runApp関数の引数に自作の「StatefulWidget」を代入

今回はUIが変化する「さいころアプリ」を作るので、StatefulWidgetを使って自作のWidgetを作っていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //runApp関数に自分で作った「MyApp」を代入
}

//Widgetを自分で作る
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
ティファ

自作のStatefulWidgetに「MyApp」って名前を定義してrunApp関数に代入しているよ!

その3:アプリのメインプログラムを「StatefulWidget」で作る

今回使用するWidget
  • Scaffold
  • AppBar
  • Column
  • TextButton
  • Text
  • Expanded
  • Container
  • Image
今回使用するDart library
  • dart:math library
ティファ

開発手順をコードの一部を抽出しながら説明していくので、本記事の最後にある完成したコードと比較しながら読んでみてください!

MaterialApp Widget」を実装する

MaterialApp(
  home: MyWidget(),
)

material libraryのWidgetを使うには、MaterialApp Widgetを先にFlutterに実装しておく必要があります。

ティファ

MaterialAppを先に実装しないで「Scaffold」「Column」などのmaterial libraryのWidgetを使用するとエラーが出てしまうよ!

「Scaffold Widget」でappBarとbodyとなるColumnを実装する

まずは、Scaffold WidgetでFlutterアプリの基盤となるレイアウトを作ります。

今回、Scaffoldで使用するプロパティは「appBar」と「body」でそれぞれ「トップバー」と「アプリのメインコンテンツ」を作るために使用します。appBarの引数には「AppBar」、bodyの引数には「Column」を代入します。

ティファ

Columnを使うことでアプリのy軸方向に複数のWidgetを配列できるよ!

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
      home: Scaffold(
        appBar: AppBar(
          title: Text('ランダムさいころ'),
        ),
        body: Column(
          children: [],
        ),
      ),
    );
  }
}
Flutterアプリ開発2
ティファ

これで「トップバー」と「メインコンテンツ」となる「Column」を実装できました!

「Expanded Widget」を使ってColumnのレイアウト設定

2対1

Columnのy軸における「ダイス画像」と「ボタン」のサイズ比率を上画像のように2対1にするためにExpanded Widgetを使用しますまた、ExpandedのchildプロパティにContainerを代入しておきましょう。

ティファ

Expanded Widgetは、ColumnやRowのように複数のWidgetをレイアウトするWidgetと一緒に使われるよ!

//完成したコードからbodyのコードを抽出
body: Column(
  children: [
    Expanded(
      flex: 2,
      child: Container(),
    ),
    Expanded(
      flex: 1,
      child: Container(),
    ),
  ],
),
ティファ

これでColumnにおけるchildrenのレイアウトが完了です!

「Image Widget」で画像を表示させる

今回はFlutterプロジェクトに保存しておいた画像をImage Widgetで表示させる方法を紹介します。

画像フォルダを作り画像を保存する

さいころアプリで使う1から6のダイスの画像を保存するフォルダを上動画のように作り、画像をフォルダに保存します。

画像の名前はこの記事と同じように「dice1」~「dice6」にしておいて下さい。

Flutterアプリ開発4
ティファ

今回はフォルダ名を「images」としているよ!

imagesフォルダの画像を使用するには、pubspec.yamlファイルを更新する必要があります。詳細はこちらで動画を使って紹介しています。

画像を表示させる

Image(
  image: AssetImage('images/画像名'),
),

pubspec.yamlファイルを更新したら、上記のコードのようにImage WidgetのimageプロパティにAssetImageを代入して保存した画像を指定することで表示できます。

今回はランダムにサイコロの目が出るようにしたいので、MyApp(自作中のStatefulWidget)で画像名として使われている「数字」の代わりとなる変数を宣言(変数名:number、初期値:1)しておき、画像名に宣言した変数を使用しています。

実際のコード:’images/dice$number.png (本記事最後にある「完成したコード」で確認)

Flutterアプリ開発5
ティファ

これでサイコロの目が1の画像が表示されるようになったので、ボタンを押すとサイコロの目がランダムに表示されるようプログラムを作っていきます!

「dart:math library」を導入しサイコロの目をランダムに表示させる

サイコロを転がすボタンをTextButton Widgetで作っていきます。また、ランダムなさいころの目をボタンを押すたびに表示されるよう「dart:math library」をインポートしてボタンに実装していきます。

//dart:math libraryをインポート
import 'dart:math';

.....

//完成したコードのTextButtonの部分を抽出
TextButton(
  child: Text('転がす'),
  style: TextButton.styleFrom(
    textStyle: TextStyle(fontSize: 30),
  ),
  onPressed: () {
    setState(() { //ボタンが押された際に「MyApp」をbuildし直す
      number = Random().nextInt(6) + 1;
    });
  },
),
ティファ

これでTextButtonが押されるたびに、ランダムなサイコロの画像が表示されるようになり「さいころアプリ」が完成しました!

完成したコード

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int number = 1;  //画像名に使用する「数字」を指定するための変数を宣言

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ランダムさいころ'),
        ),
        body: Column(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                padding: EdgeInsets.all(20),
                child: Image(
                  image: AssetImage('images/dice$number.png'), //画像名で使われる「数字」の代わりに「変数」を使う
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                child: TextButton(
                  child: Text('転がす'),
                  style: TextButton.styleFrom(
                    textStyle: TextStyle(fontSize: 30),
                  ),
                  onPressed: () {
                    setState(() {
                      number = Random().nextInt(6) + 1;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる