Flutter : The instance member 'stars' can't be accessed in an initializer. のエラー

https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns
上記のページをやっていて、

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  debugPaintSizeEnabled = true; // Remove to suppress visual layout
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  Widget stars=Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.star, color: Colors.green[500]),
      Icon(Icons.star, color: Colors.green[500]),
      Icon(Icons.star, color: Colors.black),
      Icon(Icons.star, color: Colors.black),
      Icon(Icons.star, color: Colors.black),
    ],
  );

  Widget ratings = Container(
    padding: EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        stars,
        Text(
          '130 Reviews',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w800,
            fontFamily: 'Roboto',
            letterSpacing: 0.5,
            fontSize: 20,
          ),
        ),
      ],
    ),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        // Change to buildColumn() for the other column example
        body: ratings,
      ),
    );
  }
}

を実行すると、

The instance member 'stars' can't be accessed in an initializer.
  
Try replacing the reference to the instance member with a different expressio

というエラーが出たのですが、何がまずいのかよくわかりません。
とりあえずratingsとstarsを関数にしたらエラーは消えたのですが、
上記コードでエラーが出る原因は何でしょうか?

2020/11/1/12:13追記
サンプルコード

import 'package:flutter/material.dart';
//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  //debugPaintSizeEnabled = true; // Remove to suppress visual layout
  //↓(1)→結果: x=10,y=10
  //runApp(MyApp._internal(x:10,y:10));

  //(2)→結果: x=20,y=0
  //runApp(MyApp.red(20));

  //(3)→結果: x=30,y=0
  runApp(MyApp(30));
}

class MyApp extends StatelessWidget {
  MyApp._internal({this.x, this.y}); //生成的コンストラクタ

  MyApp.red(int x) : this._internal(x: x, y: 0); //リダイレクトコンストラクタ

  factory MyApp(x) {  //factoryコンストラクタ
    MyApp _ma = MyApp._internal(x: x, y: 0);
    return _ma;
  }

  final int x;
  final int y;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        // Change to buildColumn() for the other column example
        body: Row(children: [Text("x=$x"), Text("y=$y")]),
      ),
    );
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

インスタンスメンバのratingウィジェットの初期化で同じくインスタンスのメンバであるstarsウィジェットを参照しようとしているからだと思います。一時凌ぎの解決策としてstarsをクラスメンバにする（staticをつける）とか考えられますが、個人的にはfactoryを使うのがいいんじゃないかなーって思います。

以下、factoryを使った例です。

class MyApp extends StatelessWidget {
  MyApp._internal();
  Widget stars;
  Widget ratings;

  factory MyApp() {
    MyApp _myApp = MyApp._internal();
    _myApp.stars = Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.black),
        Icon(Icons.star, color: Colors.black),
        Icon(Icons.star, color: Colors.black),
      ],
    );
    _myApp.ratings = Container(
      padding: EdgeInsets.all(20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _myApp.stars,
          Text(
            '130 Reviews',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w800,
              fontFamily: 'Roboto',
              letterSpacing: 0.5,
              fontSize: 20,
            ),
          ),
        ],
      ),
    );
    return _myApp;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        // Change to buildColumn() for the other column example
        body: ratings,
      ),
    );
  }
}

本来MyAppのメンバstars``ratingsがfinalではないのでMyAppはStatefulWidgetで使用する方が良いと思いますが。

投稿2020/10/27 06:10

toshi_ki

総合スコア17

moriman

2020/10/31 01:13

回答を頂きましてありがとうございます。少し元々の質問からずれてしまうかもしれないのですが、 factoryコンストラクタというのははっきりした定義ってあるんでしょうか? 「factoryキーワードをつけたコンストラクタがfactoryコンストラクタ」ということなんでしょうか? 一応ドキュメントの対応箇所など目を通しても、リダイレクトコンストラクタで同じことができるような気がする箇所もあるのですが、リダイレクトコンストラクタならfactoryキーワードはつけなくても良いと思います。「factoryパターン(の考え方)を使っているコンストラクタがfactoryコンストラクタ」ということなのでしょうか。 factoryキーワードは「つけた方が望ましい」くらいのものなのでしょうか?

toshi_ki

2020/10/31 03:37

定義はドキュメントが全てなので、Dartドキュメントを参照してみてください。 https://dart.dev/guides/language/language-tour#factory-constructors factoryをざっくり説明すると、 ①　空のインスタンスを作ります ②　そのインスタンスのメンバにいろいろ代入します ③　作り終わったインスタンスを返り値として返しますといった流れでインスタンスを作る方法のことを指します。対してリダイレクトコンストラクタは、「コンストラクタがもらった引数を元に他のコンストラクタを呼び出す」だけなので、全然別物です。ちなみにfactoryキーワードを外したコンストラクタはリダイレクトコンストラクタではなく、一般的なコンストラクタです。一般的なコンストラクタを使う時は、「インスタンス作成して返り値として返す」ではなく、「直接メンバに代入する」という方法でインスタンスを作成します。なので、一般的なコンストラクタとファクトリも別物です。おそらくfactoryキーワードを外すとビルドエラーが発生すると思います。そんでもって、初期化時にインスタンスメンバである`stars`にアクセスすることができないと思います。ファクトリにすることによって一度インスタンスを作ることになるのでインスタンスメンバである`stars`を参照することが可能になるという考え方です。あくまでファクトリを使うのは個人的におすすめしてるだけなので、他のアイデアで実装できるのであればそちらを使用しても構いません。（個人的に気になるのでコード貼り付けてコメントくれると嬉しいです）長文失礼しました(*- -)(*_ _)ﾍﾟｺﾘ

moriman

2020/11/01 03:12

まさに今回の質問とは少し話がずれて来るところなのですが、今回の質問に関しては多分toshi_kiさんのおっしゃる通り factoryコンストラクタ以外でやる方法は存在しないのだろう、と思います。それはそれとして、「factoryコンストラクタとリダイレクトコンストラクタ」の機能・使い所の違いについて、なのですが。ドキュメントを見ると確かに、「factoryコンストラクタはreturn文がある」「リダイレクトコンストラクタはbodyが空」など文法的な定義はあるので、「factoryキーワードはあってもなくてもどちらでも良い」ということにはならないですね。そこは私の認識が曖昧でした。それはそれとして、factoryコンストラクタでしかできないことがあるとすれば、それがfactoryコンストラクタの使い所、ということになると思うのですが、結局factoryもリダイレクトも、「別のコンストラクタを呼び出して生成されたインスタンスを返す」という機能は類似点であると思います。質問文に簡単なサンプルコードを追記させて頂きましたが、結局サンプル内の(3)のfactoryコンストラクタ MyApp(x) でやっていることは(2)のリダイレクトコンストラクタ MyApp.red(int x) でもできているので、この例ではfactoryコンストラクタでなくてはならない、ということではないと思います。そういう意味でドキュメントを見ても、あのサンプルコードで「factoryコンストラクタを定義すべき場面(定義しないといけない場面)はどういう場面なのか」まで読み取ることができる人は限られるのではないかという気がします。実際私もそこがずっとあやふやでモヤモヤしていたので、今回、最初の質問とは少し話がずれるとは思いましたが、質問させて頂きました。そしてまさに今回の状況が「factoryコンストラクタの使い所」ということなのかな、という気がします。

moriman

2020/11/01 03:12

お付き合い頂きましてありがとうございます。

行動規範の内容に同意します