如何解决flutter中像素溢出的问题？

Question

当用户单击电子邮件和位置的图标时，我遇到像素溢出问题，我的意思是，一旦我使用 launch() 方法点击弹出窗口（电子邮件和谷歌地图）。它必须提示这些。我尝试使用以下逻辑，不知何故我的小部件遇到像素溢出；

//颤动代码 这被视为错误情况，因为它表明存在无法读取的内容 看到了。如果内容确实大于可用空间，请考虑使用 ClipRect 小部件，然后将其放入 Flex 中，或者使用可滚动容器而不是 Flex，
就像列表视图一样。 有问题的具体 RenderFlex 是：RenderFlex#260ed relayoutBoundary=up3 OVERFLOWING: 创建者：行 ← 列 ← 填充 ← KeyedSubtree-[GlobalKey#5d1c4] ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← _ActionsScope ← 操作 ← AnimatedBuilder ← 默认文本样式 ← ⋯ 父数据: 偏移量=偏移量(0.0, 38.0);弹性=空； fit=null（可以使用尺寸） 约束：BoxConstraints(0.0<=w<=1334.0, 0.0<=h<=Infinity) size: Size(1334.0, 4098.0) direction: horizontal mainAxisAlignment: center mainAxisSize: max crossAxisAlignment: center textDirection: ltr verticalDirection: down ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════ ══════════ ════════════════════════════════════════ ══════════
抛出了另一个异常：RenderFlex 底部溢出了 3581 像素。 申请完成。

import 'package:flutter/material.dart';
import 'package:social_media_flutter/social_media_flutter.dart';
import 'package:url_launcher/url_launcher.dart';



class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // Social media icons row
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                // business hours.
                Row(
                  children: [
                    Icon(Icons.access_time),
                    SizedBox(width: 16.0),
                    Text(
                      'Monday - Friday 06:00am - 22:00pm',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
                ),

                SizedBox(width: 15.0),
                // social media icons.
                SocialWidget(
                  placeholderText: 'agile-logistix',
                  iconData: SocialIconsFlutter.instagram,
                  iconColor: Colors.purple,
                  link: 'https://instagram.com/agile-logistics',
                  placeholderStyle: TextStyle(color: Colors.blue, fontSize: 15),
                ),
                SizedBox(width: 10.0),
                SocialWidget(
                  iconData: SocialIconsFlutter.facebook,
                  iconColor: Colors.blue,
                  placeholderText: 'agile-logistix',
                  link: 'https://facebook.com/agile-logistics',
                  placeholderStyle:
                      TextStyle(color: Colors.green, fontSize: 15),
                ),
                SizedBox(width: 10.0),
                SocialWidget(
                  iconData: SocialIconsFlutter.twitter,
                  placeholderText: 'agile-logistix',
                  link: 'https://twitter.com/agile-logistix',
                  placeholderStyle: TextStyle(color: Colors.blue, fontSize: 15),
                ),
              ],
            ),

            // Phone icon and text row
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset('assets/images/agile.jpg', width: 175, height: 175),
                SizedBox(width: 15.0),
                Icon(Icons.phone, size: 35, color: Colors.lightBlue),
                SizedBox(width: 16.0), // Add spacing between icon and text
                Text(
                  'Call US Now',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(width: 16.0),
                Text(
                  '0878221281',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(width: 16.0),
                Icon(
                  Icons.email,
                  size: 35,
                  color: Colors.lightBlue,
                ),
                SizedBox(width: 16.0),
                Text(
                  'Email Us Today',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(width: 16.0),
                Text(
                  '[email protected]',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(width: 8.9),

                //url launcher for address.
                InkWell(
                  onTap: () {
                    launch('https://www.google.com/maps/place/292+Surrey+Ave,+Ferndale,+Randburg,+2194/@-26.0954782,27.9952438,17z/data=!3m1!4b1!4m6!3m5!1s0x1e9574948a4c7c03:0x1b0f3d39f41eb77b!8m2!3d-26.095483!4d27.9978187!16s%2Fg%2F11c5nzy24_?entry=ttu');
                  },
                ),

                Icon(
                  Icons.location_on,
                  size: 35,
                  color: Colors.green,
                ),
                Text(
                  'Company Location',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(width: 16.0),
                Text(
                  '292 Surrey Avenue Ferndale, Randburg 2194',
                  style: TextStyle(fontSize: 16.0),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

我认为该应用程序尝试在您的应用程序中打开网址（这是 iOS 和 Android 上的默认行为see），但没有足够的空间。尝试使用

launchUrl('https://...', mode: LaunchMode.externalApplication)

在浏览器中启动网站，或使用

SingleChildScrollView

或类似的工具在屏幕上显示网站。