Incorrect Use of Parent Data Widget. Expanded Widgets Must Be Placed Inside Flex Widgets

Problematic Code

@override
Widget build(BuildContext context) {
 return MaterialApp(
   title: widget.title,
   theme: ThemeData.light().copyWith(
     platform: _platform ?? Theme.of(context).platform,
   ),
   home: DefaultTabController(
     length: categoryNames.length,
     child: Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: SafeArea(
           child: Column(
         children: <Widget>[
           Chewie(
             controller: _chewieController,
           ),
           TabBar(
             labelColor: Colors.black,
             tabs: categoryNames,
           ),
           Expanded(
             child: TabBarView(
               children: [ImageList()],
             ),
           ), 
         ],
       )),
     ),
   ),
 );
}

Solution

The error “Incorrect use of parent data widget. Expanded widgets must be placed inside Flex widgets” occurs because the Expanded widget is not placed within a Column, Row, or Flex widget. The Expanded widget needs to be a direct child of one of these widgets to function correctly.

In the above code, the Expanded widget is correctly placed inside a Column. However, it’s possible that the error is caused by a misconfiguration in your widget hierarchy or an issue with the TabBarView, which contains ImageList().

By changing the listview integration, this issue may get resolved.

Here’s a revised version of your code that should fix the issue:

@override
Widget build(BuildContext context) {
 return MaterialApp(
   title: widget.title,
   theme: ThemeData.light().copyWith(
     platform: _platform ?? Theme.of(context).platform,
   ),
   home: DefaultTabController(
     length: categoryNames.length,
     child: Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: SafeArea(
         child: Column(
           children: [
             Chewie(
               controller: _chewieController,
             ),
             TabBar(
               labelColor: Colors.black,
               tabs: categoryNames.map((name) => Tab(text: name)).toList(),
             ),
             Expanded(
               child: TabBarView(
                 children: categoryNames.map((name) => ImageList()).toList(),
               ),
             ),
           ],
         ),
       ),
     ),
   ),
 );
}