Flutter初心者必見！テンプレでStatefulWidgetを爆速作成 (Day 2)

はじめに

こんにちは、Crazeです！

今回は、なんだかんだ覚えるのが大変で毎回迷うStatefulWdgetのテンプレを作ったよ。

難しい説明は他の方にお願いして、テンプレ的なのを作ってラクをしようという魂胆です笑
（だってわからないんだもん）

わかる人がいたら教えてください🙇

まぁ、わからないなら、ズルをすればいいのだ！　へへへ😎

では、Let’s go

テンプレ＋ちょっとボタンとか

赤は自分なりに変更が必要なところだよ。

わかりやすいようにコメントも付けておいたから見てみてね。

import 'package:flutter/material.dart';

// classの名前を入れる（ファイル名がhome.dartとかならHomeでOK）
class MyStatefulWidget extends StatefulWidget {
  @override
// ＿を前につけてStateを後につけるとOK（_HomeStateとか）
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
// 上でつけた＿のやつと同じものをおいて（例、_HomeState extends State<Home>）
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  // 変更したいものはここ（今回はボタンを押した時に増える数字）
  int _counter = 0;

  // methodもここ（ボタンを押した時の動作とか）
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

// ここからはWidgetsの配置だからなんでもOK
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My Stateful Widget"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("You have pressed the button this many times:"),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

何もなしテンプレ

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My Stateful Widget"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("You have pressed the button this many times:"),
            Text("AAAAAAAAA"),
          ],
        ),
      ),
    );
  }
}

例

今回はprofile.dartという名前にします。

そうするとこんな感じ。

import 'package:flutter/material.dart';

class Profile extends StatefulWidget {
  const Profile({super.key});

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

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter'),
        ElevatedButton(
          onPressed: () {},
          child: Text('Increment'),
        ),
      ],
    );
  }
}