How to create a widget with a Text and a list?-CodePudding

I'm new to Flutter and I don't get what I'm doing wrong. Following some resources didn't really help me find the issue with the following code :

class history_screen extends StatelessWidget {
  const history_screen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    DB_Helper db = DB_Helper.instance;
    final rides = Provider.of<AppState>(context).rides;

    if (rides.isEmpty) {
      return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                Icons.edit_off,
                size: height * 0.04,
              ),
              Text(
                "No history available",
                style: TextStyle(fontSize: height * 0.02),
              )
        ],
      )
      );
    }

    return
          RideList(rides: rides);

  }
}

So the above code is working and is rendering me or a message rides.isEmpty or a list given by RideList(rides:rides) if ride.isEmpty is wrong.

Now what I want to do is customize the view when it returns the list, in order to add a title and other objects, so I tried :

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    DB_Helper db = DB_Helper.instance;
    final rides = Provider.of<AppState>(context).rides;

    if (rides.isEmpty) {
      return Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            Icons.edit_off,
            size: height * 0.04,
          ),
          Text(
            "No history available",
            style: TextStyle(fontSize: height * 0.02),
          )
        ],
      ));
    }

    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          "Ride & Track ",
          style: TextStyle(fontSize: height * 0.02),
        ),
        RideList(rides: rides)
      ],
    ));
  }

but the list isn't rendering anymore, and the text isn't centered

How can I fix this problem ?

[EDIT]

code of RideList:

 @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: rides.length,
        itemBuilder: (context, index) {
          Ride ride = rides[index];
          return RideItem(
            ride: ride,
            onTap: () =>
                Navigator.of(context).push(MaterialPageRoute(builder: (_) {
              return RideDetailScreen(
                ride: ride,
                onDelete: () => _removeRide(context, ride),
              );
            })),
          );
        });
  }

CodePudding user response：

Let's first see why is the issue coming. Basically, Column would try to use the minimum space available and ListView needs an infinite space. So, the column is a constrained widget while the listview needs infinite space. And listview will just use its parent's space.

One way is to make shrinkWrap: true and the other way is to wrap ListView with Expanded.

CodePudding user response：

So I had to modify RideList:

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Title"),
        ListView.builder(
            shrinkWrap: true,
            itemCount: rides.length,
            itemBuilder: (context, index) {
              Ride ride = rides[index];
              return RideItem(
                ride: ride,
                onTap: () =>
                    Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                  return RideDetailScreen(
                    ride: ride,
                    onDelete: () => _removeRide(context, ride),
                  );
                })),
              );
            }),
        
      ],
    );
  }