How to vertical align ListView in the middle

Question

I want my list item in the middle of the ListView

@override Widget build(BuildContext context)
{
    List<String> listName = ['Woody', 'Buzz', 'Rex'];

    return Container
    (
      decoration: BoxDecoration(border: Border.all(color: Colors.pinkAccent)),
      width: 400,
      height: 700,
      alignment: Alignment.centerLeft,
      child: ListView.builder
      (
        itemCount: listName.length,
        itemBuilder: (context, index)
        {
          return OurName(listName[index]);
        },
      ),
    );
}

This is when I use shrinkWrap, when I scroll up it's cut off and it can't be scroll down shrinkWrap

This is what I expected expected

score 8 · Answer 1 · answered Apr 03 '19 at 11:49

8

The key to your issue is the shrinkWrap property of ListView. So to fix this you can do something like this:

Container(
        alignment: Alignment.centerLeft,
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Text("The index$index");
          },
          shrinkWrap: true,
          itemCount: 30,
        ),
      ),

answered Apr 03 '19 at 11:49

danypata

9,895
1
31
44

if I use `shrinkwrap`, the height of my `ListView` not 700 or as height as the screen anymore – cyclick Apr 04 '19 at 06:31
@cyclick You could set the height of the container to be 700 and the result will be the same and the list will update the height based on the content with a max height equal with the container height. – danypata Apr 04 '19 at 08:51

score 3 · Answer 2 · answered Mar 29 '20 at 16:03

For me works this code!

@override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      alignment: Alignment.center,
      child: ListView.builder(
          shrinkWrap: true,
          itemCount:rows.length,
          itemBuilder: (
            context,
            index,
          ) {
            return ...;
          }),
    );
  }

score 1 · Answer 3 · answered Jul 02 '22 at 06:05

I came here to center vertically (and horizontally) my listView, and came up with this:

@override
  Widget build(BuildContext context) {

    List<String> listName = ['Woody', 'Buzz', 'Rex'];

    return Align(
      child: ListView.builder(
        itemCount: listName.length,
        itemBuilder: (context, index) {
          return Center(child: Text(listName[index]));
        },
        shrinkWrap: true,
      ),
    );
  }

score 0 · Answer 4 · answered Apr 03 '19 at 11:49

0

i dont get what you mean do you want to align the whole listview then use a center widget and align the listview in the center, or use Align widget and manually align it by

Align(
  alignment: Alignment.centerRight,
  child: //here your list,
)

if thats not what you want or doesn't get the job done then please explain more.

answered Apr 03 '19 at 11:49

youssef ali

406
5
11

what I want to center it is the item in the listview – cyclick Apr 04 '19 at 06:32
i really dont see the need to do so but one question in mind to help you better is there any other elements in the list? – youssef ali Apr 04 '19 at 19:16
@danypata this is what I expected [link](https://i.stack.imgur.com/Fq7ZY.gif), I have no problem doing it in feathers [link](https://feathersui.com) (AS3), I want to port my app to flutter – cyclick Apr 06 '19 at 06:10
https://stackoverflow.com/questions/52991376/flutter-how-to-center-widget-inside-list-view – youssef ali Apr 06 '19 at 17:23
is this what are you looking for? – youssef ali Apr 06 '19 at 17:23

How to vertical align ListView in the middle

4 Answers4

Linked