【初心者向け】Flutterアプリ開発の始め方|環境構築からHello World表示まで

これからFlutterでアプリ開発をしたい初心者向けに環境構築からアプリ開発(Hello Worldの表示)までの一通りの流れを紹介します。

環境構築はMacユーザー向けに解説していきます。

\ 世界最大級のオンライン学習サービス /

目次

Flutterの環境構築(Mac向け)

Flutterの環境構築では「Flutter SDK」のインストール、「Xcode」と「Android Studio」のセットアップが必要です。下のステップで環境構築を行なっていきます。

STEP
Apple StoreでXcodeをインストール
STEP
Flutter SDKのインストール
STEP
パスを通す
STEP
Xcodeのセットアップ
STEP
Android Studioのセットアップ

各ステップの詳細は下の解説記事をお読みください。

VSCodeのインストール

Flutterのアプリ開発はAndroid Studioで可能ですが、個人的にVSCodeでのアプリ開発がオススメです。VSCodeはAndroid Studioよりも軽く、Flutterアプリ開発で役立つプラグインが豊富にあります。

VSCodeでアプリ開発をする場合もAndroid Studioのセットアップが必要となるので、両方のエディタを使用してみて気に入った方で開発を進めていきましょう。

Flutterの新規プロジェクト作成

Android Studioの場合

Android Studioを開いたら「New Flutter Project」をクリック。

Flutter SDKのパスが正しければ「Next」をクリック。

which flutter

Flutter SDKのパスはターミナルで上記コマンドを実行して確認できます。

「Project name」でプロジェクト名、「Project location」で保存場所、「Description」でプロジェクト概要、「Project type」はApplicationを選択し「Organization」で企業ドメイン(個人なら名前など)を入力します。

「Android language」はKotlin、「iOS language」はSwiftで問題ないと思われます。「Platforms」で作成するアプリのプラットフォームを選択します。モバイルアプリを作るだけならAndroidとiOSにチェックを入れておけばOKです。

最後に「Finish」をクリックすればFlutterプロジェクトが作成されます。

VSCodeの場合

VSCodeのコマンドパレットをショートカットキーで開きます。(Mac:Cmd+Shift+P, Windows:Ctrl+Shift+P)

コマンドパレットで「flutter」と検索し「Flutter: New Project」を選択。

Applicationを選択。

Flutterプロジェクトを保存する場所を聞かれるので好きな場所を選びます。

「Project Name」でプロジェクト名を入力しEnterをクリックすれば、Flutterの新規プロジェクトが作成されます。

Dartコードはどこに書く?

新規プロジェクトを作成したらFlutterプロジェクト直下のlibにあるmain.dartでコードを書いていきます。

このlibでFlutterアプリ開発で使用するdartファイルを管理します。

main関数とは?

main.dartmain関数とセットで使用され、mainで書かれた処理がFlutterアプリ起動時のエントリーポイント(始めの処理)として実行されます。

runApp関数とは?

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

Flutterの新規プロジェクトを作成するとmainの処理の中にrunAppがありますが、このrunAppでFlutterアプリのウィジェットツリーの始まり(ルート)となるWidgetを指定しUIに反映できます。

上記コードの場合はMyAppがウィジェットツリーの始まり(ルート)となります。

Widget(ウィジェット)とは?

先ほどrunAppを解説した際に出てきた「Widget(ウィジェット)」と「Widget Tree(ウィジェットツリー)」について紹介します。

Widgetを一言でまとめると「アプリを構築するパーツ」です。

FlutterアプリのUIはいくつものWidgetがツリー状に組み合わさって構築されており、Widgetがツリー状に組み合わさっていることを「ウィジェットツリー」と呼びます。

Widgetを使用するにはパッケージが必要

Widgetを使用するにはdartファイルにパッケージを導入する必要があります。

import 'package:flutter/material.dart';

Flutterプロジェクト作成後のmain.dart初期コードに上記コードが書かれていますが、これはmaterialライブラリのWidgetを使用するためのパッケージです。

パッケージとライブラリの違い

パッケージの中には1つまたは複数のライブラリが含まれており、導入したパッケージから好きなライブラリのWidgetを使用できます。

Flutterでは様々なパッケージが用意されており、外部パッケージは「pub.dev」から手に入ります。

Flutterアプリで「Hello World」を表示

main.dartに下記コードをコピペし、ビルドするとFlutterアプリのスクリーン上で「Hello World」と表示されます。

下記コードではmaterialライブラリのMaterialAppScaffoldAppBarTextCenterが使用されています。

runAppでウィジェットツリーの始まりと指定したMyAppは自作のWidgetです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Widgetは自作できる

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

上記コードのMyAppStatelessWidgetを継承して自作したWidgetです。

Widgetは「状態が変化しないWidget」と「状態が変化するWidget」のいずれかに分けられ、Flutterでは主にStatelessWidgetまたはStatefulWidgetを継承して目的に応じたWidgetを自作できます。

一緒に読みたい

  • URLをコピーしました!
目次