Flutter入門 | プロジェクトの基本構成！！

今回は簡単なアプリを作りながらプロジェクトの基本構成を解説していきたいと思います！！

プロジェクトの作成

コマンドラインからの作成

まず最初にコマンドラインからプロジェクトを作成する方法をご紹介します。

コマンドラインに次のように打ち込みます。


     flutter create プロジェクト名

プロジェクト名のところにはつけたいプロジェクトの名前を入力します。

これでFlutterプロジェクトファイルが作成されるので、コードエディタなどで開いてプロジェクトの開発を進めていきます。

Visual Studio Codeでの作成

続いてVisual Studio Codeでのプロジェクト作成方法をご紹介します。

Visual Studio Codeを開いて表示からコマンドパレットをクリックします。

Flutter: New Projectと打ち込み選択します。

Applicationを選択します。

どのフォルダの中にプロジェクトファイルを作成するかを選択し、Select a folder to create the project in をクリックします。

プロジェクト名を入力し、Enterを押します。

これでプロジェクトファイルが作られました！！

main.dartのソースコード

続いてプロジェクトファイルを開きます。

プロジェクトのアプリケーション部分のプログラムがまとめられているのがlibフォルダです。

libフォルダの中にはmain.dartというスクリプトファイルがデフォルトで作られています。

この中にアプリケーションに必要なプログラムを記入していきます。

デフォルトで生成されているmain.dartの中にはアイコンをタップして数字をカウントアップしていくプログラムが書かれています。

最初はもっとシンプルなコードの方がわかりやすいと思いますので、さらに内容を削ったソースコードを表示させてみましょう。

main.dartを以下のように書き換えてみてください。


     import 'package:flutter/material.dart';

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

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Flutter Demo',
           home: Text(
             'Hello, Flutter World!!',
             style: TextStyle(fontSize: 32.0),
           ),
         );
       }
     }

このプログラムをChrome上で実行させてみましょう。

Visual Studio Codeの右下のNo Deviceのところをクリックして、Chromeを選択してください。（Chromeがインストールされていない場合はこちらからインストールしてください。)

右上にある再生と虫のマークをクリックします。

しばらくするとChromeが起動し、以下のように表示されます。

アプリ実行の仕組み

先ほどのmain.dartファイルのプログラム上ではpackage:flutter/material.dartというパッケージを読み込んでいます。

これはFlutterのマテリアルデザインのアプリのUIウィジェットがまとめられているパッケージです。

最初にこれをimportしています。


     import 'package:flutter/material.dart';

アプリのプログラムを実行する処理はごく単純にまとめるなら以下のようになります。


     void main() {
       runApp(ウィジェット);
     }

mainという関数がアプリを起動する際に呼び出される処理です。

アプリのプログラムはこのmain関数に記述していきます。

ここではrunAppという関数を実行しています。これがアプリを起動する処理です。

つまり、アプリのプログラムというのはmain関数において、runAppでアプリを起動するというシンプルなものです。

StatelessWidgetクラスについて

runApp関数の引数に指定されているのはMyAppというクラスのインスタンスです。

これはStatelessWidgetというクラスのサブクラスです。StatelessWidgetクラスはステート（状態を表す値）を持たないウィジェットのベースとなるクラスです。

ウィジェットのクラスはこのStatelessWidgetとステートを持つStatefulWidgetのいずれかを継承して作成します。StatefulWidgetについては次回解説していきます。

まずはStatelessWidgetについてみていきましょう。

このクラスは以下のような形で定義されます。


     class クラス名 extends StatelessWidget {
       const クラス名({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp(…略…);
      }
     }

StatelessWidgetクラスにはbuildメソッドが用意されています。これはウィジェットが生成される際に呼び出されるものです。

ここではreturnでMaterialAppというクラスのインスタンスが返されています。

これはマテリアルデザインを管理するクラスです。

StatelessWidgetクラスではステートのないクラスというだけで、デザインに関するものは扱っていません。StatelessWidgetでMaterialAppインスタンスをreturnすることで、マテリアルデザインによるアプリが表示されるようになります。

MaterialAppインスタンスを作成する際に、画面に表示させるウィジェットなどを引数に渡しています。

すべてのウィジェットはWidgetというクラスのサブクラスとして用意されています。

ウィジェットをMaterialAppに組み込んでreturnすると、それがStatelessWidgetクラス（MyAppクラス）のウィジェットとして画面に表示されるといことです。

buildメソッドではBuildContextというクラスのインスタンスが引数として渡されています。

BuildContextは組み込まれているウィジェットに関する機能がまとめられています。

例えば、ウィジェットの組み込み状態（ウィジェットが組み込まれた親や子に関する情報）の機能がいろいろと揃っています。

MaterialAppクラスについて

MaterialAppは引数にさまざまな設定情報を指定することができます。

ここでは以下のような処理が書かれています。


     return MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'Hello, Flutter World!!',
        style: TextStyle(fontSize: 32.0),
      ),
    );

よく見るとたった一つの文しか書かれていないことがわかります。

MaterialAppのインスタンスを作成してreturnし、以下のような文を改行してわかりやすくしているのです。


     return MaterialApp( title: ⚪︎⚪︎,  home: ⚪︎⚪︎ );

ここではtitleとhomeという名前付きの引数が用意されています。

titleはアプリケーションのタイトルを示しています。

homeはこのアプリケーションに組み込まれているウィジェットを表示するためのものです。

ここに指定されたウィジェットがMaterialAppの表示になります。

ここでは、Textというクラスのインスタンスが引数に設定されています。これはテキストの表示を行うためのウィジェットです。

第一引数に表示させるテキストを、第二引数にはstyleという値が用意されています。

これはテキストスタイルを設定するためのプロパティです。

アプリの構造を確認する

以上のようにFlutterアプリではさまざまなクラスが階層的に組み合わせられて表示されています。

その基本を整理すると以下のようになります。

アプリケーションはmain関数として定義し、main関数ではrunAppでウィジェットのインスタンスを作成する。
runApp関数では、StatelessWidget（またはStatefulWidget）継承クラスのインスタンスを引数に設定する。これがアプリ本体のUIになる。
StatelessWidget継承クラスにはbuildメソッドを用意する。ここではマテリアルデザインのアプリであるMaterialAppインスタンスをreturnする。
MaterialAppの引数homeに実際にアプリに表示させるウィジェットを設定する。

このようにFlutterアプリでは、main関数、StatelessWidgetクラス、MaterialAppクラスが階層的に組み合わさって実装されています。

また実際に表示させるウィジェットとして、Textクラスとそれにスタイルを設定するTextStyleクラスも合わせて覚えておきましょう。

マテリアルデザインについて

デフォルトで作られるスクリプトにマテリアルデザインのパッケージが読み込まれていることから、Flutterアプリとマテリアルデザインには密接な関係があると言えます。

マテリアルデザインはGoogleが提唱する視覚的デザイン言語です。

これはあらゆるデバイスで共通する視覚的デザインを構築し、同じようなユーザー体験を実現するために提唱されています。

スマートフォンではプラットフォームごとにデザイン言語が異なっており、基本的な部品（ボタンやアラートなど）のデザインはそれぞれのプラットフォームごとに微妙に異なっています。

Flutterで標準的なウィジェットでは、すべてwidget.dartというパッケージにまとめられており、デフォルトで読み込まれ使われています。

これに加えてAndroidでのマテリアルデザインのためのパッケージ、material.dartと、iOSのクパティーノデザインのためのパッケージ、cupertino.dartが用意されています。

デフォルトでマテリアルデザインが読み込まれるように設定してあることで、明示的にクパティーノデザインを読み込まない限りはマテリアルデザインベースでUIが構築されることになります。

GoogleはマテリアルデザインをAndroidのためというよりは、さまざまなプラットフォームの違いを超えたものと考えています。

例えばWebの世界でも多くのマテリアルデザインが採用されています。

こうしたことからGoogleはFlutterのアプリ開発のベースとなるデザイン言語として、マテリアルデザインを強く推し進めていく考えのようです。

すでにiPhoneアプリでもマテリアルデザインによるアプリが登場していることから、Androidアプリ = マテリアルデザイン、iPhoneアプリ = クパティーノデザインという見方に固執しない方が良いと思います。

むしろ両プラットフォーム共通デザイン言語としてマテリアルデザインがあり、iOS独自の視覚的デザインを守りたい人向けのデザイン言語としてクパティーノデザインのウィジェットが用意されていると考えると良いでしょう。

Scaffoldについて

一応アプリを作って表示することができましたが、まともにデザインされていません。

スマートフォンのデザインは大抵、上部にタイルを表示するアプリケーションバーのような部分があり、その下に白い背景でUIが表示されるデザインになっていますね。

こうした基本的なデザインを表示するためにScaffoldウィジェットを使用します。


     import 'package:flutter/material.dart';

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

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

  
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
             title: 'Flutter Demo',
             home: Scaffold(
               appBar: AppBar(
                 title: Text('Hello Flutter!!'),
               ),
               body: Text(
                 'Hello Flutter World!!',
                 style: TextStyle(fontSize: 32.0),
               ),
             ));
       }
     }

Chromeで実行すると以下のような表示になります。

ここではMaterialAppのhomeにScaffoldというクラスのインスタンスが指定されています。

Scaffoldというのは建築の足場のことです。つまり、アプリ作成の土台となる部分ということです。

このScaffoldにはマテリアルデザインの基本的なレイアウトが組み込まれています。

これに必要なウィジェットを追加することで、一般的なアプリの見た目が作成されていきます。

Scaffoldを整理すると以下のようにインスタンスを作成します。


     Scaffold(　appBar: 〇〇,　body: 〇〇　)

Scaffoldではウィジェットを表示させる要素を格納するための名前付き引数がいくつか用意されています。

ここではappBarとbodyという最も基本的な名前付き引数を紹介します。

appBarとAppBarクラス

appBarはアプリ上部に表示されるアプリケーションバーを設定する値です。

ここでは以下のように値が設定されています。


     appBar: AppBar(
            title: Text('Hello Flutter!!'),
          ),

appBarプロパティにはAppBarというクラスのインスタンスが設定されています。

AppBarはアプリケーションバーのウィジェットクラスです。これはtitleという値を用意しています。

ここに表示するテキストをTextクラスのインスタンスとして指定すれば、アプリケーションバーのタイトルとして表示されます。

bodyについて

アプリケーションバーの下の空白部分を担当するのがbodyという値です。

ここではTextインスタンスを作成して組み込んでいます。


     body: Text(
            'Hello Flutter World!!',
            style: TextStyle(fontSize: 32.0),
          ),

実際のアプリの表示はこのbodyに組み込んでいきます。

ここではTextを指定していますが、実際の開発では多数のウィジェットを配置するコンテナとしての働きを持つウィジェットを組み込んで利用していくことになります。

まとめ

今回はプロジェクトの基本構成について解説していきました！！

冒頭でアプリを作りながらと書いていましたが、実際はテキストを表示するだけのアプリになってしまいましたね…。

次回はStatefulWidgetを解説しながら、ボタンを押したらデータに格納した情報をランダムに出力するようなアプリを作成していきたいと思います。

それでは、良きFlutterライフを！！

2025-03-15

0件のコメント

コメントはまだありません。最初の一人になりましょう！

mohumohu studio

みずきの技術＆読書ブログ＆無料ゲーム