Flutter Card Content Not Centering in Horizontal ListView

Question

I'm having a layout issue with my Flutter application. I've created a MyCardWidget which contains a Card widget. Inside the card, I'm trying to center its contents using a Column with mainAxisAlignment: MainAxisAlignment.center and crossAxisAlignment: CrossAxisAlignment.center. However, when I place multiple MyCardWidget instances inside a horizontal ListView, the cards' are not centered as expected.

      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Hata: ${snapshot.error.toString()}'));
        } else {
          return Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/assets/images/home.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("Istanbul 20"),
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 150,
                    child:   Obx(() => ListView(
                      scrollDirection: Axis.horizontal,
                      children: cards
                          .map((card) => card)
                          .toList(),
                    )),
                  )

This is card Widget

class _MyCardWidgetState extends State<MyCardWidget> {
  @override
  Widget build(BuildContext context) {
    return Card(

      color: Colors.transparent,
      elevation: 2,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,  // <-- Bu satırı ekledik
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.network(
              "https://openweathermap.org/img/wn/${widget.icon}@2x.png"),
          Text(widget.temp.value),
          // Diğer String verilerini kullanabilirsiniz
        ],
      ),
    );
  }

Answer 1

You wrap the ListView with Center widget and add shrinkWrap: true on ListView.

child: Center(
  child: ListView(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true, //not so optimal but work out
    children: [