【第1回】Flutterの経験値を貯めたい！

Flutterっておいしいの？

A.おいしくはないと思いますが、なんだか楽しそう。

どうも、経験が乏しいエンジニアのりーたまです。

IT業界に入ってからもうすぐで２年ぐらい経過しそうです。

今年の春にMacMiniを購入しました。
安価でパワフル！でもノートじゃないからモニターも持っていかないと行けない。
でも気に入ってます。

冬〜春にかけてプライベートがごたごたしており夏には引っ越しもして漸く落ち着いた今日この頃。
本腰を入れてflutterを触り始めました。

環境構築は
いちから始めるFlutterモバイルアプリ開発
こちらの記事でばっちりでした！

というわけで早速
頭に浮かんだアイディアで、GPT先生に中央に丸書いて！尚且つ動かしたいんだ！と頼みました（↓に書いてあるコードは全てchatGPTによるものです）

sample.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white, // 背景色（お好みで）
        body: Center(
          child: Container(
            width: 100,  // 直径（ピクセル）
            height: 100,
            decoration: BoxDecoration(
              color: Colors.black,         // 丸の色
              shape: BoxShape.circle,      // 円形にする
            ),
          ),
        ),
      ),
    );
  }
}

これは丸ができたコード。そして

sample2.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MoveCirclePage(),
    );
  }
}

class MoveCirclePage extends StatefulWidget {
  @override
  _MoveCirclePageState createState() => _MoveCirclePageState();
}

class _MoveCirclePageState extends State<MoveCirclePage> {
  double x = 100; // 初期位置
  double y = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            left: x,
            top: y,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  x += details.delta.dx; // 横移動
                  y += details.delta.dy; // 縦移動
                });
              },
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.black,
                  shape: BoxShape.circle,
                ),
                child: Center(
                  child: Container(
                    width: 70,
                    height: 70,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

丸が

動かせる！

すぐに描画できる機能（ホットリロードというらしい）もすごいですし
シミュレーターもすごいです（仮想マシーンというやつでしょうか）
僕の語彙力のなさもすごいです。

作りたいアイディアはいっぱい思いついているので、形にしてリリースしようと考えています。

Flutterシリーズ第1回目ということで、薄い内容でしたが、
ここまで読んでいただきありがとうございました。

また記事を書こうと思いますので（全然内容に踏み込んでいないし、備忘録にもなってないので）よかったらまた読んでください（これ経験値になってる？）それでは！