I need to place a ListView above 2 buttons (in a Column) however I am having great difficulty in doing so, see below.

Example of what I want to achieve is a Terms and Conditions page with a list view containing text, with 2 buttons fixed to the bottom of the screen allowing the user to scroll and at any time click Accept/Decline.

Problem:

enter image description here

#1 & #3 is part of a scaffold template with a gradient background set. I fill in the content with a Widget, which should contain in this particular UI the ListView & Buttons.

#2 is what is causing the problem. When attempt to render the following UI, the stacktraces below show

import 'package:testapp/activities/ui_privacy.dart';
import 'package:testapp/ui/components/ui_button.dart';
import 'package:testapp/ui/components/ui_button_exit.dart';
import 'package:testapp/ui/design/ui_component_base_content_centre.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class UiTermsConditions extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Widget terms = ListView(
      children: [
        Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 8, bottom: 8),
          child: Text("Terms and Conditions",
              style: TextStyle(fontWeight: FontWeight.bold),
              textAlign: TextAlign.left),
        ),
        Container(
          width: double.infinity,
          child: Text(
            'These Terms and Conditions constitute a legally binding agreement made between you, whether personally or on behalf of an entity (“you”) and [business entity name] (“we,” “us” or “our”), concerning your access to and use of the [website name.com] website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto (collectively, the “Site”).'
            '\n\n'
            'You agree that by accessing the Site, you have read, understood, and agree to be bound by all of these Terms and Conditions. If you do not agree with all of these Terms and Conditions, then you are expressly prohibited from using the Site and you must discontinue use immediately.'
            '\n\n'
            'Supplemental terms and conditions or documents that may be posted on the Site from time to time are hereby expressly incorporated herein by reference. We reserve the right, in our sole discretion, to make changes or modifications to these Terms and Conditions at any time and for any reason.'
            '\n\n'
            'We will alert you about any changes by updating the “Last updated” date of these Terms and Conditions, and you waive any right to receive specific notice of each such change.'
            '\n\n'
            'It is your responsibility to periodically review these Terms and Conditions to stay informed of updates. You will be subject to, and will be deemed to have been made aware of and to have accepted, the changes in any revised Terms and Conditions by your continued use of the Site after the date such revised Terms and Conditions are posted.'
            '\n\n'
            'The information provided on the Site is not intended for distribution to or use by any person or entity in any jurisdiction or country where such distribution or use would be contrary to law or regulation or which would subject us to any registration requirement within such jurisdiction or country.'
            '\n\n'
            'Accordingly, those persons who choose to access the Site from other locations do so on their own initiative and are solely responsible for compliance with local laws, if and to the extent local laws are applicable.',
            softWrap: true,
          ),
        )
      ],
    );

    final Widget buttonRow = Container(
      padding: const EdgeInsets.only(top: 16),
      child: Column(
        children: [
          UiButton(
            text: "Accept",
            callback: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => UiPrivacy()));
            },
          ),
          UiButtonExit(
            text: "Decline",
            flat: true,
            padding: const EdgeInsets.only(top: 16),
          ),
        ],
      ),
    );

    ==================================== IMPORTANT BITS BELOW ======================

    final content = Column(
      children: [
        Expanded(
            // terms is a ListView
            child: terms
        ),
        buttonRow
      ],
    );
    return UiBaseContentCenter(widget: content);
  }
}

Posted Solutions:

There are a number of already posted solutions, however after try each - I have not had any success.

  • This post suggests the reason for not being able to place a ListView inside an Expanded inside a Column, but when rendered throws the following rendering error.

     ======== Exception caught by rendering library ===================================================== The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
    
      When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction. These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
    
      Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent. (removed for brevity)
    

TLD;DR Column attempts to shrink and minimize space used, while Expanded tries to fill up remaining space, these 2 operations are contradicting.

Setting MainAxisSize.min & changing Expanded to Flexible gives the following rendering error:

  Performing hot reload...
  Syncing files to device sdk gphone x86...

   ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during performResize():
    Vertical viewport was given unbounded height.

    Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

    If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    When the exception was thrown, this was the stack: 
    #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1356:15)
    #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1417:6)
    #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1756:9)
    #3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
    #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    ...
    The following RenderObject was being processed when the exception was fired: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...  needs compositing
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...  size: MISSING
    ...  axisDirection: down
    ...  crossAxisDirection: right
    ...  offset: ScrollPositionWithSingleContext#ad184(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#a328b, ScrollDirection.idle)
    ...  anchor: 0.0
    RenderObject: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
      needs compositing
      parentData: <none> (can use size)
      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
      size: MISSING
      axisDirection: down
      crossAxisDirection: right
      offset: ScrollPositionWithSingleContext#ad184(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#a328b, ScrollDirection.idle)
      anchor: 0.0
    ...  center child: RenderSliverPadding#256bb NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...    parentData: paintOffset=Offset(0.0, 0.0)
    ...    constraints: MISSING
    ...    geometry: null
    ...    padding: EdgeInsets(0.0, 24.0, 0.0, 0.0)
    ...    textDirection: ltr
    ...    child: RenderSliverList#c59be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...      parentData: paintOffset=Offset(0.0, 0.0)
    ...      constraints: MISSING
    ...      geometry: null
    ...      no children current live
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderViewport#a87b9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderIgnorePointer#14129 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderSemanticsAnnotations#1b4f6 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    Reloaded 0 of 916 libraries in 223ms.

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderPointerListener#48079 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during performLayout():
    RenderBox was not laid out: RenderSemanticsGestureHandler#beaa9 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'

    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
      https://github.com/flutter/flutter/issues/new?template=BUG.md

    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    When the exception was thrown, this was the stack: 
    #2      RenderBox.size (package:flutter/src/rendering/box.dart:1785:12)
    #3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:114:21)
    #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    #5      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
    #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    ...
    The following RenderObject was being processed when the exception was fired: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...  needs compositing
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...  size: MISSING
    ...  behavior: deferToChild
    ...  listeners: signal
    RenderObject: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
      needs compositing
      parentData: <none> (can use size)
      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
      size: MISSING
      behavior: deferToChild
      listeners: signal
    ...  child: RenderSemanticsGestureHandler#beaa9 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...    needs compositing
    ...    parentData: <none> (can use size)
    ...    constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...    size: MISSING
    ...    gestures: <none>
    ...    child: RenderPointerListener#48079 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...      needs compositing
    ...      parentData: <none> (can use size)
    ...      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...      size: MISSING
    ...      behavior: opaque
    ...      listeners: down
    ...      child: RenderSemanticsAnnotations#1b4f6 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...        needs compositing
    ...        parentData: <none> (can use size)
    ...        constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...        size: MISSING
    ...        child: RenderIgnorePointer#14129 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...          needs compositing
    ...          parentData: <none> (can use size)
    ...          constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...          size: MISSING
    ...          ignoring: false
    ...          ignoringSemantics: false
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: _RenderScrollSemantics#24769 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#a21f7 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderCustomPaint#5f4f4 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#f535d relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:62:21
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#f535d relayoutBoundary=up6 NEEDS-PAINT
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:62:21
    ====================================================================================================

    ======== Exception caught by rendering library =====================================================
    A RenderFlex overflowed by 167 pixels on the bottom.
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/ui/design/ui_component_base_content_centre.dart:16:14
    ====================================================================================================
  • This post suggests using Slivers, I copied and pasted the example however this isn't scrolling (it may just be my emulator(s))

  • I have tried a few other suggestions but have lost track already.

Any advice to implement such a simple UI design would be appreciated!

Some more code:

UIBaseContentCenter.dart

import 'package:testapp/ui/design/ui_component_base.dart';
import 'package:testapp/ui/layout/ui_component_logo_top.dart';
import 'package:testapp/ui/layout/ui_component_trademark_bottom.dart';
import 'package:flutter/widgets.dart';

class UiBaseContentCenter extends StatelessWidget {
  final Widget widget;
  final Widget bottomNavBar;

  const UiBaseContentCenter({Key key, this.widget, this.bottomNavBar}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var uiComponentTrademarkBottom = UiComponentTrademarkBottom();
    final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          widget,
          uiComponentTrademarkBottom
        ],
      ),
    );

    return UiBase(widget: mainComponent, bottomNavigationBar: bottomNavBar);
  }
}

Root UI Scaffold

UiBase.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

import '../app_theme.dart';

class UiBase extends StatelessWidget {
  final Widget widget;
  final AppBar appBar;
  final BottomNavigationBar bottomNavigationBar;

  const UiBase({Key key, this.widget, this.appBar, this.bottomNavigationBar})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (appBar != null && bottomNavigationBar != null) {
      return Scaffold(
        appBar: appBar,
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
        bottomNavigationBar: bottomNavigationBar,
      );
    } else if (appBar != null && bottomNavigationBar == null) {
      return Scaffold(
        appBar: appBar,
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
      );
    } else if (appBar == null && bottomNavigationBar != null) {
      return Scaffold(
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
        bottomNavigationBar: bottomNavigationBar,
      );
    } else {
      return Scaffold(
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
      );
    }
  }
}


Solution 1: Ricky

In your UIBaseContentCenter.dart

change

   final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          widget, // Here is the issue
          uiComponentTrademarkBottom
        ],
      ),
    );

to

   final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          Expanded(child: widget),
          uiComponentTrademarkBottom
        ],
      ),
    );