Flutterでスナックバーを部品化したい

snackBarをどこからでも使えるように部品かしたいのですが、違うファイルにした途端にエラーが出てしまいます。

スナックバーを形成する部分のみをCustomSnackBarというクラスにした時

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Homepage(),
    );
  }
}

class Homepage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('テスト'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('スナックバー表示'),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                final snackbar = CustomSnackBar();
                Scaffold.of(context).showSnackBar(snackbar);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CustomSnackBar extends SnackBar {
  @override
  Widget build(BuildContext context) {
    return SnackBar(
      content: Text('10秒後に消えます'),
      action: SnackBarAction(
        label: '閉じる',
        onPressed: () {
          Scaffold.of(context).removeCurrentSnackBar();
        },
      ),
      duration: Duration(seconds: 10),
    );
  }
}

ビルドは通るのですが、いざレイズドボタンを押下するとエラーが出ます

'package:flutter/src/material/snack_bar.dart': Failed assertion: line 189 pos 15: 'content != null': is not true.

SnackBarクラスの中のcontenという部分がfalseを返してしまっているという内容のようです。

スナックバーを他のクラスに移すことは不可能なのでしょうか？

レイズドボタンごと移動させるとエラーは出ません。

よろしくお願いします。

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

回答1件

ベストアンサー

以下のように修正することで動作します。

##修正ポイント

###1. class CustomSnackBar

SnackBarのコンストラクタをカスタマイズしている位置付けなので、コンストラクタを書きましょう。
buildはclass Homepageの中で呼ばれるものなので、こちらには書かないです。
contextはclass Homepage側で定義している変数なので、こちらで使う場合、コンストラクタで渡してあげるのがよいです。これにより、当初のエラー'content != null': is not true.が解消されます。
Widgetのコンストラクタをカスタマイズしている参考例: Flutterでウィジェット（widget）を継承したときのイベントがエラーになる

###2. class Homepage

上記のエラーをとると、新たにScaffold.of() called with a context that does not contain a Scaffold.というエラーが、class Homepage側で発生します。そのまま読むとWidget build(BuildContext context)というScaffoldの外側のcontextのままでは、Scaffold.of()を呼んではいけないそうです。もとのコードはSnackBarの実装例でよくある形なので、以前は問題なかったのが最近エラーになったのかもしれません。
こちらの対処としてBuilderでラップする、というのが書かれており、それを適用したところエラーは無くなりました。
Builderでラップしてエラー回避している参考例: FlutterでToastを表示する

##修正済コード

Dart
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      debugShowCheckedModeBanner: false,
12      title: '',
13      theme: ThemeData(
14        primarySwatch: Colors.blue,
15      ),
16      home: Homepage(),
17    );
18  }
19}
20
21class Homepage extends StatelessWidget {
22  Widget build(BuildContext context) {
23    return Scaffold(
24      appBar: AppBar(
25        title: Text('テスト'),
26      ),
27      body: Builder(builder: (BuildContext context) {
28        return Center(
29          child: Column(
30            children: [
31              RaisedButton(
32                child: Text('スナックバー表示'),
33                color: Colors.blue,
34                textColor: Colors.white,
35                onPressed: () {
36                  final snackbar = CustomSnackBar(context);
37                  Scaffold.of(context).showSnackBar(snackbar);
38                },
39              ),
40            ],
41          ),
42        );
43      })
44    );
45  }
46}
47
48class CustomSnackBar extends SnackBar {
49  CustomSnackBar(BuildContext context) : super(
50    content: Text('10秒後に消えます'),
51    action: SnackBarAction(
52      label: '閉じる',
53      onPressed: () {
54        Scaffold.of(context).removeCurrentSnackBar();
55      },
56    ),
57    duration: Duration(seconds: 10),
58  );
59}
60