title: Flutter Wrap causes right overflow
body: <p>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:
  <a href="https://i.stack.imgur.com/b9im4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b9im4.png" alt="enter image description here" /></a></p>
  <p>So I have this code which should build it:</p>
  <pre><code>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() =&gt;
        _RestaurantReservationDetailsPageState();
  }
  
  class _RestaurantReservationDetailsPageState
      extends State&lt;RestaurantReservationDetailsPage&gt; {
    DateTime? reservationDateTime;
    List&lt;ChoiceChipData&gt; timeChips = [
      ChoiceChipData(
          label: &quot;17:00&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;17:30&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;18:00&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;18:30&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;19:00&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;19:30&quot;,
          isSelected: false,
          textColor: Colors.black,
          selectedColor: Colors.blue),
      ChoiceChipData(
          label: &quot;20:00&quot;,
          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(
                          &quot;Senso Sushi &amp; Grill&quot;,
                          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(
                &quot;assets/restaurant_logo_sample.png&quot;,
              ),
            ),
            Column(
              children: [
                Container(
                  padding: EdgeInsets.only(left: 30, right: 30),
                  child: Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(&quot;Aantal personen&quot;,
                              style: TextStyle(
                                  color: Color.fromRGBO(0, 0, 0, 0.3),
                                  fontSize: 16)),
                          SizedBox(height: 5),
                          CustomNumberInput(),
                          SizedBox(height: 15),
                          Text(&quot;Datum&quot;,
                              style: TextStyle(
                                  color: Color.fromRGBO(0, 0, 0, 0.3),
                                  fontSize: 16)),
                          SizedBox(height: 5),
                          MainButton(
                              btnText: (reservationDateTime == null
                                  ? &quot;Datum kiezen&quot;
                                  : formatter.format(reservationDateTime!)),
                              btnAction: () =&gt; {
                                    showDatePicker(
                                            context: context,
                                            initialDate: DateTime.now(),
                                            firstDate: DateTime.now(),
                                            lastDate: DateTime.now()
                                                .add(Duration(days: 14)))
                                        .then((date) =&gt; {
                                              setState(() {
                                                reservationDateTime = date;
                                              })
                                            })
                                  }),
                          SizedBox(height: 15),
                          Text(&quot;Tijd&quot;,
                              style: TextStyle(
                                  color: Color.fromRGBO(0, 0, 0, 0.3),
                                  fontSize: 16)),
                          SizedBox(height: 5),
                          buildChoiceChips(),
                        ],
                      )
                    ],
                  ),
                )
              ],
            )
          ],
        )
      ])));
    }
  
    Widget buildChoiceChips() =&gt; Wrap(
        runSpacing: 5,
        spacing: 5,
        children: timeChips
            .map((timeChip) =&gt; ChoiceChip(
                label: Text(timeChip.label),
                labelStyle:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
                onSelected: (isSelected) =&gt; setState(() {
                      timeChips = timeChips.map((otherChip) {
                        final newChip = otherChip.copy(isSelected: false);
  
                        return timeChip == newChip
                            ? newChip.copy(isSelected: isSelected)
                            : newChip;
                      }).toList();
                    }),
                selected: timeChip.isSelected))
            .toList());
  }
  </code></pre>
  <p>Now everything works like it should, except that the time chips are overflowing on the right side like this:
  <a href="https://i.stack.imgur.com/UIe0D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIe0D.jpg" alt="enter image description here" /></a></p>
  <p>I already read something about the Row() that could cause the problem: <a href="https://stackoverflow.com/a/58494435/10673107">https://stackoverflow.com/a/58494435/10673107</a>, but that didn't work for me!</p>
  <p>How can I fix the overflow?</p>