初めてのFlutterアプリ Hello Worldを表示する

こんにちはnasustです。FlutterでHello Worldを表示するアプリを作成します。

プロジェクト作成

私はVS Codeをメインに使用していますので、VS Codeでセットアップします。

以下のページを参考にして作成しました。

Test drive - Flutter

VS Codeを起動してコマンドパレットで、Flutter: New Projectを実行します。 次にプロジェクト名を訊かれるのでhello_worldと入力します。 そしてプロジェクトを保存する場所を訊かれるので、保存するディレクトリを指定します。

以下の様にプロジェクトが作成されます。

Hello Worldアプリに改変

カウントアップするデフォルトのDartのプログラムが記述されているので、 Hello Worldだけ表示する様に変更します。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloWorldPage(title: 'Hello World Home Page'),
    );
  }
}

class HelloWorldPage extends StatefulWidget {
  HelloWorldPage({Key key, this.title}) : super(key: key);

  final String title;

  
  _HelloWorldPageState createState() => _HelloWorldPageState();
}

class _HelloWorldPageState extends State<HelloWorldPage> {

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello World',
            ),
          ],
        ),
      ),
    );
  }
}
dart

処理を削って、文字列を表示するだけなので簡単ですね。

スクリーンショット

まとめ

Hello Worldを表示するだけなので簡単でした。 swiftのアプリ開発より簡単な感触ですね。 開発のドキュメント見なくても何となく改変できたので分かりやすいです。

prevnext