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

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

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

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

Dart

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

Q&A

解決済

3回答

576閲覧

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

LikeGeohot

総合スコア13

Flutter

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

Dart

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

0グッド

0クリップ

投稿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)

1 2class HomeScreen extends StatefulWidget { 3 @override 4 State<HomeScreen> createState() => _HomeScreenState(); 5} 6 7class _HomeScreenState extends State<HomeScreen> { 8 List _carouselImages = [ 9 'assets/images/carousel_1.jpeg', 10 'assets/images/carousel_2.jpeg', 11 'assets/images/carousel_3.jpeg' 12 ]; 13 14 List _companyImages = [ 15 'assets/images/disney.png', 16 'assets/images/h_m.png', 17 'assets/images/google.png' 18 ]; 19 20 @override 21 void initState() { 22 super.initState(); 23 } 24 25 @override 26 Widget build(BuildContext context) { 27 return Scaffold( 28 body: Center( 29 child: BackdropScaffold( 30 frontLayerBackgroundColor: Theme.of(context).scaffoldBackgroundColor, 31 headerHeight: MediaQuery.of(context).size.height * 0.25, 32 appBar: BackdropAppBar( 33 title: Text("Home"), 34 leading: BackdropToggleButton( 35 icon: AnimatedIcons.menu_home, 36 ), 37 flexibleSpace: Container( 38 decoration: BoxDecoration( 39 gradient: LinearGradient( 40 colors: [ColorsConsts.starterColor, ColorsConsts.endColor], 41 ), 42 ), 43 ), 44 actions: <Widget>[ 45 IconButton( 46 onPressed: () {}, 47 iconSize: 15, 48 padding: EdgeInsets.all(10), 49 icon: CircleAvatar( 50 radius: 15, 51 backgroundColor: Colors.white, 52 child: CircleAvatar( 53 radius: 15, 54 backgroundImage: NetworkImage( 55 'https://xxxx.jpg', 56 ), 57 ), 58 ), 59 ), 60 ], 61 ), 62 backLayer: BackLayer(), 63 frontLayer: SingleChildScrollView( 64 child: Column( 65 crossAxisAlignment: CrossAxisAlignment.start, 66 children: [ 67 Container( 68 height: 190, 69 width: double.infinity, 70 child: CarouselSlider( 71 options: CarouselOptions( 72 initialPage: 0, 73 viewportFraction: 1, 74 enableInfiniteScroll: true, 75 reverse: false, 76 autoPlay: true, 77 autoPlayInterval: const Duration(seconds: 5), 78 autoPlayCurve: Curves.fastOutSlowIn, 79 enlargeCenterPage: true, 80 scrollDirection: Axis.horizontal, 81 ), 82 items: _carouselImages.map((image) { 83 return Builder( 84 builder: (BuildContext context) { 85 return Image.asset(image, fit: BoxFit.cover); 86 }, 87 ); 88 }).toList(), 89 ), 90 ), 91 Padding( 92 padding: const EdgeInsets.all(4.0), 93 child: Text( 94 'Categories', 95 style: TextStyle( 96 fontSize: 18, 97 fontWeight: FontWeight.w600, 98 ), 99 ), 100 ), 101 Container( 102 width: double.infinity, 103 height: 180, 104 child: ListView.builder( 105 itemCount: 4, 106 scrollDirection: Axis.horizontal, 107 itemBuilder: (BuildContext ctx, int index) { 108 return CategoryWidget(index: index); 109 }, 110 ), 111 ), 112 // Popular Company 113 Padding( 114 padding: const EdgeInsets.all(4.0), 115 child: Row( 116 children: [ 117 Text( 118 'Popular Company', 119 style: TextStyle( 120 fontSize: 18, 121 fontWeight: FontWeight.w600, 122 ), 123 ), 124 Spacer(), 125 TextButton( 126 onPressed: () { 127 Navigator.of(context).pushNamed( 128 BrandNavigationRailScreen.routeName, 129 arguments: { 130 7, 131 }, 132 ); 133 }, 134 child: Text( 135 'View all...', 136 style: TextStyle( 137 fontSize: 15, 138 color: Colors.red, 139 ), 140 ), 141 ), 142 ], 143 ), 144 ), 145 Container( 146 height: 170, 147 width: MediaQuery.of(context).size.width * 0.95, 148 child: Swiper( 149 itemCount: _companyImages.length, 150 autoplay: true, 151 viewportFraction: 0.8, 152 scale: 0.9, 153 onTap: (index) { 154 Navigator.of(context).pushNamed( 155 BrandNavigationRailScreen.routeName, 156 arguments: { 157 index, 158 }, 159 ); 160 }, 161 itemBuilder: (BuildContext ctx, int index) { 162 return ClipRRect( 163 borderRadius: BorderRadius.circular(10), 164 child: Container( 165 color: Colors.blueGrey, 166 child: Image.asset( 167 _companyImages[index], 168 fit: BoxFit.cover, 169 ), 170 ), 171 ); 172 }, 173 ), 174 ), 175 // Popular Products 176 Padding( 177 padding: const EdgeInsets.all(4.0), 178 child: Row( 179 children: [ 180 Text( 181 'Popular Products', 182 style: TextStyle( 183 fontSize: 18, 184 fontWeight: FontWeight.w600, 185 ), 186 ), 187 Spacer(), 188 TextButton( 189 onPressed: () {}, 190 child: Text( 191 'View all...', 192 style: TextStyle( 193 fontSize: 15, 194 color: Colors.red, 195 ), 196 ), 197 ), 198 ], 199 ), 200 ), 201 Container( 202 height: 285, 203 width: double.infinity, 204 margin: EdgeInsets.symmetric(horizontal: 3), 205 child: ListView.builder( 206 itemCount: 4, 207 scrollDirection: Axis.horizontal, 208 itemBuilder: (BuildContext ctx, int index) { 209 return PopularProducts(); 210 }, 211 ), 212 ), 213 ], 214 ), 215 ), 216 ), 217 ), 218 ); 219 } 220} 221

試したこと

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

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

pubspec.yaml
backdrop: ^0.8.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答3

0

ベストアンサー

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

dart

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

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

dart

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

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

投稿2022/08/06 09:08

ta.fu

総合スコア1664

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

LikeGeohot

2022/08/09 23:54

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

0

パート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]) ], ), ); } }

投稿2022/08/06 14:37

moriman

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これで一応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(); }, ), ), ], ), ), ), ), ); //); } }

投稿2022/08/06 14:36

moriman

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問