質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

解決済

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

LikeGeohot
LikeGeohot

総合スコア13

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

3回答

0リアクション

0クリップ

190閲覧

投稿2022/08/06 04:49

前提

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で使用したい。

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

エラーメッセージ

該当のソースコード

Flutter(Dart)

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

ta.fu

2022/08/06 07:12

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

2022/08/06 08:47

@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

2022/08/06 09:02

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。