For some reason button text gets gray in release mode while being fine in debug mode. Here is the example of how it looks in debug mode:
And this is an example of how it looks like in release mode:
Code for the button is following:
Expanded(
child: Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: ScreenUtil().setWidth(263),
height: ScreenUtil().setHeight(69),
padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.success,
borderRadius: BorderRadius.all(Radius.circular(12.0))),
child: FlatButton(
onPressed: () {
// some actions
},
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Выбрать", style: TextStyle(color: Theme.of(context).colorScheme.primaryLight, fontSize: ScreenUtil().setSp(16)), textAlign: TextAlign.center),
Container(
padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(20), 0, 0, 0),
child: SvgPicture.asset("assets/icons/forward.svg", height: ScreenUtil().setHeight(20), width: ScreenUtil().setWidth(20))
),
]
)
],
)
)
)
)
]
)
]
)
)
)
As you can see, I am using ScreenUtil for managing flexible layouts. Suspicion is that it somehow fails to do its job properly.
Can somebody explain what is going on here, why is the perfectly renderable app behaves this way in release mode when no overflows are reported? And, what is more important, how to fix it (preferably without changing font size as it is already small enough)?
I adjusted the code, now it looks like this:
Expanded(
child: Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: () {
// some actions
},
child: Container(
width: ScreenUtil().setWidth(263),
height: ScreenUtil().setHeight(69),
padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.success,
borderRadius: BorderRadius.all(Radius.circular(12.0))),
child:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Выбрать", style: TextStyle(color: Theme.of(context).colorScheme.primaryLight, fontSize: ScreenUtil().setSp(16)), textAlign: TextAlign.center),
Container(
padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(20), 0, 0, 0),
child: Icon(Icons.arrow_forward, size: 20)
),
]
)
)
)
]
)
)
)
The process of adjustment was rather tedious as long as I had to build release versions to try every change of code on the phone where issue is reproducible (everything is fine on emulator, no gray rectangles reproduce there). First I found minimal code that worked without displaying unwanted gray rectangle and started building up step-by-step from there. Result is working button without unwanted side-effects. To be honest, now when I am able to compare buggy and working solutions, I still don't know what exactly was wrong with previous code sample. Position of FlatButton wrapper didn't matter much, grey rectangle was just bigger if it was moved up the document tree. I guess getting rid of extra Row declaration eventually made it work.
Related
While waiting for an upcoming event, I slowly roll a Text() showing an emoji.
I use the code below:
Container(
padding: EdgeInsets.all(contentPadding),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.all(Radius.circular(40))),
child: widget.status == null
? Column(children: [
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Transform(
transform: Matrix4.rotationZ(rot.value),
alignment: Alignment.center,
child: Text(
text,
style: style,
)),
CircularProgressIndicatorWithOptions(),
]),
Text(sumUp),
])
: Column(children: [
Text(text, style: style),
Text(""),
Text(sumUp),
])));
Here is the issue that appears only on some android phones:
And on others phones, it is ok:
How to make sure the text keeps is intrinsic natural size? (aka, not using a SizedBox with a specific size).
I've got a workaround by adding a small scale as follows:
Transform.scale(
scale: 0.96,
child: Transform.rotate(
angle: _turnsAnim.value,
child: Text(text, style: style))),
I believe that on some phones, the widget comes out of bounding box which triggers the scale up effect.
I put more time soon to try to demonstrate this hypothesis.
I'm trying to add google logo for sign in with google by downloading from https://developers.google.com/identity/branding-guidelines. But when I use it in flutter app, some lines and dots are appearing around logo.
GestureDetector(
child: Container(
padding: EdgeInsets.only(right: _size.height * 0.016),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
// decoration: BoxDecoration(color: Colors.blue),
child: Image.asset(
'assets/images/google_icon/btn_google_light_normal.9.png',
fit: BoxFit.fitWidth,
),
),
SizedBox(
width: 5.0,
),
Text('Sign-in with Google')
],
),
),
),
which results in
enter image description here
or
enter image description here
How to remove glitches around the G logo?
i think there may be problem in the format of image you are using try out this code
Container(
width:300,
height:80,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
// decoration: BoxDecoration(color: Colors.blue),
child:
Image.network(
'http://pngimg.com/uploads/google/google_PNG19635.png',
fit:BoxFit.cover
)
),
SizedBox(
width: 5.0,
),
Text('Sign-in with Google')
],
),
)
You can use an open-source background remover tool such as remove.bg/upload to remove everything around the logo. Then, you can just do the same thing: Image.network('<your path>', height: 40, width: 40) or any size.
Perhaps this is not the most elegant solution, but I just cropped the original image to get rid of the lines.
Before:
After:
I have a dilemma that I can't seem to solve. I have an existing row in Flutter. Essentially what I want to accomplish is to have the first element(yellow) at the start of the row, and the second element(red) in the center of the element. I know Row has the mainAxisAlignment, but I need a different alignment for each each element (i.e. both MainAxisAlignment.start & MainAxisAlignment.center). Thanks for any help!
The closest I have been able to come to this is this:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
yellowElement,
Expanded(child: redElement),
],
);
But this is not perfectly centered, it is centered in the available space left over after yellow has taken its space.
I had this problem few weeks ago and the only solution I found was Stack... like this
Stack(
children: <Widget>[
Container(
color: Colors.grey,
width: 250,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(width: 50, color: Colors.red),
],
),
),
Positioned(
top: 0,
bottom: 0,
child: Container(
width: 20,
color: Colors.yellow,
),
)
],
)
I am trying to center a group of objects within a row using Flutter/Dart. I have tried various methods and all have failed. I want the icon to be to the left of the screen and the remaining variables (trips, followers, and following) to be centered in the remaining space. I have tried it a variety of ways using the MainAxisAlignment and CrossAxisAlignment classes based on some solutions I found on SO but none have worked. What am I doing wrong?
Column(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.grey, // button color
child: InkWell(
child: SizedBox(
width: 80,
height: 80,
child: Align(
alignment: Alignment.center,
child: Icon(
Icons.person,
size: 65.0,
),
),
),
),
),
)
],
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
trips, followers, following,
],
),
],
),
Image 1: How it currently looks
Image 2: Flutter Inspector View
You want to evenly distribute the space right from the icon between the three texts, right?
I would solve this by wrapping the 3 widgets in another row for the rest of the space without the icon and then wrapp the Text in an expanded widget that fills the rest of the space.
i assume that trips, followers and following are columns.
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
ClipOval(
....(your stuff)
)
]
),
Row(
children: <Widget>[
Expanded(
child: trips
),
Expanded(
child: followers
),
Expanded(
child: following
),
]
)
]
) //Row End
In the Row documentation you can see how the expanded takes a third of the available space. [1]
I'm trying to get working the MainAxisAlignment property on the Column, but it's not working quite expected. Here is my code.
Scaffold(
appBar: AppBar(
title: Text('Account'),
),
body: Container(
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.only(left: 0.0, right: 0.0, top: 0.0, bottom: 20.0),
child: InkWell(
onTap: () {},
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Image.network(
'https://cdn.mydomain.com/Color/PNG/512/profile-512.png',
height: 72.0,
),
SizedBox(width: 8.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround, // <<<=== this line
children: <Widget>[
Text('User\'s display name'),
Text('user#company.com'),
],
)
],
),
),
),
)
],
),
),
)
My hierarchy is Container->Column->Card->InkWell->Row->Column. The innermost Column widget has a problem. I figured out that If I remove the first Column widget then the MainAxisAlignment just works fine.
But I can't do that as I want to build a Column layout with various Cards inside it, as you can see in the code.
Could somebody please let me know what is this weird behaviour and a solution around this?
Regards.
Try to wrap this column in a Container or SizedBox and set a double.infinity height for it.
The problem that's happening it's because a Column or any component which you don't set a height or width, will automatically adjust to the widgets inside of it.
Container(
height: MediaQuery.of(context).size.height, //Add here
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('User\'s display name'),
Text('user#company.com'),
],
),
),
OBS: I personally like to use MediaQuery for this. eg: MediaQuery.of(context).size.height to get the full height of the device, then, you can manipulate it, dividing by 2, 3, subtracting...