はじめに

この記事では、Flutterの基本を学びたい初心者の方々のために、最初の一歩としてシンプルなアプリケーションを作成する方法を説明します。プログラミング初心者がFlutterを始める際、環境構築からプロジェクト作成まではできても、いざコードを書こうとすると何から手を付けていいか分からなくなることがあると思います。
そこで、Flutterの初期サンプルコードをもっと簡単にして、基本的な「Hello, Flutter!」というテキストを表示するアプリを作成し、解説していきたいと思います。

1. lib/main.dartファイルを開く

まず、Flutterプロジェクトのlibディレクトリ内にあるmain.dartファイルを開きます。これからはこのファイルにいろいろ書いていきます。

2. コードの編集

初めての人はmain.dartファイルに沢山訳の分からない文字がたくさん並んでいると思うのですが、すべて消して、以下のコードをmain.dartファイルにコピーして追加してください。これで、画面に「Hello, Flutter!」というテキストを表示するシンプルなアプリケーションが作成されます。

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: const Text('Flutter Demo Home Page'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}