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,
),
Related
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
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...)
I have used the Expansion Tile to generate a Expansion List View.
I'm facing some customization issues in Expansion Tile Header.
Below is my code.
ExpansionTile(
title: Container(
child: Text(
getCategory(i),
style: TextStyle(
color: Colors.white,
),
),
color: Colors.black
),
children: <Widget>[
new Container(
height: 60.0,
margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 10.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all( Radius.circular(5.0) ),
),
),
new Container(
height: 60.0,
margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 0.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.all( Radius.circular(5.0) ),
),
)
],
backgroundColor: Colors.white,
)
I'm getting below result.
What I'm expecting to have is below.
If anyone know a workaround to customize the header color, please advice.
If you check the source code of the ExpansionTitle , you will notice that the header item is a ListTile , so you can't change the background because it hasn't a parent with a color property.
I modified a little the class to support what you need.
Add this file to your project: https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c
And import like this way to avoid conflicts because the same name.
import 'package:nameofyourapp/custom_expansion_tile.dart' as custom;
I put an alias 'custom' but you can change for any alias.
Usage:
custom.ExpansionTile(
headerBackgroundColor: Colors.black,
iconColor: Colors.white,
title: Container(
...
Remember, Flutter has a lot of Widgets out of the box, but If any of them don't fit what you need, you'll have to check the source code and create your own widget.
In my opinion, the more preferable way is wrap It with a new Theme, so It could work as expected:
Theme(
data: Theme.of(context).copyWith(accentColor: ColorPalette.fontColor, unselectedWidgetColor: ColorPalette.fontColor..withOpacity(0.8)),
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("Padding"),
children: <Widget>[
Text("Left"),
Text("Top"),
Text("Right"),
Text("Bottom"),
],
)
],
),
)
Instead of copy a full class to customize, check the source code, you could find more Theme attribute to override.
_borderColorTween
..end = theme.dividerColor;
_headerColorTween
..begin = theme.textTheme.subhead.color
..end = theme.accentColor;
_iconColorTween
..begin = theme.unselectedWidgetColor
..end = theme.accentColor;
_backgroundColorTween
..end = widget.backgroundColor;
If you want a more animatable widget or something, I would recommend diegoveloper's answer. Otherwise, just wrap It with Theme, so you won't need to maintain the Component, and get native flutter component.
A much easier way than all of those suggested is to wrap your ExpansionTile in a ListTileTheme.
Once you do this, you can change the backgroundColor to whatever you'd like. In my case, I've done the same thing with the ListTiles inside of the ExpansionTile so that the header can have one color and the children can have another color.
return ListTileTheme(
tileColor: Colors.grey.shade300,
child: ExpansionTile(
leading: Padding(
padding: const EdgeInsets.only(top:4.0),
child: Text('Outer Tile'),
),
title: null,
children: [
Slidable(
actionPane: SlidableDrawerActionPane(),
child: ListTileTheme(
tileColor: Colors.white,
child: ListTile(
title: Text('Inner Tile'),
subtitle: Text('subtitle'),
leading: FlutterLogo(),
),
),
)
],
),
);
I think this is easier than digging through the docs to find which Theme elements correspond to individual ListTile parameters.
I think better this solution more than custom list tile .
Widget customTheme(Widget child, BuildContext context) => Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
dividerTheme: DividerThemeData(
color: Theme.of(context).colorScheme.background)),
child: child,
);
Code Gist
It seems the ExpansionTile was changed and you can now directly configure lots of colors. As an example, for the arrows:
return ExpansionTile(
// sets the color of the arrow when collapsed
collapsedIconColor: Colors.red,
// sets the color of the arrow when expanded
iconColor: Colors.green,
);
For changing trailing arrow icon color you can wrap expansion tile with Theme and make theme light and set accet color and primary color to dark and it will work.
return Theme(
data: ThemeData.light()
.copyWith(accentColor: darkAccent, primaryColor: darkAccent),
child: ExpansionTile(
title: Text(
data['number'],
style:
TextStyle(color: darkAccent, fontWeight: FontWeight.bold),
),
Another option which should work is wrapping both the entire expansion tile and each individual container in a Card() widget as they have a color property. The downside is that the background for your expansion will be colored as well as the title, but if you set a color for the child cards, they will not be affected by the parent an so they could be individually colored as you like.
For trouble with the arrow color: notice it's an ExpandIcon, defined as a local Widget expandIconContainer in _ExpansionPanelListState.build().
When your ExpansionPanel uses canTapOnHeader: true, you get ExpandIcon(onPressed: null), so the color used for the underlying IconButton is determined by Theme#disabledColor.
I use this great little plugin, much more flexible than the Flutter Material. You can change the background and borders and have custom icons for open and close states. https://pub.dev/packages/configurable_expansion_tile
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.
I'd like to perform a very simple 2D rotation of a Container widget (that contains a handful of other widgets.) This widget would be rotated around a single fixed point in the center, with no deformations.
I tried using the transform property with Matrix4.rotationZ, which somewhat works – but the anchor point is in the top-left corner, not in the center. Is there an easy way to specify that anchor point?
Furthermore, is there an easier way to 2D-rotate this widget that doesn't require Matrix4?
var container = new Container (
child: new Stack (
children: [
new Image.asset ( // background photo
"assets/texture.jpg",
fit: ImageFit.cover,
),
new Center (
child: new Container (
child: new Text (
"Lorem ipsum",
style: new TextStyle(
color: Colors.white,
fontSize: 42.0,
fontWeight: FontWeight.w900
)
),
decoration: new BoxDecoration (
backgroundColor: Colors.black,
),
padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
),
),
],
),
width: 400.0,
height: 200.0,
);
You can use RotatedBox Widget to rotate any widget:
RotatedBox(
quarterTurns: 3,
child: Container(
color:Colors.red
),
),
Per Ian's advice, I gave the following a try. It appears to work, at least in my limited testing.
The container is nested within a Transform widget. Using alignment allows one to adjust the transform-origin in relative terms, i.e., in the center, the top left, etc.
var container = new Container (
child: new Stack (
children: [
new Image.asset ( // background photo
"assets/texture.jpg",
fit: ImageFit.cover,
),
new Center (
child: new Transform (
child: new Container (
child: new Text (
"Lorem ipsum",
style: new TextStyle(
color: Colors.white,
fontSize: 42.0,
fontWeight: FontWeight.w900,
)
),
decoration: new BoxDecoration (
backgroundColor: Colors.black,
),
padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
),
alignment: FractionalOffset.center, // set transform origin
transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
),
),
],
),
width: 400.0,
height: 200.0,
);
In flutter 2.2
Use Transform:
Transform(
transform: Matrix4.rotationZ(...),
alignment: FractionalOffset.center,
child: Container(...)
Or set transformAlignment value in Container:
Container(
...
transform: Matrix4.rotationZ(...),
transformAlignment: Alignment.center,
)
Apply a translation (to and from the fulcrum) before and after the rotation.
You can create yourself a little widget that does this, and thus solve your other problem at the same time (hiding the Matrix4).
For those who want to make an app like me, just using Transform and Gesturedetector. And remember don't use Draggable and Gesturedetector together because you only can drag and drop but you can't zooming widget :)).
Refer:
A Deep Dive Into Transform Widgets in Flutter
barbswatanabe
:
Transform.rotate(
alignment: FractionalOffset.center,
angle: state.listStickerModel[index].angle,
child: Transform(
alignment: FractionalOffset.center,
transform: new Matrix4.diagonal3(vector.Vector3(
state.listStickerModel[index].zoom,
state.listStickerModel[index].zoom,
state.listStickerModel[index].zoom)),
child: GestureDetector(
onScaleStart: (detail) {
_editPhotoBloc.add(UpdateSticker(
index: index,
offset: detail.focalPoint,
previousZoom: state.listStickerModel[index].zoom,
));
},
onScaleUpdate: (detail) {
_editPhotoBloc.add(UpdateSticker(
index: index,
offset: Offset(detail.localFocalPoint.dx,
detail.focalPoint.dy),
angle: detail.rotation,
zoom:
state.listStickerModel[index].previousZoom *
detail.scale));
},
child: Container(
alignment: Alignment.center,
child: SvgPicture.asset(
state.listStickerModel[index].src),
),
),
),
),