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:
Related
I want to add an icon to a card widget so I used the ImageIcon widget as below
Card(
color: colorPalette.cultured,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
children: <Widget>[
Text(label,style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15.0,fontFamily: 'Poppins'),),
Spacer(),
ImageIcon(AssetImage('assets/icons/call.png'),),
],
),
),
);
The icon I want to display is,
but what is displayed is,
the assets in the pubspec.yaml are indented properly as well.
Try below Code Hope its help to you . Just change your image on your need
you have add asset image in 2 Ways
Image.assets() - Documentation here
AssetImage()
Row(
children: [
Image(
image: AssetImage('assets/images/shop.png'),
width: 150,
height: 150,
),
Image.asset(
'assets/images/cycle.png',
width: 150,
height: 150,
),
],
),
Your Result Screen ->
You can use either of these for using asset images
Image.asset('image')
or
Image(image: AssetImage('image')) for using asset images
For achieving it with icon
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue),
child: Icon(
Icons.call,
color: Colors.white,
),
)
I want to create a responsibility for the CircleAvatar widget, but I am not sure how.
Here is my code:
body: Container(
padding: const EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
child: Row(children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(...),
if (_isAvatar)
Container(
padding: const EdgeInsets.all(15),
child: CircleAvatar(
maxRadius: MediaQuery.of(context).size.width -
MediaQuery.of(context).size.width +
78, // Here is a problem, how to calc width to fit on any device?
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
Container(...),
],
)),
])));
I want to make the widget responsive and fittable on any device or resolutio.
I am Flutter's newbie, please help!
Thanks!
You should use radius, not maxRadius. Here's the code:
CircleAvatar(
radius: MediaQuery.of(context).size.width * 0.3, //change 0.3 to any value you want
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
So I am trying to render something like this :
the image I am trying to render
So far using this code :
Stack(
fit: StackFit.loose,
children: <Widget>[
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Container(
width: 110,
height: 110,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage('assets/profile.png'),
fit: BoxFit.cover,
),
)),
],
),
Padding(
padding: EdgeInsets.only(
top: 70.0, ),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
ClipRect(
child: Container(
color:Color.fromRGBO(0, 0, 0, 0.5),
width: 110,
height: 60,
child: Icon(
Icons.camera_alt,
color: Colors.grey[800],
),
),
),
],
)),
])
I have got this image :
Image I got rendered
Now my googling led me to believe that ClipRect can be a solution here but I am not able to find the exact solution, So I am thinking all I need to do is to cut the part of the rectangular container that is going outside of the circular avatar but I am not sure how.
Try this layout:
ClipOval
Stack: alignment: AlignmentDirectional.bottomCenter,
Container: width: 110, height: 110
Positioned: bottom: 0, child: Container(width: 110, height: 40)
Icon
[UPDATED]
use ClipRRect with radius instead of ClipOval
OR
use flutter_custom_clippers, OvalBottomBorderClipper() for the lower part of container.
I'm new to Flutter and ran into this slight problem. So I've created a Card widget and placed an image in it. Originally the image was horizontal, so I rotated it to be vertical. However after doing so, the image overflowed out of my card. Any help would be much appreciated. Thanks :)
See image here
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
height: 140,
),
)
],
)),
you have two choices
first, remove its height
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
],
)),
second, you can wrap it in Expanded like
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Expanded(
child: Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
)
],
)),
I have two Container widgets in a Column, each containing a Text widget. I want the Container with the shortest text to expand to match the width of the other container containing the longer text. The container with the longer text should wrap the Text widget and its padding.
I can't get it to work without resorting to fixed widths on the containers:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
// This container has a shorter text than its sibling, so it should expand
// its width to match its sibling/parent
Container(
alignment: Alignment.center,
width: 50, // I don't want this fixed width
decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))),
child: Padding(
padding: const EdgeInsets.fromLTRB(8,4,8,4),
child: Text('short'),
)
),
// This container has a longer text, so it should decide the width of the
// other container (and of the parent Column)
Container(
alignment: Alignment.center,
width: 50, // I don't want this fixed width
decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4), bottomRight: Radius.circular(4))),
child: Padding(
padding: const EdgeInsets.fromLTRB(8,4,8,4),
child: Text('long text here'),
)
),
]
);
I've tried a couple of ways to solve it involving Expanded and Flexible, but they all result in the "red screen of death" (or at least "annoyance").
EDIT
Just to be clear - I want the Column to just wrap its content, i.e. adjust its width to the width of the containers. In summary - everything should be as narrow as possible, except for the container with the shortest text, which should instead be as wide as its sibling (the container with the longer text).
I saw your Fiddle on a comment. And what you need is IntrinsicWidth.
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// This container has a shorter text than its sibling, so it should expand
// its width to match its sibling/parent
Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Container(
color: Colors.orange,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
'short',
textAlign: TextAlign.center,
),
),
),
),
// This container has a longer text, so it should decide the width of the
// other container (and of the parent Column)
Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Container(
color: Colors.orange,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
'long text here',
textAlign: TextAlign.center,
),
),
),
),
],
),
),
You can use something like this to take the entire width of the Widget (make sure to be inside a MaterialApp and a Scaffold/Material child (home):
Wrap(
children: <Widget>[
Container(
color: Colors.red,
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.black,
height: 200,
child: Align(
alignment: Alignment.bottomRight,
child: Text(
"Hello World",
style: TextStyle(color: Colors.white),
),
),
),
Container(
color: Colors.blue,
height: 100,
child: Align(
alignment: Alignment.topRight,
child: Text(
"Bottom Text Longer Text",
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
],
)
The Align is not necessary, is just to showcase how the width actually works with "double.infinity" and moving a text to the bottom right or top right portion of it.