flutter RenderBox was not laid out when adding listTile to Column inside Card

Question

I am working with following structure Card widget then column widget then ListTile inside the column But I am getting an error after adding the ListTile widget to Column it's RenderBox was not laid out I tried to add the listTile inside Expanded widget but getting the same error here is a screenshot before adding the ListTile widget

and this is the screenshot after adding the ListTile widget

this is my code

    import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePaState();
}

class _HomePaState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
    return Scaffold(
      backgroundColor: Color(0xFFEDF5FC),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "Welcome, John",
                      style: TextStyle(fontSize: 20, color: Color(0xFF8FBBDE)),
                    ),
                    Icon(Icons.notifications)
                  ],
                ),
                Text(
                  "Do you want to find a hotel?",
                  style: TextStyle(fontSize: 12, color: Color(0xFFC2C9CF)),
                ),
                SizedBox(
                  height: 10,
                ),
                Padding(
                  padding: EdgeInsets.all(5),
                  child: Row(
                    children: [
                      Expanded(
                          child: Container(
                        child: TextFormField(
                          decoration: InputDecoration(border: InputBorder.none),
                        ),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Color(0xFFE1EBF8)),
                      )),
                      SizedBox(
                        width: 10,
                      ),
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Container(
                          child: Center(
                            child: Icon(
                              Icons.search,
                              color: Colors.white,
                            ),
                          ),
                          width: 50,
                          height: 40,
                          color: Color(0xFF5597CB),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "Popular Hotels",
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "View all",
                      style: TextStyle(fontSize: 12, color: Color(0xFFC2C9CF)),
                    )
                  ],
                ),
                SizedBox(
                  height: 300,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [
                      Card(
                          margin: EdgeInsets.all(5),
                        child:   Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: Image.asset(
                                "assets/images/hotels/hotel2.jpg",
                                height: 200,
                                fit: BoxFit.cover,
                              ),
                            ),
                            ListTile(title: Text("mountain hotel"),)





                          ],
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

You can't add ListTile on ListView(scrollDirection: Axis.horizontal)without providing finite constrains(width) while ListTile try to take infinite width(constraints). You can wrap with SizedBox and provide width.

SizedBox(
  width: 200, //get from scaffold's body and provide based
  child: ListTile(
    title: Text("mountain hotel"),
  ),
)