🤔

Flutter（Dart）で頻繁に使用される @overrideとはなにか

2021/09/07に公開

Flutter

Flutterにおける @override とはなにか

@overrideとはそもそもなにか

本稿、あるいは本シリーズは公式ドキュメントを読んだ際に初学者が疑問に思いやすい用語や仕組みの理解を深めるためのプログラミングノートです。

Flutterの公式ドキュメントの「write you first app」などで頻繁に書くことになる、「@override」というものがある。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

このコードは前回までのプログラミングノートで解説（学習）してきたように、StatelessWidgetという親クラスを継承したMyAppクラス内のbuildメソッドでウィジェットを描写しているというもの。
最終的にMaterialAppがMyAppにreturnされることで、実際に描写されているようだ。

気になるのは「@override」という箇所です。日本語では上書きといった意味ですが、何をどのように上書きしているのか。

そもそも、理解しなければならないのは、extendsというクラス継承にある。この場合、StatelessWidgetクラスという親クラスをMyAppに継承していることになる。この時、MyAppにはStatelessWidgetの性質が引き継がれている。

そして、buildメソッドの登場である。このメソッドはMaterialApp内に様々なウィジェットを持っている。それらを画面に描写するために、returnしているというのが、このメソッドである。しかし、それらはStatelessWidgetの特性を持たせたいので、最初にMyAppクラスを用意し、Statelessを継承し、上書きしているのだ。

「MyApp内のbuildメソッドなんだけどさ、単なるウィジェットじゃなくて、Statelessウィジェットだよ？いいね？」

という感覚だろうか（現時点ではこの程度の理解であるため、容赦して欲しい）。

@overrideの最初のアットマークは「アノテーション」と呼ぶらしく、そのほかの言語でも使われているようだ。

本稿で理解すべきはMyAppはStatelessWidgetを継承しており、buildメソッドもStatelessWidgetの性質を引き継いでいるということ。しかし、新たなbuildメソッドというものを用意し、MaterialAppなどのウィジェットを描写するよう記述したいので、@overrideで上書きしているということだろう。この時、親クラス（StatelessWidget）は書き換えられていない。あくまでも、子クラスが上書きされているということになる。

・StatelessWidget（親クラス）
・MyApp（子クラス）
・buildメソッド（子クラス内のメソッド）
・MaterialApp（インポートしてきた便利なやつ。中にあるウィジェットを良い感じにしてくれる。こいつをreturnすることで中のやつも当然描写される）

参考資料

・オーバーライド (override)（https://wa3.i-3-i.info/word138.html）
・Flutterの基礎（https://qiita.com/nkmk1215/items/7d73b4fd8cb5ec5ac486）
・Flutter はじめの一歩（https://medium.com/flutter-jp/first-step-9b7f2c74fb08）

Flutterにおける @override とはなにか

@overrideとはそもそもなにか

Discussion