The size of the Column inside the SliverList changes

48 Views Asked by At
body: LayoutBuilder(
          builder: (context, constraints) {
            final itemCount = ref.watch(CounterNameProvider).length;
            if (constraints.maxHeight > itemCount * 96) {
              return Column(
                children: [
                  for (var i = 0; i < itemCount; i++)
                    Expanded(child: Counter(index: i))
                ],
              );
            } else {
              return CustomScrollView(
                slivers: [
                  SliverList.builder(
                    itemCount: ref.watch(CounterNameProvider).length,
                    itemBuilder: (context, index) {
                      return Counter(
                        index: index,
                      );
                    },
                  )
                ],
              );
            }
          },
        )

This is part of my flutter program. I output the Counter widget in a Column or CustomScrollView, depending on the screen size and the number of widgets.

And this is my Counter widget.

class Counter extends ConsumerWidget {
  final int index;
  const Counter({super.key, required this.index});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final name = ref.watch(CounterNameProvider)[index];
    final value = ref.watch(CounterValueProvider)[index];
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(8)),
        child: InkWell(
          onTap: () {
            // ref.read(CounterValueProvider.notifier).plusValue(index);
          },
          onLongPress: () {
            ref.read(CounterNameProvider.notifier).removeName(index);
            ref.read(CounterValueProvider.notifier).removeValue(index);
          },
          child: Container(
            color: Color(int.parse(name) * 10000000000),
            constraints: const BoxConstraints(
              minHeight: 80,
              minWidth: double.infinity,
            ),
            padding: const EdgeInsets.all(8),
            child: Row(
              children: [
                SizedBox(
                  width: 8,
                ),
                Icon(Icons.minimize),
                Expanded(
                  child: Column(children: [
                    Text(name.toString()),
                    Text(value.toString())
                  ]),
                ),
                Icon(Icons.add),
                SizedBox(
                  width: 8,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I didn't think there would be any difference between the two cases except for the size of the counter widget.

However, the counter widget behaves differently in both cases.

[When the Counter widget works with Column.] enter image description here

[When the Counter widget works with SliverList] enter image description here

When the Counter widget works with SliverList, the text in the Counter widget behaves as if it were vertically centered. When I checked with the widget inspector, the height of Expanded of the counter widget working with Column was 64, and the height of Expanded of the counter widget working with SliverList was 32. I don't know why there is such a difference.

Please let me know why this is happening and what I can do to fix it.

0

There are 0 best solutions below