How to Set the loading value for the Circular progresss indicator like progress percentage in flutter for 60 days-Math formula?I need this stuff for my flutter project,Sorry if i am asking something silly:-)
Note: I'm new to this amazing flutter development.
You can set "completed" rate of a progress indicator like this:
CircularProgressIndicator(value: 0.5)
The above will result in a 50% indicator. All you have to do is use a member as value in a StatefulWidget and use setState to update it according to the desired percentage.
Also you can use it to indicate the progress when loading an image:
Image.network(
'<url>',
height: 50,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
)
Related
Application crashes when using CachedNetworkImage in listview. If there are a lot of pictures, then the application freezes and crashes. Is it possible to load each image one by one, asynchronously? Can I have a code example? Thanks.
And so, if you have the same problem as me, and you have a large list of pictures, then you can do the following:
1.Enable ListView pagination. So that when scrolling, not the entire ListView is loaded, but for example only 10 items from the List.
2.Compress pictures to the desired size using the following parameters:
memCacheWidth, memCacheHeight, maxHeightDiskCache, maxWidthDiskCache
Here is my example:
CachedNetworkImage(
memCacheWidth: 45,
memCacheHeight: 60,
maxHeightDiskCache: 60,
maxWidthDiskCache: 45,
imageUrl: imageUrl,
imageBuilder: (context, imageProvider) => imageBuilderWidget(imageProvider),
placeholder: (context, url) => placeholderWidget(),
errorWidget: (context, url, error) => errorWidget(),
);
After adding these options, remove app from the emulator and do a flutter clean
if need to cache images Use Opt imised cached image package. I had the same issue this package solved. if not working change width of images, add pagination if possible
You can use Image.network, it solved my crash issue on IOS.
Image.network('https://example.com/image.jpg',
errorBuilder: (context, error, stackTrace) {
print(error); //do something
},
loadingBuilder: (context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
},
),
For Example Assume You Have List of 10 Postive and Negative Values. So We can Go with ListView Builder. Now what the Changes Should be Happen is If the Positive Value Should Take as Green Card in Listview if the Value is Negative the It Should Show Red Card...
Sure you can do that, I am assuming that you are receiving JSON from API.
i.e. balance is the value you want to check. if it has a negative value then use logic
like below(psudo code)
if( balance > 1000){
//... the used green colour in widget
} else {
// use color red in widget
}
Yes you can do that.
Widget greenCard() {
return Card(
//green card
);
}
Widget redCard() {
return Card(
//red card
)
}
And call these functions like this in widget tree.
Widget build(BuildContext context) {
// other widgets in tree
// in listview builder
(value >= 0) ? greenCard () : redCard(),
//other widget in the tree
}
The simplest way to do this in thru if else condition
Example Code:
if (list[index].value == "positive")...[
Card(
color: Colors.green,
)
] else...[
Card(
color: Colors.red,
)
],
or
Card(
color: list[index].value == "positive"
? Colors.green
: Colors.red
)
I am working with a video player called 'flick video player'. I can play videos fairly okay with default functionality. The problem occurs when I scroll down the screen and the video continues to play in the background. I would like to pause it when it isn't visible, or when a user navigates to a different page on the project app.
The video player that I am using (flick_video_player) has video_player as its dependency.
Answers are much appreciated.
Regards
I think you can use visibility detector for the purpose-
VisibilityDetector(
key: ObjectKey(flickManager),
onVisibilityChanged: (visibility){
if (visibility.visibleFraction == 0 && this.mounted) {
flickManager?.flickControlManager?.pause();//pausing functionality
}
},
child: Container(
child: AspectRatio(
aspectRatio: 1280/720,
child: FlickVideoPlayer(
flickManager: flickManager
),
/*VideoPlayer(
video_controller
),*/
),
),
),
I was working on something similar. For more info like how to play it again and more you can refer this repo- https://github.com/GeekyAnts/flick-video-player/tree/master/example/lib/feed_player
Hope it helped!
Maybe this visibility detector package can help https://pub.dev/packages/visibility_detector
Wrap your list of videos with a NotificationListener and listen to whether the user has started or stopped scrolling. Use this value to either play or pause your video.
Edit: misread your question. This will work for pausing once the user scrolls. If you want to detect whether the video is within the current view, check out ScrollablePositionedList.
return NotificationListener(
onNotification: (notificationInfo) {
if (notificationInfo is ScrollStartNotification) {
// Set a state value to indicate the user is scrolling
}
if (notificationInfo is ScrollEndNotification) {
// Set a state value to indicate the user stopped scrolling
}
return true;
},
child: YourVideos(),
);
This is exactly what you need, inview_notifier_list:
InViewNotifierList(
isInViewPortCondition:
(double deltaTop, double deltaBottom, double vpHeight) {
return deltaTop < (0.5 * vpHeight) && deltaBottom > (0.5 * vpHeight);
},
itemCount: 10,
builder: (BuildContext context, int index) {
return InViewNotifierWidget(
id: '$index',
builder: (BuildContext context, bool isInView, Widget child) {
return Container(
height: 250.0,
color: isInView ? Colors.green : Colors.red,
child: Text(
isInView ? 'Is in view' : 'Not in view',
),
);
},
);
},
);
In a brand new Flutter project, if I add a showTimePicker widget, then open the time picker in input mode, the height of the dialog is shorter than the input mode contents, so you have to scroll to see the OK and Cancel buttons. This, even though the input mode is half as tall as the dial mode contents, which doesn't require scrolling.
Question: Is there any way to add padding or a min-height to a Flutter dialog such as the showTimePicker?
I've seen answers that describe sizing a container outside of/around the picker, or using the builder method, and others mentioning custom styling, but nothing for the size of the picker dialog itself that might address this vertical cutoff.
Flutter 2.0.3 - Device: Pixel XL with Android 10.
Any insights appreciated.
TextButton(
onPressed: () async {
final _selectedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: TimePickerEntryMode.input,
);
if (_selectedTime != null) {
String thisHour = _selectedTime.hour <= 9
? '0${_selectedTime.hour}'
: '${_selectedTime.hour}';
String thisMin = _selectedTime.minute <= 9
? '0${_selectedTime.minute}'
: '${_selectedTime.minute}';
print('$thisHour:$thisMin');
}
},
child: Text(
'Test It',
style: TextStyle(
fontSize: 22,
),
),
),
I solved this question this adding this code in showTimePicker builder.
builder: (context, childWidget) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(
textScaleFactor: 1),
});
The answer by zey is close to correct. This is a full working example:
await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (context, childWidget) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
child: childWidget!,
);
},
);
The issue is described in this flutter issue, and is happening at least since version 2.2 (and is still happening on Flutter 3.0.2)
I'm building an apps, that contain floatingactionbutton which I made with my own custom, when it pressed it shows 3 menu icons below it.
There are 2 problems:
When the orientation change to landscape, and we press floatingactionbutton it won't show instead of it will show when we press long, continue no 2
In current landscape it shows with long press like I said in no 1, and when we back again to portrait it need long press again to make it show
I've been trying some ways to make it fix, but it still doesn't work.
Here's the code and screenshot
When portrait menu show up
When changing to landscape, menu icons are missing and need long press to make it show
for floatingActionButton
floatingActionButton: OrientationBuilder(
builder: (BuildContext context, Orientation orientation){
return orientation == Orientation.landscape
? _buildMenu(context)
: _buildMenu(context);
},
),
_buildMenu() that call floatingActionButton
Widget _buildMenu(BuildContext context){
final icons = [ Icons.swap_vert, Icons.check_circle_outline, Icons.filter_list ];
var nowOrientation = MediaQuery.of(context).orientation;
var b = Container(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
return OverlayBuilder(
showOverlayTrue: true,
overlayBuild: (BuildContext overlayContext){
RenderBox box = context.findRenderObject() as RenderBox;
final center = box.size.center(box.localToGlobal(const Offset(0.8, 0.8)));
return new Positioned(
top: Offset(center.dx, center.dy - icons.length * 35.0).dy,
left: Offset(center.dx, center.dy - icons.length * 35.0).dx,
child: new FractionalTranslation(
translation: const Offset(-0.5, -0.6),
child: FabIcons(
icons: icons,
),
),
);
},
);
},
),
);}
To make it simple in viewing I put some code on github
OverlayBuilder Class https://github.com/ubaidillahSriyudi/StackOverflowhelp/blob/master/OverlayBuilderClass
Fabicons Class
https://github.com/ubaidillahSriyudi/StackOverflowhelp/blob/master/FabIcons
Thanks so much to someone that could help it
Happens because every time you change orientation, your FloatingActionButton rebuilds and loses state.
You should find a way to save the state of FabIcons widget.
Simple solution :
Constructing FabIcons widget with
icons,
iconTapped;
These variables should be saved in the Parent Widget, so every time you call _buildMenu(context); you pass in those variables