はじめに

この記事は、Flutterをこれからはじめる方向けに分かりやすく解説する試みのもと書かれています。これを読んではじめの一歩を踏み出していただけたら幸いです！

Flutterとは

Flutterは、Googleが開発したクロスプラットフォームアプリケーション開発フレームワークです。

1つのコードベースでiOSやAndroid、Webアプリを同時に開発できる技術のことです。

プログラミング言語ではありません！Flutterでアプリを開発する際に使われるプログラミング言語は、Googleが開発したDartです。

Dartの詳しい説明はここでは省きますが、筆者的には「めちゃくちゃオブジェクト指向なJavaScript」という印象のプログラミング言語です。

Flutterアプリの基本構成

Flutterでアプリを作る上で、最も重要な概念が「ウィジェット」です。実際、Flutterを理解するためには、このウィジェットを理解することが欠かせません！というのも、FlutterアプリのUIはすべてウィジェットから構成されており、ウィジェットを組み合わせていくことで画面が作られるからです。

ウィジェットとは

Flutterのアプリ開発において、ウィジェットは画面上に表示されるすべての要素を作るパーツです。ボタンやテキスト、画像など、アプリの見た目に関わるものから、画面のレイアウト（配置）まで、すべてがウィジェットで構成されています！

具体的なウィジェットの例

ウィジェットにはさまざまな種類がありますが、イメージしやすいように、いくつかよく使われるウィジェットを紹介します！

Text: 文字を表示するためのウィジェット
Image: 画像を表示するためのウィジェット
ElevatedButton: ボタンを表示するためのウィジェット

また、Flutterではウィジェットが他のウィジェットを「包む」構造になっています。HTMLみたいな感じです。これにより、複数のウィジェットをまとめたり、配置を調整したりするためのウィジェットもあります！

Column: ウィジェットを縦に並べるためのウィジェット
Row: ウィジェットを横に並べるためのウィジェット
Container: ボックスのようなもので、背景色や余白を設定するために使います

↓↓↓ 包む構造の一例をご覧ください ↓↓↓

Column(
  children: <Widget>[
    ElevatedButton(
      onPressed: () {
        print('ボタンが押されました');
      },
      child: Text('押してください'),
    ),
    ElevatedButton(
      // 省略 二つ目のボタンです！
    ),
  ],
),

上記のコードはボタンを二つ使用した例です！

Columnウィジェットで包むことによって二つのボタンは縦に並べられます。
ボタンの中にTextウィジェットがあり、「押してください」という文字が表示されます。

このように、ウィジェット一つ一つが簡単な役割を持ち、それを組み合わせることで画面全体を作っていくのがFlutterスタイルです！

Flutterを始めるためのステップ

初心者がFlutterを使って開発を始めるためのステップを以下にまとめました。

1. 環境を整える

まずはFlutterをインストールしましょう。

公式インストールガイドを参考に、Flutter SDKをダウンロードし、セットアップを行います。
併せて、Android StudioかVisual Studio Codeなどの開発環境もセットアップします。

2. Flutterプロジェクトを作成

セットアップが完了したら、Flutterの初期プロジェクトを作成してみましょう。Android StudioまたはVSCodeのターミナル等のコマンドで以下を実行します。

flutter create my_first_app
cd my_first_app

my_first_appという名前のプロジェクトが作成されます。

3. アプリを動かす

プロジェクトを作成したら、実際にアプリを起動してみましょう。
次は、以下のコマンドを実行します。

flutter run

これで、デフォルトのカウンターアプリが起動します！

4. コードを理解する

作成されたコードを確認してみましょう。lib/main.dartがFlutterアプリのエントリーポイントです。以下のような構造になっています。

main.dart

import 'package:flutter/material.dart';
void main() {
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     // 省略 
   );
 }
}

• runApp関数でアプリを起動します。
• MyAppというクラスがアプリ全体の構造を定義しています。
• MaterialAppはFlutterのUIを構築するための基本的なコンテナです。

5. カスタマイズしてみる

次に、自分でアプリをカスタマイズしてみましょう！見たり読んだりするのも大事ですが、実際に動かして確かめていくことでより深い納得感を得られて楽しくなってくるはずです！

↓↓↓ 試しに先ほどの例のように書き換えてみてください ↓↓↓

main.dart

body: Center(
 child: Column(
   mainAxisAlignment: MainAxisAlignment.center,
   // ↓ ここから変更箇所 107行目あたり
   children: <Widget>[
     Text('ボタンを押した回数:'),
     Text(
       '0',
       style: Theme.of(context).textTheme.headline4,
     ),
     ElevatedButton(
       onPressed: () {
         print('ボタンが押されました');
       },
       child: Text('ボタン'),
     ),
   ],
   // ↑ ここまで
 ),
),

上記のように、Flutterでは簡単にウィジェットを追加してUIを変更することができます！

まとめ

この記事では、Flutterの基本概要と開発を始めるためのステップを紹介しました。
Flutterは、開発を高速化してくれる機能があったり、パフォーマンスに優れ高性能で、ウィジェットによりシンプルで使いやすくて柔軟な、最強卍フレームワークです！まずは公式ドキュメントやチュートリアルを試しながら、少しずつ慣れていきましょう！

以上、Flutter初心者向けの概要とステップについて解説しました。今後もぜひ、色々な機能を試してFlutterを使った開発に挑戦してみてください！