skip to Main Content

I am experience an issue of pixel overflow what i mean here once i use launch() method to tap for popup(email and google-maps) when a user clicks icons for both email and location. It must prompts these. I attempted to use the following logic, somehow my widgets experience pixel overflow;

// flutter code
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#260ed relayoutBoundary=up3 OVERFLOWING:
creator: Row ← Column ← Padding ← KeyedSubtree-[GlobalKey#5d1c4] ← _BodyBuilder ← MediaQuery ←
LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← _ActionsScope ← Actions ←
AnimatedBuilder ← DefaultTextStyle ← ⋯
parentData: offset=Offset(0.0, 38.0); flex=null; fit=null (can use size)
constraints: 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
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 3581 pixels on the bottom.
Application finished.

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),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

2

Answers


  1. If I understood your problem correctly, the issue appears when the launchUrl method is called.

    I think that the app tries to open the url in your app (this is the default behavior on iOS and Android see) and has not enough space for it. Try using launchUrl('https://...', mode: LaunchMode.externalApplication) to launch the website in a browser, or provide more space on the screen with a SingleChildScrollView for example.

    Login or Signup to reply.
  2. Looks to me that both Rows inside your Column can exceed the screen width. And Rows are not scrollable by default.

    Try to use ListView with scrollDirection: Axis.horizontal instead the Rows like this:

        child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // Social media icons row
                ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    // business hours.
                    Row(
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search