I have a problem. I recently started working with flutter, and I am really understanding the framework, but for a few days, I have been struggling with a problem. I am trying to build the following page:

So I have this code which should build it:

import 'package:test/models/choice_chip_data.dart';
import 'package:test/styles/button_style.dart';
import 'package:test/widgets/reservation_person_selection.dart';
import 'package:test/widgets/reservation_time_selection.dart';
import 'package:test/widgets/restaurant_rating.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

final DateFormat formatter = DateFormat('dd-MM-yyyy');

class RestaurantReservationDetailsPage extends StatefulWidget {
  @override
  _RestaurantReservationDetailsPageState createState() =>
      _RestaurantReservationDetailsPageState();
}

class _RestaurantReservationDetailsPageState
    extends State<RestaurantReservationDetailsPage> {
  DateTime? reservationDateTime;
  List<ChoiceChipData> timeChips = [
    ChoiceChipData(
        label: "17:00",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "17:30",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "18:00",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "18:30",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "19:00",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "19:30",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue),
    ChoiceChipData(
        label: "20:00",
        isSelected: false,
        textColor: Colors.black,
        selectedColor: Colors.blue)
  ];

  @override
  void dispose() {
    super.dispose();
  }

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: SafeArea(
            child: Stack(children: [
      Column(
        children: [
          Row(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  IconButton(
                    icon: Icon(
                      Icons.arrow_back_ios,
                      color: Colors.black,
                    ),
                    iconSize: 25,
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Senso Sushi & Grill",
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18),
                      ),
                      RestaurantRating()
                    ],
                  )
                ],
              )
            ],
          ),
          Container(
            height: 180,
            width: 180,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(90),
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color.fromRGBO(229, 229, 229, 1),
                    Color.fromRGBO(253, 253, 253, 1),
                  ],
                )),
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.only(top: 50, bottom: 50),
            child: Image.asset(
              "assets/restaurant_logo_sample.png",
            ),
          ),
          Column(
            children: [
              Container(
                padding: EdgeInsets.only(left: 30, right: 30),
                child: Row(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Aantal personen",
                            style: TextStyle(
                                color: Color.fromRGBO(0, 0, 0, 0.3),
                                fontSize: 16)),
                        SizedBox(height: 5),
                        CustomNumberInput(),
                        SizedBox(height: 15),
                        Text("Datum",
                            style: TextStyle(
                                color: Color.fromRGBO(0, 0, 0, 0.3),
                                fontSize: 16)),
                        SizedBox(height: 5),
                        MainButton(
                            btnText: (reservationDateTime == null
                                ? "Datum kiezen"
                                : formatter.format(reservationDateTime!)),
                            btnAction: () => {
                                  showDatePicker(
                                          context: context,
                                          initialDate: DateTime.now(),
                                          firstDate: DateTime.now(),
                                          lastDate: DateTime.now()
                                              .add(Duration(days: 14)))
                                      .then((date) => {
                                            setState(() {
                                              reservationDateTime = date;
                                            })
                                          })
                                }),
                        SizedBox(height: 15),
                        Text("Tijd",
                            style: TextStyle(
                                color: Color.fromRGBO(0, 0, 0, 0.3),
                                fontSize: 16)),
                        SizedBox(height: 5),
                        buildChoiceChips(),
                      ],
                    )
                  ],
                ),
              )
            ],
          )
        ],
      )
    ])));
  }

  Widget buildChoiceChips() => Wrap(
      runSpacing: 5,
      spacing: 5,
      children: timeChips
          .map((timeChip) => ChoiceChip(
              label: Text(timeChip.label),
              labelStyle:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              onSelected: (isSelected) => setState(() {
                    timeChips = timeChips.map((otherChip) {
                      final newChip = otherChip.copy(isSelected: false);

                      return timeChip == newChip
                          ? newChip.copy(isSelected: isSelected)
                          : newChip;
                    }).toList();
                  }),
              selected: timeChip.isSelected))
          .toList());
}

Now everything works like it should, except that the time chips are overflowing on the right side like this:

I already read something about the Row() that could cause the problem: https://stackoverflow.com/a/58494435/10673107, but that didn't work for me!

How can I fix the overflow?

CodePudding user response：

Row is causing the problem

Container(
      padding: EdgeInsets.only(left: 30, right: 30),
        child: Row(
               children: [
                   Column(

it's giving wrap infinite horizontal length, which gives wrap no need to start aligning in a new line.

remove the row in here to something like this

Container(
      padding: EdgeInsets.only(left: 30, right: 30),
        child: Column(

CodePudding user response：

I recommend you to use Wrap

Wrap(children: [
      ...,
      ...
    ]),