top of page

[Flutter/Dart] Scroll part + fixed at the bottom


What want to do

Characters

  • A list of some items (hereafter ListView)

  • Some Widget (hereafter text)

Layout

  • Text is fixed at the bottom of the screen regardless of the number of items

  • The item list uses the space left over after placing the text. If the number is small, the lower part is a margin If there are many, scroll



Solution

Do the following.

Container(
  padding: const EdgeInsets.all(16),
  height: double.infinity,
  child: Column(
    children: [
      Expanded(
        child: _itemList(),
      ),
      _bottom()
    ],
  )
)

//itemList
Widget _itemList () => ListView.builder(
  shrinkWrap: true,
  itemBuilder: (context, index) => Text(
    index.toString(),
    style: const TextStyle(
      fontSize: 16
    ),
  ),
  itemCount: 100,
);

//Widget fixed at the botton
Widget _bottom() => const Text(
  "Bottom",
  style: TextStyle(
    fontSize: 18
  ),
);



The layout and size are determined as follows

  1. Container(height = doubke.infinity) height is set to screen height

  2. Text is placed at the bottom of the screen

  3. The screen area minus the size of Text is allocated to Expanded

  4. Expanded height assigned to ListView height

  5. If the list is longer than the Expanded height, it will be scrolled.

Lastly

When I try to do it with mainAxisAlignment of Column, it doesn't work.

In such a case, you can find a solution by actually imagining "in what order the layout and size are decided" in your head.


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page