Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Align widget at the end of the CustomScrollView but make it scrollable when screen too small

How to build a layout using CustomScrollView such that the bottom block:

  1. Is in-line with other Slivers when the screen is small and view is scrollable
  2. Is aligned to the bottom edge when screen is sufficiently big, but view is not scrollable

Don’t want to use LayoutBuilder as the content of the blocks may vary e.g. depending on the font size, content shown etc.

Additionally, the content may be shown in a modal bottom sheet, so in a scrollable environment wrapping entire CustomScrollView. We can access the modal bottom sheet’s controller.

preview of the layout

Sample DartPad

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 300,
        color: Colors.green,
      ),
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 300,
        color: Colors.orange,
        child: Center(
          child: Text(
              'Keep me either aligned to the bottom or in-line with other slivers'),
        ),
      ),
    ),
  ],
),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I think I've found the solution, by using SliverFillRemaining's fillOverscroll: false, hasScrollBody: false, arguments and putting the child within Align:

    Updated DartPad

    CustomScrollView(
    slivers: [
  SliverToBoxAdapter(
    child: Container(
      height: 100,
      color: Colors.blue,
    ),
  ),
  SliverToBoxAdapter(
    child: Container(
      height: 300,
      color: Colors.green,
    ),
  ),
  SliverFillRemaining(
    fillOverscroll: false,
    hasScrollBody: false,
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 300,
        color: Colors.orange,
        child: Center(
          child: Text(
              'Keep me either aligned to the bottom or in-line with other slivers'),
        ),
      ),
    ),
  )

  2. 0

    Not sure if you can acheive that in a CustomScrollView.
    Here is a workaround that might help

    CustomScrollView(
    slivers: [
      SliverToBoxAdapter(
        child: Container(
          height: 100,
          color: Colors.blue,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          height: 300,
          color: Colors.green,
        ),
      ),
      SliverFillRemaining(
        child: Container(
          height: 300,
          color: Colors.orange,
          child: Center(
            child: Text(
                'Keep me either aligned to the bottom or in-line with other slivers'),
          ),
        ),
      )
    ],
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search