How to make widgets flexible so that there is no widget overflow?

Question

I have a page with different widgets, these are icons, text, a container for a photo. When adding another icon, or expanding the text, I get a widget overflow error. Tell me how can I make all widgets flexible and if, for example, I add another icon and add another new text that will be long so that there is no overflow error? I will be grateful for help.

            Padding(
              padding: const EdgeInsets.only(left: 15, right: 10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          const SizedBox(width: 13),
                          SvgPicture.asset(
                            constants.Assets.dateDropdown,
                            height: 42,
                          ),
                          const SizedBox(width: 18),
                          const Text.rich(
                            TextSpan(
                              text: 'Available for ',
                              style: constants
                                  .Styles.normalBookTextStyleWhite,
                              children: [
                                TextSpan(
                                  text: '2h\n',
                                  style: constants
                                      .Styles.normalHeavyTextStyleWhite,
                                ),
                                TextSpan(
                                  text: 'from your arrival',
                                  style: constants
                                      .Styles.normalBookTextStyleWhite,
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      const SizedBox(height: 25),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const SizedBox(width: 17),
                          SvgPicture.asset(
                            constants.Assets.lightning,
                            height: 42,
                          ),
                          const SizedBox(width: 28),
                          Text(
                            '${station.getPortCurrentText} (${station.getCurrentPower} kW)',
                            style: constants
                                .Styles.normalBookTextStyleWhite,
                          )
                        ],
                      ),
                    ],
                  ),
                  const SizedBox(width: 20),
                  _stationImage(station),
                ],
              ),
            ),

  Widget _stationImage(PublicChargingStationModel station) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: SizedBox(
        height: 125,
        width: 90,
        child: station.picture != null && station.picture!.isNotEmpty
            ? CachedNetworkImage(
                imageUrl: station.picture!,
                imageBuilder: (context, imageProvider) => Container(
                  width: 78,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => Center(
                  child: Container(
                    width: 78,
                    height: 116,
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator(
                      color: constants.Colors.purpleMain,
                    ),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(
                  Icons.error,
                  color: constants.Colors.purpleMain,
                ),
              )
            : Image.asset(
                constants.Assets.publicStation,
                fit: BoxFit.cover,
              ),
      ),
    );
  }

Answer 1

ave you tried wrapping your widgets in a ScrollView, here is the documentation. https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

Answer 2

You need to wrap your widgets in rows with an Expanded Widget

 Padding(
     padding: const EdgeInsets.only(left: 15, right: 10),
     child: Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Expanded(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Row(
               children: [
                 const SizedBox(width: 13),
                 Expanded(
                   child: SvgPicture.asset(
                       constants.Assets.dateDropdown,
                       height: 42,
                       ),
                 ),
                 const SizedBox(width: 18),
                 Expanded( 
                   child:const Text.rich(
                           TextSpan(
                             text: 'Available for ',
                             style: constants.Styles.normalBookTextStyleWhite,
                             children: [
                               TextSpan(
                                 text: '2h\n',
                                 style: constants
                                     .Styles.normalHeavyTextStyleWhite,
                               ),
                               TextSpan(
                                 text: 'from your arrival',
                                 style: constants
                                     .Styles.normalBookTextStyleWhite,
                               ),
                             ],
                           ),
                         )
                          ),
                       ],
                     ),
                 
                     const SizedBox(height: 25),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.start,
                       children: [
                         const SizedBox(width: 17),
                          Expanded(
                           child:
                         SvgPicture.asset(
                           constants.Assets.lightning,
                           height: 42,
                         ),
                          ),
                         const SizedBox(width: 28),
                          Expanded(
                         child:
                         Text(
                           '${station.getPortCurrentText} (${station.getCurrentPower} kW)',
                           style: constants
                               .Styles.normalBookTextStyleWhite,
                         )
                          ),
                       ],
                     ),
                 ),
                   ],
                 ),
             ),
                 const SizedBox(width: 20),
                 Expanded(
                 child : _stationImage(station),
                 ),
               ],
             ),
             );


  Widget _stationImage(PublicChargingStationModel station) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: SizedBox(
        height: 125,
        width: 90,
        child: station.picture != null && station.picture!.isNotEmpty
            ? CachedNetworkImage(
                imageUrl: station.picture!,
                imageBuilder: (context, imageProvider) => Container(
                  width: 78,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => Center(
                  child: Container(
                    width: 78,
                    height: 116,
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator(
                      color: constants.Colors.purpleMain,
                    ),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(
                  Icons.error,
                  color: constants.Colors.purpleMain,
                ),
              )
            : Image.asset(
                constants.Assets.publicStation,
                fit: BoxFit.cover,
              ),
      ),
    );
  }

I just modified your code. You can read more on Expanded or Flexible Widgets here