Centered horizontal Listview.builder non scrollable Flutter Dart

Question

i have days trying to build a centered horizontal listview fixed (non scrollable), I dont know if maybe Im going the wrong way or that its not posible, I have search a lot with any result. Please send me in the correct way. I would appreciate, thank you for your time!

what Im looking for in the green rectangle

I tried play around with container sizedbox etc.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:healy_app/models/survey_model.dart';
import 'package:healy_app/widgets/radio_buttom.dart';

// ignore: must_be_immutable
class prueba extends StatefulWidget {
  prueba({super.key, required this.survey});
  int answer = 0;
  late Future<Survey> survey;
  @override
  State<prueba> createState() => _pruebaState();
}

class _pruebaState extends State<prueba> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          FutureBuilder<Survey>(
              future: widget.survey,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Row(
                    children: [
                      SizedBox(
                        height: 70,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: 5,
                          itemBuilder: (context, index) {
                            return Column(
                              children: [
                                CustomRadio(
                                    groupValue: snapshot
                                        .data!.questions[3].answers![index].value,
                                    onChanged: (value) {
                                      widget.answer = snapshot.data!.questions[3]
                                          .answers![index].value;
                                      setState(() {});
                                    },
                                    value: widget.answer),
                                SizedBox(
                                  height: 34,
                                  width: 56,
                                  child: Text(
                                    snapshot
                                        .data!.questions[3].answers![index].text,
                                    textAlign: TextAlign.center,
                                    maxLines: 2,
                                    style: GoogleFonts.openSans(
                                      textStyle: const TextStyle(
                                        color: Color(0xff000000),
                                        letterSpacing: -0.26,
                                        fontSize: 12,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            );
                          },
                        ),
                      ),
                    ],
                  );
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
                return const CircularProgressIndicator();
              }),
        ],
      ),
    );
  }
}

Answer 1

try putting shrinkWrap: true, and physics: const NeverScrollableScrollPhysics(), in your ListView.builder, this will control whether the list adapts to the size of its contents or expands to take up all the space.

To make them in the center add mainAxisAlignment: MainAxisAlignment.center, this will center your row items.

Here I share your same example, I also consider to call your classes with capital letters. You could also consider to assign to itemCount the size of your dynamic list (example: array.length) and not a constant value.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:healy_app/models/survey_model.dart';
import 'package:healy_app/widgets/radio_buttom.dart';

class Prueba extends StatefulWidget {
  Prueba({super.key, required this.survey});
  int answer = 0;
  late Future<Survey> survey;
  @override
  State<Prueba> createState() => _PruebaState();
}

class _PruebaState extends State<Prueba> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          FutureBuilder<Survey>(
            future: widget.survey,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Row(
                  children: [
                    SizedBox(
                      height: 70,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 5,
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return Column(
                            children: [
                              CustomRadio(
                                groupValue: snapshot
                                    .data!.questions[3].answers![index].value,
                                onChanged: (value) {
                                  widget.answer = snapshot
                                      .data!.questions[3].answers![index].value;
                                  setState(() {});
                                },
                                value: widget.answer,
                              ),
                              SizedBox(
                                height: 34,
                                width: 56,
                                child: Text(
                                  snapshot
                                      .data!.questions[3].answers![index].text,
                                  textAlign: TextAlign.center,
                                  maxLines: 2,
                                  style: GoogleFonts.openSans(
                                    textStyle: const TextStyle(
                                      color: Color(0xff000000),
                                      letterSpacing: -0.26,
                                      fontSize: 12,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                  ],
                );
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        ],
      ),
    );
  }
}