I am currently working on optimizing my app.
I noticed that the LinearProgressIndicator and CircularProgressIndicator I had on my app were using a lot of CPU ressources. (Flutter UI thread)
From the picture you can see that when the Indicators are displayed, the CPU is under heavy use and it's not decreasing at all.
The issues there is that with time the app is becoming unresponsive.
I don't understand what I am doing wrong in my declaration if someone has an idea ?
final sectionProgressIndicator = Container(
width: isPhone ? MediaQuery.of(context).size.width : 300,
alignment: Alignment.topLeft,
child: LinearProgressIndicator(
backgroundColor: THEME_COLOR_GREEN,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.orange),
),
);
children: <Widget>[
CircularProgressIndicator(
value: 1.0,
valueColor:
AlwaysStoppedAnimation<Color>(
Colors.grey),
),
CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(
Colors.blue),
),
...
]
Thanks
Related
I am currently implementing a dropdown button as the title of a scaffold.
In this dropdown, some of the options do not have a relevant image and therefore just text is shown. I have it working great, my only problem is, an error is always thrown when the app runs (not hot reloaded) because the Image doesn't load instantaneously meaning that FittedBox is trying to fit an empty widget, once it loads it is fine, and then hot reloads work fine with no errors too because the image is already loaded. Here is my code for my DropDownMenuItems:
return DropdownMenuItem(
value: company.id.toString(),
child: Center(
child: FittedBox(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: (config.companyLogos[company.id] != null)
? FittedBox(
child: Image.asset(
config.companyLogosPath +
config.companyLogos[company.id],
height: 50,
),
fit: BoxFit.contain,
)
: FittedBox(
child: Text(
company.name,
style: TextStyle(fontSize: 30),
)),
),
],
)))));
And here is the error that is thrown when the app runs, I am sure this is due to what I described above:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: 'package:flutter/src/rendering/box.dart': Failed assertion: line 313 pos 12: 'width > 0.0': is not
flutter: true.
Considered solutions:
A possible solution would be to supply the width of image, I could include this in my companyLogos map by making it a Map of Maps and including the filename and the width in the sub map.
However, I've trie this and it doesn't seem to work, it just makes my images a lot smaller than if I used an unset width.
I am not explicitly defining width to make it keep its aspect ratio whilst still fitting in the row.
I'm probably missing a trick here on how to handle images in flutter/dart, any help would be much appreciated, thank you!
Thanks to #pskink I have solved the issue.
I solved it by scrapping the FittedBox completely and using Image's 'fit:' property.
Here is my fixed code:
return DropdownMenuItem(
value: company.id.toString(),
child: Center(
child: FittedBox(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: (config.companyLogos[company.id] != null)
? Container(
child: Image.asset(
config.companyLogosPath +
config.companyLogos[company.id],
height: 50,
fit: BoxFit.contain,
))
: FittedBox(
child: Text(
company.name,
style: TextStyle(fontSize: 30),
)),
),
],
)))));
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
Following is what i want to achieve
I was having a look at the Circular Percent Indicator library but that does not provide this functionality
The following is achieve in native Android Development
https://github.com/grmaciel/two-level-circular-progress-bar
but how to port it to Flutter?
You can achieve this effect by using a stack widget, it will allow you to place both indicators on an identical position which will get the effect of overlapping done :
Stack(
children: <Widget>[
CircularProgressIndicator(
value: 0.8,
valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
),
CircularProgressIndicator(
value: 0.6,
valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
),
]
);
Try this,
percent_indicator library,
new CircularPercentIndicator(
radius: 130.0,
animation: true,
animationDuration: 1200,
lineWidth: 15.0,
percent: 0.4,
center: Center(
child: Icon(Icons.location_on),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Colors.deepPurple,
progressColor: Colors.green,
),
Sorry guys (really new to flutter and dart) but I was wondering how I could have a CircleAvatar on the right side of the screen (below the app bar) and some text on the left side, just across from it. Thanks in advance for your help! I have pasted the code that I made for the text on the left side (below the appbar). I know its probably a super simple question to most of you guys but for me it's not because I haven't gotten to grips with dart/flutter yet.
body: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: new Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: new Text(
'My Briefing',
style:
new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
),
),
Something like this would do what you are looking for:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: Text(
'My Briefing',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
CircleAvatar(),
],
)
By the way, starting dart 2, you can drop the "new" key word at the begging of each newly created classes.
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...)