![見出し画像](https://assets.st-note.com/production/uploads/images/39387743/rectangle_large_type_2_cd59669ea61fc78ad1c280b02a1425f7.jpeg?width=1200)
Photo by
mericanadesico
【Flutter入門】コピペでできる!まるばつゲーム(三目並べ)の作り方(〇✕ゲーム)
はじめに
〇✕ゲームの開発を題材に、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を整える
ここから先は
19,393字
/
8画像
¥ 7,800
この記事が気に入ったらサポートをしてみませんか?