Let's say I have an image on the device's disk and load it on the screen providing its path to a FileImage.
I edit that image and save it on the same path expecting calling the setState(() {}) function will reload it. But it doesn't.
I tried clearing the image cache by calling imageCache.clear() function and also imageProvider.evict() but no difference.
If I close that page and open it again, I see the updated images.
I assume the images that are being displayed on the screen are in the memory, if my assumption is correct, how to reload it?
I know I'm a bit late, but I used this workaround:
_tmpImageFile.existsSync() ? Image.memory(
Uint8List.fromList(_tmpImageFile.readAsBytesSync()),
alignment: Alignment.center,
height: 200,
width: 200,
fit: BoxFit.contain,
) : Container(),
This is also working for me:
Image previewImage = Image.file(
File(scenePreviewFilename),
);
And when pressing a button or something just evict the cached image from imageCache like this:
setState(() {
imageCache.evict(previewImage.image, includeLive: true);
});
PS: I had some issues getting this to work(similar to the initial post) because I was generating the image in another thread and the image was loaded before it was generated, resulting in the imageCache appearing not to have an effect ... so make sure you are not in this race situation.
Already tested - Adding the both image cache commands will solve the problem.
imageCache.clear();
imageCache.clearLiveImages();
});
Would changing the key of the Image do the trick?
Set a key to the image
Image.file(
_imageFile,
key: _key,
fit: BoxFit.cover,
),
and change the key every time you change _imageFile, let's set it to timestamp for example
setState(() {
_imageFile = newImageFile;
_key = DateTime.now().millisecondsSinceEpoch;
});
This is a bit ugly workaround, but it works for me. Here we're resetting image cache + force reloading image from disk:
class _MyAppState extends State<MyApp> {
final imageKey = GlobalKey();
bool forceLoad = false;
#override
Widget build(BuildContext context) {
final app = MaterialApp(
home: Scaffold(
body: forceLoad
? Image.memory(currentFile.readAsBytesSync(), key: imageKey)
: Image.file (currentFile, key: imageKey),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.refresh),
onPressed: () async {
await (imageKey.currentWidget as Image).image.evict(); // reset cache for current image
setState(() {
forceLoad = true; // reloading current image from disk
});
},
)
)
);
forceLoad = false;
return app;
}
}
The other answers were missing step 2. Full explanation here.
call imageCache.clear(); and then imageCache.clearLiveImages(); when the new image needs to be reloaded.
Add a value key in the image widget to ensure the new image gets rebuilt
Image(image: FileImage(File(pathName)), key: ValueKey(File(pathName).lengthSync()))
The image should reload after.
Related
I've been trying to implement a gyroscope image viewer using the sensors package, however, the result seems to be very laggy. I have found a similar project on YouTube which is trying to achieve a similar goal, but as you can see in the video the animation is also very laggy.
The following code is simply outputting the data from the event, I notice how the data is being updated lags like 50ms in between updates.
Is there a way to smoothen the animation or update the data faster? Or is this a Flutter limitation?
NOTE:
I have tried --release version as suggested by other posts but the result stays the same.
import 'package:sensors/sensors.dart';
class MyGyro extends StatefulWidget {
final Widget child;
MyGyro({this.child});
#override
_MyGyroState createState() => _MyGyroState();
}
class _MyGyroState extends State<MyGyro> {
double gyroX = 0;
double gyroY = 0;
#override
void initState() {
super.initState();
gyroscopeEvents.listen((GyroscopeEvent event) {
setState(() {
gyroX = ((event.x * 100).round() / 100).clamp(-1.0, 1.0) * -1;
gyroY = ((event.y * 100).round() / 100).clamp(-1.0, 1.0);
});
});
}
#override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(gyroY, 0),
child: Container(
child: Center(
child: Column(
children: [Text("X: ${gyroX}"), Text("Y: ${gyroY}"),],
),
),
),
),
);
}
}
I have found that is purely the problem of the sensors package I was using, either they have hard coded a slower interval when listening to the sensor event, or they are just using the default interval by the IOS channel.
So, I have found another package called flutter_sensors which had solved the problem. It's a very simple API to access the sensor events, but it allows you to change the interval.
When popping a screen navigating to other one by clicking on the showBottomSheet, this error is thrown through the following code . I cant get why this is occurring.
class _CheckoutButtonState extends State<_CheckoutButton> {
final GlobalKey<ScaffoldState> _globalKey = GlobalKey();
final DateTime deliveryTime = DateTime.now().add(Duration(minutes: 30));
final double deliveryPrice = 5.00;
#override
Widget build(BuildContext context) {
SubscriptionService subscriptionService =
Provider.of<SubscriptionService>(context);
CheckoutService checkoutService = Provider.of<CheckoutService>(context);
return Container(
height: 48.0,
width: MediaQuery.of(context).size.width * 0.75,
child: StreamBuilder(
stream: subscriptionService.subscription$,
builder: (_, AsyncSnapshot<Subscription> snapshot) {
if (!snapshot.hasData) {
return Text("CHECKOUT");
}
final Subscription subscription = snapshot.data;
final List<Order> orders = subscription.orders;
final Package package = subscription.package;
num discount = _getDiscount(package);
num price = _totalPriceOf(orders, discount);
return StreamBuilder<bool>(
stream: checkoutService.loading$,
initialData: false,
builder: (context, snapshot) {
bool loading = snapshot.data;
return ExtendedFloatingActionButton(
loading: loading,
disabled: loading,
action: () async {
checkoutService.setLoadingStatus(true);
final subscription =
await Provider.of<SubscriptionService>(context)
.subscription$
.first;
try {
await CloudFunctions.instance.call(
functionName: 'createSubscription',
parameters: subscription.toJSON);
final bottomSheet =
_globalKey.currentState.showBottomSheet(
(context) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).primaryColor,
Theme.of(context).primaryColor,
],
stops: [-1.0, 0.5, 1.0],
),
),
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(bottom: 16.0),
child: Text(
"Thank you for your order",
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.display1,
),
),
SvgPicture.asset(
'assets/images/thumb.svg',
height: 120.0,
width: 100.0,
)
// CircleAvatar(
// radius: 40.0,
// backgroundColor: Colors.transparent,
// child: Icon(
// Icons.check,
// color: Theme.of(context)
// .textTheme
// .display1
// .color,
// size: 80.0,
// ),
// ),
],
),
),
Container(
width:
MediaQuery.of(context).size.width * 0.9,
height: 72.0,
padding: EdgeInsets.only(bottom: 24),
child: ExtendedFloatingActionButton(
text: "ORDER DETAILS",
action: () {
Navigator.of(context).pop();
},
),
),
],
),
);
},
);
bottomSheet.closed.then((v) {
Navigator.of(context)
.popUntil((r) => r.settings.isInitialRoute);
});
} catch (e) {
print(e);
final snackBar =
SnackBar(content: Text('Something went wrong!'));
Scaffold.of(context).showSnackBar(snackBar);
}
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"CHECKOUT ",
style: Theme.of(context)
.textTheme
.display4
.copyWith(color: Colors.white),
),
Text(
"EGP " +
(price + (orders.length * deliveryPrice))
.toStringAsFixed(2),
style: Theme.of(context)
.textTheme
.display4
.copyWith(color: Theme.of(context).primaryColor),
),
],
),
);
});
},
),
);
}
num _totalPriceOf(List<Order> orders, num discount) {
num price = 0;
orders.forEach((Order order) {
List<Product> products = order.products;
products.forEach((Product product) {
price = price + product.price;
});
});
num priceAfterDiscount = price * (1 - (discount / 100));
return priceAfterDiscount;
}
num _getDiscount(Package package) {
if (package == null) {
return 0;
} else {
return package.discount;
}
}
}
Error :
>══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (24830): The following assertion was thrown building Navigator-[GlobalObjectKey<NavigatorState>
I/flutter (24830): _WidgetsAppState#90d1f](dirty, state: NavigatorState#6b2b6(tickers: tracking 1 ticker)):
I/flutter (24830): 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 1995 pos 12: '!_debugLocked':
I/flutter (24830): is not true.
I/flutter (24830): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (24830): more information in this error message to help you determine and fix the underlying cause.
I/flutter (24830): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (24830): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (24830): When the exception was thrown, this was the stack:
Instead of giving you a direct answer, I'm going to walk you through how I thought about this when I saw the question, in the hope that it'll help you in the future.
Let's take a look at the assertion. It says Failed assertion: line 1995 pos 12: '!_debugLocked': I/flutter (24830): is not true.. Hmm, interesting. Let's take a look at that line of code.
assert(!_debugLocked);
Well, that doesn't give me much more information, let's look at the variable.
bool _debugLocked = false; // used to prevent re-entrant calls to push, pop, and friends
That's better. It's there to prevent re-entrant calls to push, pop, etc (by that it means that it doesn't want you calling 'push', 'pop', etc from within a call to 'push', 'pop'). So let's trace that back to your code.
This seems like the likely culprit:
bottomSheet.closed.then((v) {
Navigator.of(context)
.popUntil((r) => r.settings.isInitialRoute);
});
I'm going to skip a step here and use deductive reasoning instead - I'm betting that the closed future is finished during a pop. Go ahead and confirm that by reading the code if you feel like it.
So, if the issue is that we're calling pop from within a pop function, we need to figure out a way to defer the call to pop until after the pop has completed.
This becomes quite simple - there's two ways to do this. The simple way is to just use a delayed future with zero delay, which will have dart schedule the call as soon as possible once the current call stack returns to the event loop:
Future.delayed(Duration.zero, () {
Navigator. ...
});
The other more flutter-y way of doing it would be to use the Scheduler to schedule a call for after the current build/render cycle is done:
SchedulerBinding.instance.addPostFrameCallback((_) {
Navigator. ...
});
Either way should eliminate the problem you're having.
Another option is also possible though - in your ExtendedFloatingActionButton where you call pop:
ExtendedFloatingActionButton(
text: "ORDER DETAILS",
action: () {
Navigator.of(context).pop();
},
),
you could instead simply do the call to Navigator.of(context).popUntil.... That would eliminate the need for the doing anything after bottomSheet.closed is called. However, depending on whatever else you might or might not need to do in your logic this may not be ideal (I can definitely see the issue with having the bottom sheet set off a change to the main part of the page and why you've tried to make that happen in the page's logic).
Also, when you're writing your code I'd highly recommend separating it into widgets - for example the bottom sheet should be its own widget. The more you have in a build function, the harder it is to follow and it can actually have an effect on performance as well. You should also avoid using GlobalKey instances wherever possible - you can generally either pass objects (or callbacks) down if it's only through a few layers, use the .of(context) pattern, or use inherited widgets.
For those who are invoking the Navigator as part of the build process. I found that it will intermittently throwing asserting error on the debugLocked
I avoided this issue by wrapping with a addPostFrameCallback:
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => MyPage()));
});
I had this same issue any answer not worked for me and this error doesn't explain any thing.
After going each line code i found that we cannot launch any state in build method like this
#override
Widget build(BuildContext context) {
var viewmodel = Provider.of<ViewModel>(context);
Navigator.of(context).push(MaterialPageRoute(builder:
(context)=>CreateItemPage(viewmodel.catalogData))); // this is way i was getting error.
return Scaffold();
}
I was getting error in CreateItemPage screen because of that line.
Solution of this issue create button which call this line Navigator.of(context).push(MaterialPageRoute(builder: (context)=>CreateItemPage(viewmodel.catalogData)));
For me, it was coming because I created a cycle of pushes that was causing this error.
For example,
In the Initial route which was /loading the code was pushing /home
class _LoadingState extends State<Loading> {
void getTime() async {
// DO SOME STUFF HERE
Navigator.pushNamed(context, '/home');
}
#override
void initState() {
super.initState();
getTime();
}
And in the /home initState I was pushing /loading creating a cycle.
class _HomeState extends State<Home> {
#override
void initState() {
super.initState();
Navigator.pushNamed(context, '/loading');
}
Add Some Delay Then Try to do this Your Problem will be Solved :
Future.delayed(const Duration(milliseconds: 500), () {
// Here you can write your code
setState(() {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => SetCategory()),
(route) => false);
});
});
I had similar error, like a dialog box which had a logout button, which when pressed goes to login screen, but an _debugLocked error occurs, so I used
Navigator.of(context).pushNamedAndRemoveUntil('/screen4', (Route<dynamic> route) => false);
This removes all routes in the stack so that user cannot go back to the previous routes after they have logged out.
Setting (Route<dynamic> route) => false will make sure that all routes before the pushed route are removed.
I don't know if this is the "real" solution but it helped me as a beginner to Flutter.
I've gotten this error due to a typo accidentally calling Navigator.of(context).push during my build():
E/flutter ( 6954): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 2845 pos 18: '!navigator._debugLocked': is not true.
The simulator flashed a more informative error:
setState() or markNeedsBuild() called during build.
This Overlay widget cannot be marked as needing to build because the framework
is already in the process of building widgets. A widget can be marked as needing
to be built during the build phase only if one of its ancestors is currently
building. This exception is allowed because the framework builds parent widgets
before children, which means a dirty descendant will always be built.
Otherwise, the framework might not visit this widget during this build phase The
widget on which setState() or markNeedsBuild() was called was:
Overlay-[LabeledGlobalKey<OverlayState>#de69b]
The widget which was currently being built when the offending call was made was:
FutureBuilder
Basically, you should not be trying to push/pop to a new route in the middle of a build. If you really need to, wait for the build to finish, which is why others are suggesting wrapping it in a SchedulerBinding.instance.addPostFrameCallback to execute after everything is rendered, but you probably should find a better way to do this outside of a build.
In my case, I typed:
onTap: _onTap(context),
when I really meant to type:
onTap: () => _onTap(context),
my _onTap handler was doing the Navigator push. I had forgotten to wrap my handler in a closure that captures the context it needs, and instead actually was executing it instead of passing onTap: my callback.
Dialog solution
For those who encounter this when calling Navigator.push(..) from a Dialog.
You need to do Navigator.pop(context);to programmatically close modal first, then call Navigator.push(..).
For people encountering this issue while using bloc, make sure you are using navigation in a BlocListener (or BlocConsumer's listener). In my case I was using Navigator inside BlocBuilder. I am new to Flutter/Bloc and the accepted answer resolved the problem, but was not the proper solution. Switching my BlocBuilder to a BlocConsumer allowed for me to navigate during specific states.
Example of using BlocConsumer, navigate when state is 'LoginSuccess':
BlocConsumer<LoginBloc, LoginState>(
listener: (BuildContext context, state) {
if (state is LoginSuccess) {
Navigator.of(context).pushReplacement(
// Add your route here
PageRouteBuilder(
pageBuilder: (_, __, ___) => BlocProvider.value(
value: BlocProvider.of<NavigationBloc>(context),
child: HomeScreen(),
),
),
);
}
},
// Only build when the state is not LoginSuccess
buildWhen: (previousState, state) {
return state is! LoginSuccess;
},
// Handle all states other than LoginSuccess here
builder: (BuildContext context, LoginState state) {
if (state is LoginLoading) {
return Center(child: CircularProgressIndicator());
} else .....
In resume, you just need to remove it from your initState.
I would recomend extend the class with AfterLayout and inside the
afterFirstLayout you can redirect it to the page you want. This will garantee that everything is ok before routing.
See bellow the steps:
Add to pubspec: after_layout: ^1.0.7+2
Then, You will extend it to the class you want to use. In my case was a statefull widget named HomePage. So it will looks like:
class HomePage extends StatefulWidget {
#override
HomePageState createState() => HomePageState();
} //no changes here
class HomePageState extends State<HomePage> with AfterLayoutMixin<HomePage> {
//the with AfterLayoutMixin<pageName> is the only thing you need to change.
Now, you need to implement a method called afterlayout, that will be executed after the build is completed.
#override
Future<void> afterFirstLayout(BuildContext context) {
//your code here safetly
}
You can find information here:
https://pub.dev/packages/after_layout
For those that still have the same issue, this help me to solve it.
navigationService.popUntil((_) => true);
navigationService.navigateTo(
'authentication',
);
basically i wait until the navigation finish setting everything and then call the navigateTo.
I got this error because my initialRoute was /login. However, the initialRoute is required to be /.
If the route name starts with a slash, then it is treated as a "deep link", and before this route is pushed, the routes leading to this one are pushed also. For example, if the route was /a/b/c, then the app would start with the four routes /, /a, /a/b, and /a/b/c loaded, in that order.
Here is a link to the docs for reference.
I had the same issue and took me some time to figure out. I was listening to the state on the screen based on which it will navigate to different screen. And then on button click I was changing that state and navigating to different screen which was causing an issue.
I am using flutter version 2.3.3
I also faced this issue when i try to pop back into my home screen from a second screen with command Navigator.pop(context)
I solved this issue by replacing this line of code with Navigator.of(context).pop(context)
It worked fine for me hope it hepls
I completed the Flutter NameGenerator code lab and wanted to extend it to remove items directly from the "Saved suggestions list".
To do so, I've added the onTap handler below which removes the pair from the list.
However, the list doesn't update until I navigate back and reopen the screen again.
How do I immediately update the list on the second screen?
void _pushSaved() {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
final Iterable<ListTile> tiles = _saved.map((WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
onTap: () => setState(() {
_saved.remove(pair);
}),
);
});
final List<Widget> divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return Scaffold(
appBar: AppBar(
title: const Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
}),
);
}
Why your code doesn't work
The reason your list doesn't update is that it's a different screen pushed on the Navigator.
Because your _pushSaved method is inside the original screen, you call setState on that screen and rebuild all the widgets of the original screen.
The pushed screen isn't affected because it's not a child of your original screen.
Rather, the original screen told the Navigator to create a new screen, so it's some subtree of the Navigator of your MaterialApp and not accessible to you.
Solution
Accessing the same live data on different screens is something that's not that easy to do just with StatefulWidgets.
Basically, your project has grown complex enough so that it's time to think about a more sophisticated state management solution.
Here's a video from Google I/O about state management that you could check out for some inspiration.
When creating a widget tree, will inserting const before static widgets improve performance?
ie
child: const Text('This is some text');
vs
child: Text('This is some text');
I know that, with Dart 2, const is optional and will be inserted automatically is some places. Is this one of those situations? If it isn't, will using const reduce memory usage/improve performance?
Thanks for your answers!
It is a small performance improvement, but it can add up in larger apps or apps where the view is rebuilt often for example because of animations.
const reduces the required work for the Garbage Collector.
You can enable some linter rules in analysis_options.yaml that tell you when you should add const because it's not inferred but would be possible like
http://dart-lang.github.io/linter/lints/prefer_const_constructors.html
http://dart-lang.github.io/linter/lints/prefer_const_declarations.html
http://dart-lang.github.io/linter/lints/prefer_const_literals_to_create_immutables.html
or that reminds you when you use const but it is inferred anyway
http://dart-lang.github.io/linter/lints/unnecessary_const.html
See also https://www.dartlang.org/guides/language/analysis-options
In the case of Flutter, the real gain with const is not having less instantiation.
Flutter has a special treatment for when the instance of a widget doesn't change: it doesn't rebuild them.
Consider the following:
Foo(
child: const Bar(
child: Baz()
),
)
In the case of build method being called again (setState, parent rebuild, Inheritedwidget...), then due to the const for Bar subtree, only Foo will see its build method called.
Bar will never get rebuilt because of its parent, because Flutter knows that since the widget instance didn't change, there's nothing to update.
Update:
I noticed I received an upvote lately, and I must say that I'm not confident in my tests below but that's all I got. So someone better run a better test.
I've ran some test to see if it makes a difference.
The tests are heavily based on the ones done in this article.
For the tests, there are 300 containers with text inside moving randomly on the screen. Something you wouldn't see in a day to day app.
For my results there is no difference in frame per second and there is no difference in memory usage except that the Garbage collector seems to run more often when not using const. Again, the FPS were about the same.
Imo, the performance boost is negligible and sounds like preemptive optimization. However there is no deeply nested chain of widgets in the test, but I don't see how that would make a difference. The article above seems to say there is a small one, but that's not what my tests show.
I've a card like this (this is the const version):
import 'package:flutter/material.dart';
class MyCard extends StatelessWidget {
const MyCard();
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
margin: const EdgeInsets.all(8.0),
height: 100,
width: 100,
color: Colors.red,
child: const Text('Hi'),
),
);
}
}
that's rendered 300 times and moving on the screen randomly.
This is the widget that makes them move
import 'package:flutter/material.dart';
import 'dart:math';
import 'dart:async';
import './my-card.dart';
class MovingContainer extends StatefulWidget {
#override
_MovingContainerState createState() => _MovingContainerState();
}
class _MovingContainerState extends State<MovingContainer> {
final Random _random = Random();
final Duration _duration = const Duration(milliseconds: 1000);
Timer _timer;
double _top = 0;
double _left = 0;
#override
void initState() {
super.initState();
initMove();
}
void initMove() {
_timer = Timer.periodic(
_duration,
(timer) {
move();
},
);
}
void move() {
final Size size = MediaQuery.of(context).size;
setState(() {
_top = _random.nextInt(size.height.toInt() - 100).toDouble();
_left = _random.nextInt(size.width.toInt() - 100).toDouble();
});
}
#override
void dispose() {
_timer.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedPositioned(
top: _top,
left: _left,
child: const MyCard(),
duration: _duration,
);
}
}
Note: I'm new to flutter, and so are many others because it's a relatively new framework. Therefor my tests could very well be wrong, don't take it as gospel. Also don't take it as gospel when you read an article titled << Number One Perf gain on Flutter >>. I've yet to see actual proof there is a perf gain.
When we use setState() Flutter calls the build method and rebuilds
every widget tree inside it. The best way to avoid this is by using
const costructors.
Use const constructors whenever possible when building your own
widgets or using Flutter widgets. This helps Flutter to rebuild only
widgets that should be updated.
So if you have a StatefulWidget and you are using setState((){}) to
update that widget and you have widgets like:
class _MyWidgetState extends State<MyWidget> {
String title = "Title";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: <Widget>[
const Text("Text 1"),
const Padding(
padding: const EdgeInsets.all(8.0),
child: const Text("Another Text widget"),
),
const Text("Text 3"),
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() => title = 'New Title');
},
),
);
}
}
I want to display an animated picture, whatever its format, in Flutter. The fact is that currently there seems to be only one solution available, video_loader. This works only on full screen, but it doesn't fit my use case.
Any idea on how I could sort this out?
Now, Image widget Supports GIF. (April 18)
For Ex.
new Image(image: new AssetImage("assets/ajax-loader.gif"))
You can split the frames into separate images using https://ezgif.com/split and add them as assets in your pubspec.yaml.
Then use an Animation<int> to select the correct frame to display. Make sure to set gaplessPlayback: true to avoid flickering.
For example, the following code displays the frames of an animated GIF that was created by Guillaume Kurkdjian.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData.dark(),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _controller;
Animation<int> _animation;
#override
void initState() {
_controller = new AnimationController(vsync: this, duration: const Duration(seconds: 5))
..repeat();
_animation = new IntTween(begin: 0, end: 116).animate(_controller);
}
Widget build(BuildContext context) {
return new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) {
String frame = _animation.value.toString().padLeft(3, '0');
return new Image.asset(
'assets/frame_${frame}_delay-0.04s.png',
gaplessPlayback: true,
);
},
),
new Text('Image: Guillaume Kurkdjian', style: new TextStyle(fontStyle: FontStyle.italic)),
],
),
);
}
}
2021 Update
As of now flutter does supports playing gif files using the Image widget.
Image.asset('assets/logo.gif')
But there's a problem with current way of loading gif in flutter. The gif plays in a loop and you can't stop the gif after playing it once. There are other ways of showing animated pictures using Rive and Lottie and both of them comes with a pretty well maintained flutter package that gives lots of features out of the box.
Workaround :
Convert your gif to mp4 (Gif to mp4)
Convert mp4 to Lottie json (Mp4 to Json)
Upload your Lottie json to lottiefiles.com or add to your assets folder
Use Lottie package to load your animation
Example from Lottie package docs :
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),
// Load a Lottie file from a remote url
Lottie.network(
'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),
],
),
),
);
}
}
For sure this is not the most ideal way of loading a gif as this is just a workaround. You can simply use an Image widget if you're not doing much with your gif. But if you will use Lottie then you get lots of things that you can do with your gif with much more control.
In order to run gif animation only once, there are 2 solutions.
First solution.
List<int> listGifDuration = [0,0,22,26,31,27,30,29,29,23,29,24,25,27,33,33,29,29];
List<int> listGifDurationDs = [0,0,1,0,0,0,0,0,0,0,0,0,0,0,5,2,5,0];
List<double> listGifFrames = [0,0,315,389,310,294,435,423,425,331,425,360,365,395,309,384,426,435];
strgif = "assets/gif/motion-all.gif"
fetchGif(AssetImage(strgif)).then((value) {
controller= GifController(vsync: this,duration: Duration(seconds: listGifDuration[widget.storyid]));
controller.addListener(() => setState(() {}));
TickerFuture tickerFuture = controller.repeat(min:0,max:listGifFrames[widget.storyid],period:Duration(seconds: listGifDuration[widget.storyid]));
tickerFuture.timeout(Duration(seconds: listGifDuration[widget.storyid]), onTimeout: () {
controller.forward(from: 0);
controller.stop(canceled: true);
});
});
2nd solution.
Convert the property of the gif file from the infinite loop to 1 loop.
Please use following link to convert gif file looping count.
https://ezgif.com/loop-count
and then
child: new Image.asset(strgif),
We can use Image widget to load any type of image whether it is a normal image or the gif.
We can load them from our asset as well as from network with the help of Image widget
Image.asset('name');
Image.file(file);
Image.memory(bytes);
Image.network('src');
There are some dependency for load the gif also