FlutterError (setState() or markNeedsBuild() called during build.

Question

前提

BackdropScaffoldのプロパティのbackLayerにStatelessWidgetを使用したいが、
下記のエラーが出力されます。

FlutterError (setState() or markNeedsBuild() called during build.
This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
Overlay-[LabeledGlobalKey<OverlayState>#a20c3]
The widget which was currently being built when the offending call was made was:
BackLayerMenu)

実現したいこと

別ファイルに切り出しているStatelessWidgetをbackLayerで使用したい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List _carouselImages = [
    'assets/images/carousel_1.jpeg',
    'assets/images/carousel_2.jpeg',
    'assets/images/carousel_3.jpeg'
  ];

  List _companyImages = [
    'assets/images/disney.png',
    'assets/images/h_m.png',
    'assets/images/google.png'
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BackdropScaffold(
          frontLayerBackgroundColor: Theme.of(context).scaffoldBackgroundColor,
          headerHeight: MediaQuery.of(context).size.height * 0.25,
          appBar: BackdropAppBar(
            title: Text("Home"),
            leading: BackdropToggleButton(
              icon: AnimatedIcons.menu_home,
            ),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [ColorsConsts.starterColor, ColorsConsts.endColor],
                ),
              ),
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () {},
                iconSize: 15,
                padding: EdgeInsets.all(10),
                icon: CircleAvatar(
                  radius: 15,
                  backgroundColor: Colors.white,
                  child: CircleAvatar(
                    radius: 15,
                    backgroundImage: NetworkImage(
                      'https://xxxx.jpg',
                    ),
                  ),
                ),
              ),
            ],
          ),
          backLayer: BackLayer(),
          frontLayer: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 190,
                  width: double.infinity,
                  child: CarouselSlider(
                    options: CarouselOptions(
                      initialPage: 0,
                      viewportFraction: 1,
                      enableInfiniteScroll: true,
                      reverse: false,
                      autoPlay: true,
                      autoPlayInterval: const Duration(seconds: 5),
                      autoPlayCurve: Curves.fastOutSlowIn,
                      enlargeCenterPage: true,
                      scrollDirection: Axis.horizontal,
                    ),
                    items: _carouselImages.map((image) {
                      return Builder(
                        builder: (BuildContext context) {
                          return Image.asset(image, fit: BoxFit.cover);
                        },
                      );
                    }).toList(),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Text(
                    'Categories',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 180,
                  child: ListView.builder(
                    itemCount: 4,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext ctx, int index) {
                      return CategoryWidget(index: index);
                    },
                  ),
                ),
                // Popular Company
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Row(
                    children: [
                      Text(
                        'Popular Company',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Spacer(),
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pushNamed(
                            BrandNavigationRailScreen.routeName,
                            arguments: {
                              7,
                            },
                          );
                        },
                        child: Text(
                          'View all...',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 170,
                  width: MediaQuery.of(context).size.width * 0.95,
                  child: Swiper(
                    itemCount: _companyImages.length,
                    autoplay: true,
                    viewportFraction: 0.8,
                    scale: 0.9,
                    onTap: (index) {
                      Navigator.of(context).pushNamed(
                        BrandNavigationRailScreen.routeName,
                        arguments: {
                          index,
                        },
                      );
                    },
                    itemBuilder: (BuildContext ctx, int index) {
                      return ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Container(
                          color: Colors.blueGrey,
                          child: Image.asset(
                            _companyImages[index],
                            fit: BoxFit.cover,
                          ),
                        ),
                      );
                    },
                  ),
                ),
                // Popular Products
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Row(
                    children: [
                      Text(
                        'Popular Products',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Spacer(),
                      TextButton(
                        onPressed: () {},
                        child: Text(
                          'View all...',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 285,
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  child: ListView.builder(
                    itemCount: 4,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext ctx, int index) {
                      return PopularProducts();
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

pubspec.yaml
backdrop: ^0.8.0

Comments

[ta.fu]

再現可能なコードが提示されていないと、答えが付かないと思います。

エラーを見るに、「ウィジェットの作成途中にウィジェット再作成マークがされたから」というもの。
そういうところをしらみつぶしに調べるか、setState等のウィジェット再作成マークのコードにブレークポイントを入れて、build後に止まるところを探すしかないのでは。
後はFutureリターンの関数をawaitせずに呼び出しているところとか。
呈示されたコードをざっと見、そういうところはなさそうなので。

[LikeGeohot]

@ta.fu

ありがとうございます。
backLayer: BackLayer()の再描画によるものかと推測しています。
お時間あれば、ご確認願います。

import 省略

class BackLayer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
fit: StackFit.expand,
children: [
Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
ColorsConsts.starterColor,
ColorsConsts.endColor,
],
begin: FractionalOffset(0.0, 0.0),
end: FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp,
),
),
),
Positioned(
top: -100.0,
left: 140.0,
child: Transform.rotate(
angle: -0.5,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white.withOpacity(0.3),
),
width: 150,
height: 250,
),
),
),
Positioned(
bottom: 0.0,
right: 100.0,
child: Transform.rotate(
angle: -0.8,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white.withOpacity(0.3),
),
width: 150,
height: 300,
),
),
),
Positioned(
top: -50.0,
left: 60.0,
child: Transform.rotate(
angle: -0.5,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white.withOpacity(0.3),
),
width: 150,
height: 200,
),
),
),
Positioned(
bottom: 10.0,
right: 0.0,
child: Transform.rotate(
angle: -0.8,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white.withOpacity(0.3),
),
width: 150,
height: 200,
),
),
),
SingleChildScrollView(
child: Container(
margin: EdgeInsets.all(50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: Container(
padding: EdgeInsets.all(8.0),
height: 100,
width: 100,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
'https://xxx.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
SizedBox(height: 10.0),
content(
context,
() {
navigateTo(context, FeedsScreen.routeName);
},
'Feeds',
0,
),
SizedBox(height: 10.0),
content(
context,
() {
navigateTo(context, CartScreen.routeName);
},
'Cart',
1,
),
SizedBox(height: 10.0),
content(
context,
() {
navigateTo(context, FeedsScreen.routeName);
},
'Wishlist',
2,
),
SizedBox(height: 10.0),
content(
context,
() {
navigateTo(context, FeedsScreen.routeName);
},
'Upload a new product',
3,
),
],
),
),
)
],
);
}

final List _contentIcons = [
MyAppIcons.rss,
MyAppIcons.bag,
MyAppIcons.upload,
MyAppIcons.cart,
];

void navigateTo(BuildContext ctx, String routeName) {
Navigator.of(ctx).pushNamed(routeName);
}

Widget content(BuildContext ctx, Function fct, String text, int index) {
return InkWell(
onTap: fct(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Text(
text,
style: TextStyle(fontWeight: FontWeight.w700),
textAlign: TextAlign.center,
),
),
Icon(_contentIcons[index])
],
),
);
}
}

[ta.fu]

ソースコードはコメント欄に書くのではなく、質問欄に追記(編集)するようにしてください。
見づらいです。

Answer 1

BackLayer側のソースコードを見る限りでは以下の点が問題なのかな？

  Widget content(BuildContext ctx, Function fct, String text, int index) {
    return InkWell(
      onTap: fct(),

この関数のfctがFunction型で、onTapに関数を割り付けているように見えて、fct()と実行した結果を渡しているように見える。
そのため、contentの呼び出しで渡している関数のnavigateToがビルド時に実行されてしまっているとか。
またnavigateToの中のpushNamedはFutureなので、忘れたころにpushNamedが実行されているとか。

  Widget content(BuildContext ctx, void Function() fct, String text, int index) {
    return InkWell(
      onTap: fct,

上の様に修正したらどうでしょうか？
こちらでは実行できないんで、あくまでソースコードからの類推にすぎませんが。

Comments

[LikeGeohot]

ありがとうございます。
こちらご指摘がある箇所を修正しましたら、buildが通りました。

Answer 2

パート2

class BackLayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                //ColorsConsts.starterColor, ColorsConsts.endColor,
                Colors.blue, Colors.red,
              ],
              begin: FractionalOffset(0.0, 0.0),
              end: FractionalOffset(1.0, 0.0),
              stops: [0.0, 1.0],
              tileMode: TileMode.clamp,
            ),
          ),
        ),
        Positioned(
          top: -100.0,
          left: 140.0,
          child: Transform.rotate(
            angle: -0.5,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: Colors.white.withOpacity(0.3),
              ),
              width: 150,
              height: 250,
            ),
          ),
        ),
        Positioned(
          bottom: 0.0,
          right: 100.0,
          child: Transform.rotate(
            angle: -0.8,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: Colors.white.withOpacity(0.3),
              ),
              width: 150,
              height: 300,
            ),
          ),
        ),
        Positioned(
          top: -50.0,
          left: 60.0,
          child: Transform.rotate(
            angle: -0.5,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: Colors.white.withOpacity(0.3),
              ),
              width: 150,
              height: 200,
            ),
          ),
        ),
        Positioned(
          bottom: 10.0,
          right: 0.0,
          child: Transform.rotate(
            angle: -0.8,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: Colors.white.withOpacity(0.3),
              ),
              width: 150,
              height: 200,
            ),
          ),
        ),
        SingleChildScrollView(
          child: Container(
            margin: EdgeInsets.all(50),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Center(
                  child: Container(
                    padding: EdgeInsets.all(8.0),
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      color: Theme.of(context).backgroundColor,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20.0),
                        image: DecorationImage(
                          image: NetworkImage('https://xxx.jpg'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                content(
                  context,
                  () {
                    //navigateTo(context, FeedsScreen.routeName);
                  },
                  'Feeds',
                  0,
                ),
                SizedBox(height: 10.0),
                content(
                  context,
                  () {
                    //navigateTo(context, CartScreen.routeName);
                  },
                  'Cart',
                  1,
                ),
                SizedBox(height: 10.0),
                content(
                  context,
                  () {
                    //navigateTo(context, FeedsScreen.routeName);
                  },
                  'Wishlist',
                  2,
                ),
                SizedBox(height: 10.0),
                content(
                  context,
                  () {
                    //navigateTo(context, FeedsScreen.routeName);
                  },
                  'Upload a new product',
                  3,
                ),
              ],
            ),
          ),
        )
      ],
    );
  }

  final List _contentIcons = [
    //MyAppIcons.rss, MyAppIcons.bag, MyAppIcons.upload, MyAppIcons.cart,
    Icons.rss_feed,Icons.shopping_bag,Icons.upload,Icons.card_travel,
  ];

  void navigateTo(BuildContext ctx, String routeName) {
    Navigator.of(ctx).pushNamed(routeName);
  }

  Widget content(BuildContext ctx, void Function() fct, String text, int index) {
    return InkWell(
      onTap: fct,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              text,
              style: TextStyle(fontWeight: FontWeight.w700),
              textAlign: TextAlign.center,
            ),
          ),
          Icon(_contentIcons[index])
        ],
      ),
    );
  }
}

Answer 3

これで一応BackLayerも表示されているようなのですがいかがでしょうか。
他の回答者様のご指摘の通り、
onTap: fct,
が正しいと思います。
私が気になったのはドキュメントに

Use BackdropScaffold instead of the standard Scaffold in your app.

とあるので、Scaffoldは不要なのではないか、ということだったのですが、(多分不要だとは思いますが、)なぜかScaffold有りでも動いています。
結局何が原因なのかよくわからないのですが、とりあえず質問文にお示しのエラーはこちらでは出ていないようです。

結局こちらでやったことは「コピペして、コードの不足によるエラーを消すために適当にコメントアウトなどした」だけです。一応Scaffoldを削除して動かしても動きましたが、Scaffold有りでも同じように動いています。

そちらのゴールがどういう挙動なのかわからないので、後はいいようにしていただければと思います。
(文字数制限があるのでコードを分割します、パート1)

import 'package:backdrop/backdrop.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List _carouselImages = [
    'assets/images/carousel_1.jpeg',
    'assets/images/carousel_2.jpeg',
    'assets/images/carousel_3.jpeg'
  ];

  List _companyImages = [
    'assets/images/disney.png',
    'assets/images/h_m.png',
    'assets/images/google.png'
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BackdropScaffold(
          frontLayerBackgroundColor: Theme.of(context).scaffoldBackgroundColor,
          headerHeight: MediaQuery.of(context).size.height * 0.25,
          appBar: BackdropAppBar(
            title: Text("Home"),
            leading: BackdropToggleButton(
              icon: AnimatedIcons.menu_home,
            ),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    //ColorsConsts.starterColor,
                    //ColorsConsts.endColor,
                    Colors.red,
                    Colors.blue,
                  ],
                ),
              ),
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () {},
                iconSize: 15,
                padding: EdgeInsets.all(10),
                icon: CircleAvatar(
                  radius: 15,
                  backgroundColor: Colors.white,
                  child: CircleAvatar(
                    radius: 15,
                    backgroundImage: NetworkImage(
                      'https://xxxx.jpg',
                    ),
                  ),
                ),
              ),
            ],
          ),
          backLayer:
          /*
          Center(
            child: Text('back layer'),
          ),
          */
          BackLayer(),
          frontLayer: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 190,
                  width: double.infinity,
                  child: CarouselSlider(
                    options: CarouselOptions(
                      initialPage: 0,
                      viewportFraction: 1,
                      enableInfiniteScroll: true,
                      reverse: false,
                      autoPlay: true,
                      autoPlayInterval: const Duration(seconds: 5),
                      autoPlayCurve: Curves.fastOutSlowIn,
                      enlargeCenterPage: true,
                      scrollDirection: Axis.horizontal,
                    ),
                    items: _carouselImages.map((image) {
                      return Builder(
                        builder: (BuildContext context) {
                          return Image.asset(image, fit: BoxFit.cover);
                        },
                      );
                    }).toList(),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Text(
                    'Categories',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 180,
                  child: ListView.builder(
                    itemCount: 4,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext ctx, int index) {
                      return Center(
                        child: Text('categoryWidget'),
                      );
                      //CategoryWidget(index: index);
                    },
                  ),
                ),
                // Popular Company
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Row(
                    children: [
                      Text(
                        'Popular Company',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Spacer(),
                      TextButton(
                        onPressed: () {
                          /*
                              Navigator.of(context).pushNamed(
                                BrandNavigationRailScreen.routeName,
                                arguments: {
                                  7,
                                },
                              );
                              */
                        },
                        child: Text(
                          'View all...',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 170,
                  width: MediaQuery.of(context).size.width * 0.95,
                  child: Center(child: Text('swiper')),
                  /*
                      Swiper(
                        itemCount: _companyImages.length,
                        autoplay: true,
                        viewportFraction: 0.8,
                        scale: 0.9,
                        onTap: (index) {
                          /*
                          Navigator.of(context).pushNamed(
                            BrandNavigationRailScreen.routeName,
                            arguments: {
                              index,
                            },
                          );
                          */
                        },
                        itemBuilder: (BuildContext ctx, int index) {
                          return ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Container(
                              color: Colors.blueGrey,
                              child: Image.asset(
                                _companyImages[index],
                                fit: BoxFit.cover,
                              ),
                            ),
                          );
                        },
                      ),
                      */
                ),
                // Popular Products
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Row(
                    children: [
                      Text(
                        'Popular Products',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Spacer(),
                      TextButton(
                        onPressed: () {},
                        child: Text(
                          'View all...',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 285,
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  child: ListView.builder(
                    itemCount: 4,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext ctx, int index) {
                      return Center(
                        child: Text('PopularProducts'),
                      );
                      //PopularProducts();
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
    //);
  }
}