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
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 aSingleChildScrollView
for example.Looks to me that both
Rows
inside yourColumn
can exceed the screen width. AndRows
are not scrollable by default.Try to use
ListView
withscrollDirection: Axis.horizontal
instead theRows
like this: