はじめに

〇✕ゲームの開発を題材に、Flutterでのモバイルアプリ開発の基礎である、Widgetや開発言語（Dart）の学習ができるように、できる限り丁寧に解説していきます。
完成形のコードはすべてコピペできるように用意しているので、特にプログラミング初心者はコピペで進めて、まずはプログラミング・アプリ開発がどういう手順で進むのかを体験しながら興味を持ってもらえば嬉しいです。

また、この記事の内容を動画で学びたい方は『Flutter Labo』のほうからご覧ください。

完成形

事前準備

Flutterでアプリ開発するための環境構築が必要です。
まだご自身のPCの環境構築が終わっていない場合は、以下の記事を参考にしてみてください。

＋ボタンを押すと数字が1増えるアプリが実行できていれば、環境構築は完了です。

今回のアプリ開発では、プロジェクトフォルダ直下にある pubspec.yaml ファイル と、main.dart があるlibフォルダ内を編集します。

コードを整理する

まずは、pubspec.yaml と 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(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

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

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;

 void _incrementCounter() {
   setState(() {
     _counter++;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'You have pushed the button this many times:',
           ),
           Text(
             '$_counter',
             style: Theme.of(context).textTheme.headline4,
           ),
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ),
   );
 }
}

pubspec.yaml

name: circle_and_cross
description: A new Flutter application.

publish_to: 'none'

version: 1.0.0+1

environment:
sdk: ">=2.7.0 <3.0.0"

dependencies:
flutter:
  sdk: flutter

cupertino_icons: ^0.1.3

dev_dependencies:
flutter_test:
  sdk: flutter

flutter:

uses-material-design: true

ここからが本格的な開発になります。

AppBarを整える