How to stop gif loop after 1 time? It is animating forever.
Image(
color: Colors.red,
image: new AssetImage(Icn.splash),
width: 150.0,
),
Solution
- Go to https://ezgif.com/loop-count
- Upload gif
- Set loop count 1 (0 - infinity)
- Change loop count and download gif
I hope this flutter package will help;
A flutter plugin to control gif animation: https://pub.dev/packages/gif_ani
Two steps:
Edit the gif loop count from 0(infinite) to 1 using any online gif editing tool like https://onlinegiftools.com/change-gif-loop-count and/or https://ezgif.com/loop-count and download the edited gif. This would ensure that the gif is played only once.
Manually evict the image cache to ensure the gif is played again when the user navigates away and/or uses the back button and revisits the page assuming the goal is to play the gif every time the user visits the page but just once.
Sample code:
import 'package:flutter/material.dart';
class OneTimeGifLoader extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _OneTimeGifLoaderState();
}
}
class _OneTimeGifLoaderState extends State<OneTimeGifLoader> {
late AssetImage myAssetImage;
#override
void initState() {
super.initState();
myAssetImage = const AssetImage("assets/path/to/my/image.gif");
}
#override
void dispose() {
super.dispose();
myAssetImage.evict(); //Evict image cache
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("One time gif loader"),
),
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: myAssetImage,
fit: BoxFit.contain,
),
color: Colors.white,
),
),
),
);
}
}
this code:
Image.asset("assets/tasky_logo.gif",
gaplessPlayback: false, fit: BoxFit.fill)
Related
In debugging, it doesn't show any error, but the container didn't come out colored just for the Web, as shown in the following image:
Container coloring bug
There doesn't seem to be anything wrong with the code, can anyone tell me what it could be?
import 'package:flutter/material.dart';
import 'package:jumil_connect_front/utilities/constants/app_constants.dart';
import '../../widgets/dashboard/header.dart';
import '../../widgets/dashboard/top_menu.dart';
class FilesScreen extends StatefulWidget {
static const String route = '/files';
const FilesScreen({super.key});
#override
State<FilesScreen> createState() => _FilesScreenState();
}
class _FilesScreenState extends State<FilesScreen> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: SafeArea(
child: Column(
children: [
// const Header(),
// const SizedBox(
// height: 5,
// width: double.infinity,
// child: Image(
// image: AssetImage('assets/images/color_line.png'),
// fit: BoxFit.fill,
// ),
// ),
// const TopMenu(),
Row(
children: [
Container(
width: 330,
height: size.height,
color: Colors.red
)
],
)
],
),
),
);
}
}
This happened to me being hot restart. When ever I faced this issue, I follow,
rebuild the app again or
flutter clean and rebuild the app again
I used HTML rendering and the bug came up, apparently it's some canvaskit bug. I don't know if the ideal solution is to change the rendering only, but that's what solved it for me.
Using this command:
flutter run -d chrome --web-renderer html
This question already has answers here:
How to make Before-After image slider view in Flutter
(2 answers)
Closed 9 months ago.
I want to make to make one page in flutter, that take two images and give the possibility to compare them, having one slider that make one image grow in weight.
But i had problem fixing the image size from the changing container, so the question is: How i can fix the size to take all the weight but the container change his weight without change the image visualization?
After the code i add one snapshot of the working code, but like you can see that they are the same image, and i have the slider in the middle the image should be the "same". At this moment the image is modify based in the container size.
class ImageComparePage extends StatefulWidget {
late ImageOfDimension imageOne;
late ImageOfDimension imageTwo;
ImageComparePage({required this.imageOne, required this.imageTwo});
#override
_ImageComparePageState createState() => _ImageComparePageState();
}
class _ImageComparePageState extends State<ImageComparePage> {
double opacityValue = 0.5;
#override
void initState() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
FlutterI18n.translate(context, "image_compare.title"),
),
),
body: Column(
children: [
Slider(
value: opacityValue,
min: 0,
max: 1,
onChanged: (rating) {
setState(() {
opacityValue = rating;
print(opacityValue);
});
},
),
Expanded(
child: Stack(
fit: StackFit.passthrough,
children: [
imageTwoToCompareWithOpacity(),
imageOneToCompare(),
],
),
)
],
),
);
}
Widget imageOneToCompare() {
return Container(
width: MediaQuery.of(context).size.width * opacityValue,
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: FileImage(File(widget.imageOne.path)), fit: BoxFit.cover),
),
);
}
Widget imageTwoToCompareWithOpacity() {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
// colorFilter: new ColorFilter.mode(
// Colors.black.withOpacity(opacityValue), BlendMode.dstATop),
image: FileImage(File(widget.imageTwo.path)),
fit: BoxFit.cover),
),
);
}
}
I'm using Ink widget with decoration to allow ink splashes above images and colored background.
After I wrapped it inside Dismissible, I got a wierd effect: When I swipe the widget, it's content moves as expected but the decoration stucks in it's original position.
You can see this live in dartpad: https://dartpad.dev/5ef2d2eb3823821a74aa11c680d84d4b?null_safety=true
Q: Is this an intended behaviour in flutter or is it a bug?
Note: The issue disappears if I replace Ink with Container or if I put it out of SingleChildScrollView.
A code to reproduce:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// remove SingleChildScrollView and all will be fine
body: SingleChildScrollView(
child: Dismissible(
key: Key('1'),
// change Ink to Container and all will be fine
child: Ink(
width: 100,
height: 100,
color: Colors.red,
child: Text('Swipe me, and watch my background get stuck!'),
),
),
),
),
);
}
}
The documentation of Ink is...
Paints a decoration (which can be a simple color) on a [Material].
It happens in your sample code because it colors the MaterialApp. To fix your issue, wrap the Ink inside a Material.
Sample...
Material(
child: Ink(
width: 100,
height: 100,
color: Colors.red,
child: Text('Swipe me, and watch my background get stuck!'),
),
),
I'm sorry if this question sounds a bit weird.
I have an issue with how long it takes to load a backgroundImage in a controller. I am using a Container's backgroundImage property as a background for my Scaffold. But during the loading of that particular page, it shows a black background until the image is loaded.
Is there a way I can wait for the image to be loaded before I navigate to the said page?
Below is my Code sample of the page in question:
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imgSubscriptionBGPNG),
fit: BoxFit.fitHeight,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Column()
),
);
Whew! It wasn't that difficult to solve after all, thanks to #Mr Random for his noble suggestion.
I did precache the image on the previous screen and passed it as an argument to the next page. That worked for me.
Here are the code snippets:
In the State class of the first screen:
final bgImage = AssetImage(imgSubscriptionBGPNG);
#override
void didChangeDependencies() {
precacheImage(bgImage, context);
super.didChangeDependencies();
}
And in the build function:
BtnButton(
onPressed: () {
Navigator.push(context,CupertinoPageRoute(
builder: (context)
=> SubscriptionScreen(bgImage: bgImage)));}),
Basically, I have a button that I made in Flare and it should make an animation then I tap it! It works well but the animation starts everytime I tap anywhere within my app and not only the button.
Is there any way I can make animation only when I click in the Button Area? I`m using GestureDetector to handle tapping.
https://i.stack.imgur.com/ZBjmz.jpg
My code:
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
import 'package:vibrate/vibrate.dart';
void main() => runApp(MaterialApp(
home: InvalidButton(),
));
class InvalidButton extends StatefulWidget {
#override
_InvalidButtonState createState() => _InvalidButtonState();
}
class _InvalidButtonState extends State<InvalidButton> {
var _type = FeedbackType.heavy;
final FlareControls controls = FlareControls();
void _playAnimation(){
controls.play('invalid');
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[50],
body: Container(
child: GestureDetector(
onTap: () {
setState(() {
_playAnimation();
Vibrate.feedback(_type);
});
},
child: FlareActor(
'assets/invalid_button.flr',
animation: 'invalid',
alignment: Alignment.center,
fit: BoxFit.contain,
controller: controls,
),
),
),
);
}
}
I`m a newbie so will be glad to any help!
Do you have space around the button in the Rive editor ? If so, go in design mode, click Artboard and then "fit contents". That should remove the extra space. Then, wrap your FlareActor with a SizedBox and set its size, like so :
SizedBox(
width: 100,
height: 100,
child: FlareActor(),
)
That should do it.