前提
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

回答3件
あなたの回答
tips
プレビュー