Rendering issue while centering Font Awesome icon - dart

I don't understand why this FAB doesn't center it's child. I've tried different things but cannot make it to center perfectly. Because adding for example padding only bottom to the icon could make it center on a Device but maybe not for all.
this is my code
Theme(
data: Theme.of(context).copyWith(
highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(
color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: new Icon(
FontAwesomeIcons.chevronUp,
size: 80,
)),
),
),
and this is the not centered FAB with it's icon child.
does it seems only to me that the icon isn't centered?

Same code with Icons.person
same code with Text widget
Same code with chevronCircleUp
I've used Show Debug Paint by the way. And I've used chevronCircleUp, just to see clearly the area of widget. I think you are right, it's not centered enough, however, this examples made me think that the problem is related to FontAwesome icons.
There are also this issues
Font Icon Render Box not large enough for some characters
Rectangular icons are centered incorrectly
So I've applied the workaround on the first issue, here is the code. It must be good enough now.
Theme.of(context)
.copyWith(highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: Text(
String.fromCharCode(
FontAwesomeIcons.chevronUp.codePoint),
style: TextStyle(
fontSize: 72.0,
fontFamily: FontAwesomeIcons.chevronUp.fontFamily,
package: FontAwesomeIcons.chevronUp.fontPackage)),
)),
),
Edit after 3 years:
Issue still exists with Material icon (Icons.ios_share) on Flutter 2.10.0

Related

Rounded corner Card Widget with right border in flutter

I have to create a Card like this:
I had written below code to achieve the desired UI, but it didn't work as expected.
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
The code above produced this:
Whereas using the code below:
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output:
How can I create the required UI in flutter?
Use the shape parameter in the Card widget, example:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container() )
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
This solution worked for me. If we remove the shape property from the card, it leaves behind rectangular white corners. No limitation of elevation whatsoever.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
shadowColor: Colors.blueAccent,
elevation: 15,
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15))),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.red, width: 15)),
color: Colors.yellowAccent.shade100,
),
padding: EdgeInsets.all(20.0),
alignment: Alignment.centerLeft,
child: Container()),
),
)
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
For me, all the solutions using clipping cut off some of the shadow. Anyway, I found an easier solution imo:
Wrap the card's child around a Container widget. Specify the rounded rectangle border for the card, then the colored border side for the container.
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
child: Container(
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.red, width: 8)
),
child: // your card content
)
)
Instead of using a Card you could also use a Container to achieve this, you can use the gradient property on BoxDecoration. The stops property is going to determine the width of your border. Then you can add your colors and have a nice border.
For the rounded edges you can just use the borderRadius property.
Container(
margin: EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 8.0,
),
padding: EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 12.0,
),
child: Text('A "card" with rounded edges and a border'),
decoration: BoxDecoration(
gradient: LinearGradient(
stops: [0.015, 0.015],
colors: [
Colors.blue,
Colors.white,
],
),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
offset: Offset(0.0, 1.5),
),
],
),
)
Result from the code above
You can use the clipBehavior in the Card and move the BorderSide to a Container.
Card(
clipBehavior: Clip.antiAlias,
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.green, width: 5))),
),
)

Container shadow disappear when the child container background color is filled

I'm trying to get a Material Card with custom shadow (that why I don't use the Card's elevation), It work fine when the color of the child controller is set to white, but the shadow disappear (become much weaker) when the child container is filled with darker color like brown.
This is the code
Container(
padding: EdgeInsets.only(
top: 16.0,
left: 16.0,
right: 16.0,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.10),
blurRadius: 8.0,
),
],
),
child: Card(
clipBehavior: Clip.antiAlias,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius),
),
child: Container(
/// If this Container is filled then the shadow is gone
color: Colors.brown,
),
),
),
);
I even tried putting a CropRRect over the Card or container, but does not work. Can anyone explain to be why this is the case or anything I can do to keep the shadow the same?
It does not disappear, it's just a visual effect, you can try with:
BoxShadow(
color: Colors.black.withOpacity(0.50),
blurRadius: 18.0,
),
and
color: Colors.brown,

Chop child view so it doesn't exceed the parent view

I need to rotate a text inside a card. What I would like to obtain is this:
But I don't know how can i do this with flutter. The problem I am facing is that the text view exceeds the card.
Here is what I have so far:
Widget cardDetails(String title, String imgPath) {
return Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(15.0),
child: Container(
height: 135.0,
width: 135.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), color: Colors.white),
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Transform.rotate(
angle: -pi / 4,
child: Container(
height: 15.0,
width: 55.0,
alignment: Alignment.topCenter,
color: const Color(0xFFFFd77B),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
),
),
),
),
],
),
),
);
}
And here it's how it looks like:
Thanks in advance
The simplest way to make a banner is to use the Banner widget. However, it still paints outside the bounds of the item you're using, and unfortunately is not nearly as configurable as it could be (and doesn't handle things like longer text).
To fix the painting outside the bounds, all you need to do is add a ClipRect right under your card widget, and that should fix the overflow with the Banner widget or for what you're doing with the rotated box.
Depending on how configurable you need the banner to be, you could re-implement the Banner widget - using TextPainter you could figure out the length of the text and resize automatically based on it if need be (and to remove the dropshadow...)

Flutter Remove CupertinoNavigationBar Backdrop

Is there a way to remove the blur of the CupertinoNavigationBar so it's truly transparent? I got rid of the border and color but there's a blur, for the android AppBar there isn't any blur but for the iOS AppBar it's just there. I check the code for it and there's an ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0) applied to it but how do I remove it?
Code:
CupertinoNavigationBar(
backgroundColor: Colors.transparent,
border: Border.all(
color: Colors.transparent,
width: 0.0,
style: BorderStyle.none
),
leading: IconButton(
icon: Icon(
Icons.close,
color: Colors.red,
),
onPressed: () {
Navigator.pop(context);
}),
automaticallyImplyLeading: false,
trailing: IconButton(
icon: Icon(
Icons.refresh,
color: Colors.blue,
),
onPressed: widget.onRestart
),
),
CupertinoNavigationBar has a border property. If you wish to remove the border, you can do something like this:
CupertinoNavigationBar(
border: Border(bottom: BorderSide(color: Colors.transparent)),
));
There is no API at the moment to do this. You'd need open a GitHub issue to request this feature, or alternatively fork the Flutter lib and remove that code yourself. It seems like reasonable request, and it's probably just a constructor flag, so could be a relatively quick fix for the Flutter team to implement.

How to make flutter TextField height match parent of container?

I want to make my TextField height the same as my container height. Please check my code below and let me know how can I make TextField match_parent of my container. I've checked this question The equivalent of wrap_content and match_parent in flutter? but I didn't find any solution. I need to make TextField to take full height and width of my container.
new Container(
height: 200.0,
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black)
),
child: new SizedBox.expand(
child: new TextField(
maxLines: 2,
style: new TextStyle(
fontSize: 16.0,
// height: 2.0,
color: Colors.black
),
decoration: const InputDecoration(
hintText: "There is no data",
contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
),
),
)
Please check the screenshot below. As said, I need my TextField to take full height of Container
Here is my solution:
Container(
height: 200,
color: Color(0xffeeeeee),
padding: EdgeInsets.all(10.0),
child: new ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 200.0,
),
child: new Scrollbar(
child: new SingleChildScrollView(
scrollDirection: Axis.vertical,
reverse: true,
child: SizedBox(
height: 190.0,
child: new TextField(
maxLines: 100,
decoration: new InputDecoration(
border: InputBorder.none,
hintText: 'Add your text here',
),
),
),
),
),
),
),
It works pretty good for me. And here is a screen shot.
Answering this in 2021. There is an expands property available now. This code works:
Column(
children: [
Expanded(
child: TextField(
maxLines: null,
minLines: null,
expands: true,
),
flex: 1),
],
)
Let's remove a few lines in code and understand how flutter works.
Why we are giving height 200 to Container. Can't the Container adjust the height based on its child (in this case SizedBox.expand)
If we remove height 200, then Container occupied the entire screen because of SizedBox.expand
Do we really need the SizedBox for our use case. Let's remove that also see what happens.
Now our Container wraps the TextField. But there is some space above and below.
Who decided that space? TextField's decoration's contentPadding. Let's remove that also. It looks like below where textField wrapped by Container. Hope this is what you want. If not, please comment, we can tweak a bit and get what you want. Cheers
Final version of code which displays the above image
new Container(
// height: 200.0,
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black)
),
child: new TextField(
maxLines: 2,
style: new TextStyle(
fontSize: 16.0,
// height: 2.0,
color: Colors.black
),
decoration: const InputDecoration(
hintText: "There is no data",
// contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
),
)
Currently the only way to achieve the TextField to fill the available vertical space is:
TextField(maxLines: 1000000) //maxlines: any large int
While it is tempting to use TextField(maxLines: null), it will just set the TextField to expand with its content, until it reaches its container limit.
I think there needs to be a bool stretchVertically parameter. TextField(stretchVertically: true) would mean that the TextField will try to fill as much vertical space as it can. stretchVertically and maxLines would have to be mutually exclusive.

Resources