Flutter基礎 – 簡単な1画面アプリをつくろう!

こんなアプリを作りますよ

今回は初めてのアプリとして、

いちばん簡単な「ステートレスな1画面アプリ」を作っていきましょう!

見たとおりボタンも入力欄もない、ただの張り紙のような画面です😉

作りは簡単ですが、Flutterのアプリの作り方の基礎となる部分が集まっているので

超大事な部分です😳

ちなみにFlutterプロジェクトを作成した際

サンプルコードが自動生成されると思いますが、

今回こちらは「すべて選択」→「削除」で全削除★

ゼロから作ってきますよぉ✨

ではいくぅ〜✨

画面用のフォルダを作成しておこう

まずは、

画面用のフォルダを作成していきます😳

今回のポイントはこちら!

  • Flutterでは1つのファイルに複数の画面クラス(Widget)を記述することができるよ😆
  • でも↑のやり方だとコードが分かりにくいから、個別に分けたほうが見やすくて便利😉
  • この作業をしなくても、エラーになることはないよ💡

ではさっそく、やっていきましょう🙌

サイドタブ「プロジェクト」を開いた状態で、

libフォルダを右クリックして「新規」→「パッケージ」で新しいフォルダを作ります。

フォルダ名は、今回は

「screens」にしておきます。

💡POINT: Flutterファイル名の命名規則💡

Flutterの命名規則では、ファイル/フォルダ/パッケージ名は

lowercase_with_underscores(すべて”小文字”か”アンスコ(_)”のみ)

となっています😳

例えば”UserLoginScreen”というクラスを記述したいファイルを作るときは、

”user_login_screen”とすればOKです🙌

ファイル名もフォルダ名もこのルールなので気をつけましょう👍

【main.dart】アプリ全体に共通する部分を記述

main.dartファイルには、アプリ全体に共通する部分を記述していきます。

”アプリ全体に共通する部分”とは、アプリのテーマや、ホームスクリーンの設定などですね😆

では、書いていきましょう!

インポートする

この手順あとからでもできますが、

今回は先にやっておきましょう😌

うまくコード補完機能(途中まで打つと候補が表示される機能)を使うと

たった”4文字”の入力で済みます✨

// (1) まず"im"と打つ -> 候補からimport選択
// import '';

// (2) 次に"ma"と打つ -> 候補からmaterial.dart選択
import 'package:flutter/material.dart';

このmaterial.dartファイルとは何なのでしょうか?

これは簡単に言うと

  • マテリアルデザインを使うために必要なファイル

です😆

Flutterでは、

Android風の”マテリアル(Material)デザイン”

iOS風の”クパチーノ(Cupertino)デザイン”を選択できますが、今回のアプリでは

マテリアルデザインの方を使っていこうと思います👌

ちなみにiOS風のデザインにしたいときは、代わりに

import 'package:flutter/cupertino.dart';

このファイルをインポートします👌

main関数を記述する

次に、main関数を書いていきます✨

main関数はDartの文法で、”最初に実行される関数”です。

内部で runApp()関数を実行するように記述していきます。

void main() => runApp();
// ※引数部分に赤い波線が出るが、とりあえず無視でOK

// これは下と同じ意味
// void main() {
//   runApp();
// }

💡POINT: runApp()関数って何?💡

main関数の中で処理をするrunApp()関数とは何なのでしょうか。

ライブラリを参照してみましょう。

/// Inflate the given widget and attach it to the screen.
/// (訳:指定されたウィジェットをインフレートさせ、画面にアタッチさせます)

/*
  〜中略〜
*/

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

要するに、

引数に指定されたWidgetを画面に表示しますよ」ということ🙌

Widget型は、その名の通りウィジェットを指し、

画面に関わるすべてのウィジェットの”親クラス”に当たります😆

通常はこの引数に、アプリのルートウィジェットを渡します👌

アプリ全体を包むウィジェットを作成

ではルートウィジェットを作っていきましょう🙌

アプリ全体は状態を持たないので、ステートレスですよね。

なのでStatelessWidgetを継承したクラスを作成します。

// (1) "stl"と打つと出てくる「stless」を選択して自動生成
// (2) クラス名を"MyApp"とする


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

自動生成されたクラスには、”build()メソッド”がオーバーライドされています。

これは、単純にこのクラスが表すウィジェットだと考えてOKです👌

次に、returnされているContainerを変更していきます。

// (1) Container()を"MaterialApp()"に変更
// (2) 名前付き引数"title", "home"を指定
//   "title" -> アプリのタイトル
//   "home" -> アプリのホームスクリーン(最初の画面)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'サンプルアプリ',
      home: HomeScreen(),  // 赤い波線は無視でOK
    );
  }
}

とりあえずここまでできたら、OKです。

runApp()関数の引数にルートを渡す

タイトル通りです😂

これでひとまずはmain.dartの記述完了です✨

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); // <- MyAppインスタンスを渡す
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'サンプルアプリ',
      home: HomeScreen(),
    );
  }
}

【home_screen.dart】メイン画面を作成

次に、ホーム画面となるHomeScreenを作成してきましょう!

lib/screensフォルダ下にDartファイル作成

新しくdartファイルを作成します🙌

インポート&クラス作成

インポートとクラス作成を行っていきます👌

手順は先程と同様です✨

// (1) インポート
import 'package:flutter/material.dart';

// (2) ステートレスウィジェットを継承したクラス作成
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

ホームスクリーンの中身を実装する

ようやく、画面の構成に取り掛かります✨

ポイントはこちら!

  • 画面の土台となる部分を作る
  • アクションバー(AppBar)を設定
  • テキストを表示
  • テキストを中央に移動

コードを確認しましょう✨

// (1) アプリの土台となる部分を作る
// "Scaffold"はマテリアルデザインを構成する場合の土台になるウィジェット

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}
// (2) アクションバーを設定
// Scaffoldコンストラクタの名前付き引数"appBar"に、AppBarインスタンスを渡す
// AppBarでは、"title"引数にタイトルを指定する

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text('ホーム画面'),
      ),

    );
  }
}
// (3) テキストを表示
// "body"引数にTextウィジェットを配置
// 引数は文字列を渡す

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ホームスクリーン'),
      ),

      body: Text('中央にテキスト'),

    );
  }
}

次にTextウィジェットを中央に表示させる方法ですが、

Centerウィジェットで包んでやるようにします😳

まず、Textウィジェットを選択して「Alt+Enter(Macはoption+return)」を押すと候補が表示されます。

候補から「wrap with Center」を選択すると、

Textウィジェットが下のコードのようにCenterで包まれたようになります🙌✨

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ホームスクリーン'),
      ),

      body: Center(
        child: Text('中央にテキスト'),
      ),

    );
  }
}

これでホームスクリーンの作成はOKです!

【main.dart】ホーム画面を登録

最後に、main.dartにて、ホームスクリーンのインポートを行います😆

さっき放置していた、赤い波線の場所で

先ほどと同じように「Alt+Enter(Macはoption+return)」を押します。

するとインポートする候補が2つ表示されますが、これはどっちでもOKです👌👌

インポートが完了したら、終わりです✨

ビルドして確認してみましょう👌😳