如何在页面视图中嵌套列表视图

Question

I am trying to use a ListView inside a PageView .

I am trying to create two pages that are scrollable, please do offer advice if I am using the PageView wrong.

This what I could do so far.

class ProductDetail extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ProductDetailState();
}

class ProductDetailState extends State {
    int selectedBarIndex = 0;
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text('Lime new-entries', style: TextStyle(color: Colors.black),),
      ),
      body: SizedBox(
        child: PageView(
          
          controller: _pageController,
          onPageChanged: (index) {
            setState(() => selectedBarIndex= index);
          },
          children: <Widget>[
            
            ListView(
              shrinkWrap: true,
              children: <Widget>[
              
              // Container(color: Colors.purple, child: NewEntryPage(),),
              Container(
                  padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 0.0),
                  alignment: Alignment.topLeft,
                  child: NewEntryPage()),
            ],),
           
            Container(color: Colors.red,),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: selectedBarIndex,
        onItemSelected: (index) {
          setState(() => selectedBarIndex = index);
          _pageController.jumpToPage(index);
        },
        items: <BottomNavyBarItem>[
          BottomNavyBarItem(
            title: Text('Sold-entries'),
            icon: Icon(Icons.assignment_returned)
          ),
          BottomNavyBarItem(
            title: Text('New-entries'),
            icon: Icon(Icons.apps)
          ),
        ],
        ),
    );
  }
}

This is the error I am getting back if it helps

An Observatory debugger and profiler on itel S12 is available at: http://127.0.0.1:38337/QVxHZaGGG2Y=/
I/flutter ( 5479): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5479): The following assertion was thrown while applying parent data.:
I/flutter ( 5479): Incorrect use of ParentDataWidget.
I/flutter ( 5479): The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
I/flutter ( 5479): RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
I/flutter ( 5479): Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
I/flutter ( 5479): Expanded widgets are placed directly inside Flex widgets.
I/flutter ( 5479): The offending Expanded is currently placed inside a Padding widget.
I/flutter ( 5479): The ownership chain for the RenderObject that received the incompatible parent data was:
I/flutter ( 5479):   ClipPath ← Expanded ← Chart ← Padding ← ColoredBox ← ConstrainedBox ← Padding ← Container ←
I/flutter ( 5479): RepaintBoundary ← IndexedSemantics ← ⋯
I/flutter ( 5479): 
I/flutter ( 5479): When the exception was thrown, this was the stack:
I/flutter ( 5479): #0      RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5645:11)
I/flutter ( 5479): #1      RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5661:6)
I/flutter ( 5479): #2      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5682:7)
I/flutter ( 5479): #3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5376:5)
I/flutter ( 5479): #4      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5829:11)
I/flutter ( 5479): ...     Normal element mounting (63 frames)
I/flutter ( 5479): #67     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
I/flutter ( 5479): #68     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
I/flutter ( 5479): #69     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1162:36)
I/flutter ( 5479): #70     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1147:20)
I/flutter ( 5479): #71     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2607:19)
I/flutter ( 5479): #72     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1140:11)
I/flutter ( 5479): #73     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:354:23)
I/flutter ( 5479): #74     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1866:58)
I/flutter ( 5479): #75     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:918:15)
I/flutter ( 5479): #76     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1866:13)
I/flutter ( 5479): #77     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:343:5)
I/flutter ( 5479): #78     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:489:5)
I/flutter ( 5479): #79     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:219:19)
I/flutter ( 5479): #80     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:262:19)
I/flutter ( 5479): #81     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #82     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:135:11)
I/flutter ( 5479): #83     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:375:11)
I/flutter ( 5479): #84     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #85     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:452:13)
I/flutter ( 5479): #86     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1444:12)
I/flutter ( 5479): #87     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1353:20)
I/flutter ( 5479): #88     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #89     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #90     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #91     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #92     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #93     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #94     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #95     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #96     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #97     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #98     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #99     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #100    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #101    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #102    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #103    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #104    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #105    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #106    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #107    MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:11)
I/flutter ( 5479): #108    _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:484:7)
I/flutter ( 5479): #109    MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
I/flutter ( 5479): #110    RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:399:14)
I/flutter ( 5479): #111    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #112    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #113    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #114    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #115    _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1248:11)
I/flutter ( 5479): #116    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #117    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #118    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #119    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #120    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #121    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #122    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #123    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #124    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #125    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #126    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #127    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #128    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #129    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #130    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #131    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #132    RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3225:13)
I/flutter ( 5479): #133    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #134    _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:700:15)
I/flutter ( 5479): #135    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #136    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #137    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #138    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #139    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #140    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #141    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #142    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #143    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #144    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #145    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #146    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #147    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #148    RenderView.performLayout (package:flutter/src/rendering/view.dart:167:13)
I/flutter ( 5479): #149    RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1630:7)
I/flutter ( 5479): #150    PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:887:18)
I/flutter ( 5479): #151    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:402:19)
I/flutter ( 5479): #152    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:13)
I/flutter ( 5479): #153    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:284:5)
I/flutter ( 5479): #154    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
I/flutter ( 5479): #155    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1052:9)
I/flutter ( 5479): #156    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:861:7)
I/flutter ( 5479): (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter ( 5479): ════════════════════════════════════════════════════════════════════════════════════════════════════
D/GraphicBuffer( 5479): register, handle(0x91ff7d50) (w:480 h:854 s:480 f:0x1 u:0x000f02)
D/GraphicBuffer( 5479): register, handle(0x91ff7ea0) (w:480 h:854 s:480 f:0x1 u:0x000f02)
I/flutter ( 5479): value:2
I/flutter ( 5479): Another exception was thrown: RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: _RenderInkFeatures object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPhysicalModel object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderFlex object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPositionedBox object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPadding object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderRepaintBoundary object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderIndexedSemantics object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

This is the newEntryPage code that return a column

class NewEntryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NewEntryPageState();
}

class NewEntryPageState extends State<NewEntryPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Column(
      children: <Widget>[
        TopSummaryCard(),
        Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          padding: const EdgeInsets.all(10.0),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () {
                        if (_tabController.index > 0) {
                          _tabController.animateTo(_tabController.index - 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't go back"),
                          ));
                        }
                      },
                    ),
                    Expanded(
                      child: TabBar(
                        isScrollable: true,
                        controller: _tabController,
                        labelStyle: TextStyle(color: Colors.black),
                        unselectedLabelColor: Colors.black,
                        labelColor: Colors.blue,
                        tabs: List.generate(
                          20,
                          (index) {
                            return Tab(
                              text: "Tab $index",
                            );
                          },
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_forward_ios),
                      onPressed: () {
                        if (_tabController.index + 1 < 20) {
                          _tabController.animateTo(_tabController.index + 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't move forward"),
                          ));
                        }
                      },
                    ),
                  ],
                ),
                //   }
              ),
              // )
              BarChartSample1()
            ],
          ),
        ),
        BottomBarNavigationPatternExample(),
      ],
    );
  }
}

Answer 1

On your ListView set shrinkWrap to true . This will make the ListView take only the space that it needs instead of expanding.

ListView(
shrinkWrap: true,
  children: <Widget>[
    Container(
      color: Colors.purple,
      child: NewEntryPage(),),
  ],
),

Answer 2

The problem is with the ListView . ListView always require a finite height . As you can see in the error clearly, the error saya => RenderFlex object was given an infinite size during layout.

Now, the thing is, you need to wrap your ListView with some finite height using any of the two widgets, these are:

• Expanded class

Example:

Expanded(
  child: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Container(
       color: Colors.purple,
       child: NewEntryPage()
      )
    ]
  ) 
)

If you still get error then you can use this:

• Flexible class

Example

Flexible(
  flex: 2, // you can play with the flex like 1,2,3....
  fit: FlexFit.loose,
  child: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Container(
       color: Colors.purple,
       child: NewEntryPage()
      )
    ]
  )
)

This will help take the remaining space automatically, and help the ListView to take up the space which is being provided by any of the Widgets mentioned above