LoginSignup
4
0
記事投稿キャンペーン 「2024年!初アウトプットをしよう」

Flutter で度々見る @override ってなんだ。何もわからん。

Last updated at Posted at 2024-01-19

はじめに

今月から Flutter を触り始めたのですが、まだまだ勉強不足で毎日公式ドキュメントなどを睨めっこしたり、練習用のリポジトリ作ってひたすらコード書いたりしています。
その中で、@overrideという単語をちょいちょい見ます。
Flutter プロジェクト立ち上げた時の最初のコードでもありますね。

import 'package:flutter/material.dart';


void main() {
  // 2.MyAppを呼び出す
  runApp(const MyApp());
}

// MyAPP のクラス
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override  // ← これ
  Widget build(BuildContext context) {
    // 3.タイトルとテーマを設定する。画面の本体は MyHomePage で作る。(27行目)
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override  // ← これ
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  // 5.カウンタが押された時のメソッド
  void _incrementCounter() {
    setState(() {
      _counter++;
      print("Hello world");
    });
  }

  @override  // ← これ
  Widget build(BuildContext context) {
    // 4.MyHomePage の画面を構築する鵜部分
    return Scaffold(
      // 画面上部のタイトル部分
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 画面の中央に表示されるテキスト
            const Text(
              'You have pushed the button this many times:',
            ),
            // テキストの下に表示されるカウンタ値
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      // 右下の「+」ボタンに対応するフローティングボタン
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

なんだろうと、まぁお約束なのかな。と放置していましたが、そろそろ理解したいなと思って調べたので簡単にまとめました。間違い等あれば是非ご指摘下さい。

@override とは

Dart におけるアノテーション(クラス、メソッド、変数などに対して特定の処理や動作を追加する時に使われる)の一つで、既存のメソッドを意図的に上書きしたい時に使用される
これにより、同じ名前のメソッドが2つ存在するなどのミスを防ぐ事が出来る。

あくまで、既に定義された既存のメソッドを上書きしたい時に使われるため、新しくメソッドを定義する時は @override は不要。
極論、@override つけて定義する事も出来なくはないが、本来の使い方として正しくはないためいらない。

つまりまとめるとこんな感じですかね。

  1. @override ありで、既に定義されているメソッドの場合。
    正しい使い方で、メソッドは上書きされる。

  2. @override ありで、定義されていないメソッドの場合。
    新規で作成されエラーは出ないが、そもそも@override は不要。(本来の使い方として正しくない)

  3. @override なしで、既に定義されているメソッドの場合。
    エラーになり、もう既に同じやつあるから上書きしてくれ(@overrideをつけてくれ)と言われる。

  4. @override なし:定義されていないメソッドの場合。
    新規で作成される。正しい使い方。

まとめ

@override は主に既存のメソッドを意図的に上書きする際に使われ、同じ名前のメソッド存在しているなどの矛盾を防ぎ、エラーを出さないために使われる。
つまり極論 @override がなくてもプログラムとしては動くけど、我々開発者の為に用意してくれている機能。という感じなのかな。

参考サイト

4
0
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0