Exporting Flare animation - flutter

Flare animation won't display on the screen.
I'm using:
Container(
height: 300.0,
width: 300.0,
child: FlareActor('checkmarkone.flr',
fit: BoxFit.contain,
alignment: Alignment.center,
),
),
When I'm running the app I get this message in the run console:
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: Unable to load asset: checkmarkone.flr
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1 FlareCacheAsset.load (package:flare_flutter/flare_cache_asset.dart:31:20)
#2 Cache.getAsset (package:flare_flutter/cache.dart:56:15)
#3 cachedActor (package:flare_flutter/flare_cache.dart:35:16)
#4 FlareRenderBox.loadFlare (package:flare_flutter/flare_render_box.dart:322:35)
#5 FlareActorRenderObject.coldLoad (package:flare_flutter/flare_actor.dart:322:20)
#6 FlareRenderBox.load (package:flare_flutter/flare_render_box.dart:272:7)
#7 FlareRenderBox.attach (package:flare_flutter/flare_render_box.dart:115:7)
#8 AbstractNode.adoptChild (package:flutter/src/foundation/node.dart:132:13)
#9 RenderObject.adoptChild (package:flutter/src/rendering/object.dart:1238:11)
#10 RenderObjectWithChildMixin.child= (package:flutter/src/rendering/object.dart:2905:7)<…>
I appreciate all suggestions.
Thanks

Make sure you have checkmarkone.flr file in your assets folder, then add it to your pubspec.yaml file
flutter:
assets:
- checkmarkone.flr
and then, run flutter packages get command to update the dependencies. Finally, do a cold restart of your project

Please check your pubspec.yaml file and ensure that the file checkmarkone.flr has been added/loaded correctly.
Eg.
pubspec.yaml
... (more on top)
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/checkmarkone.flr # Add it here
... (more on bottom)
Now wait for the flutter task (updating packages) to finish, then try loading the Flare animation using the asset path added above in your screen / widget via hot restart.
widget.dart
Container(
height: 300.0,
width: 300.0,
child: FlareActor('assets/checkmarkone.flr',
fit: BoxFit.contain,
alignment: Alignment.center,
),
),
Further reading
https://flutter.dev/docs/development/ui/assets-and-images

Related

I am using pdf lib to generate pdf and I want to add a simple text to pdf coming from the API, the text can be very long like 3,4 pages or more

I am using pdf lib to generate pdf and I want to add a text in pdf coming from the API, the text can be very long like 3,4 pages or more. Below is my code.
List<pw.Widget> widgets = [];
widgets.add(pw.Text(provider.getExtractedText));
final pdf = pw.Document();
pdf.addPage(
pw.MultiPage(
build: (pw.Context context) {
return [
pw.Wrap(
children: widgets
)
];
},
),
);
but i am getting the following exception.
E/flutter (19405): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: This widget created more than 20 pages. This may be an issue in the widget or the document. See https://pub.dev/documentation/pdf/latest/widgets/MultiPage-class.html
E/flutter (19405): #0 MultiPage.generate.<anonymous closure> (package:pdf/src/widgets/multi_page.dart:251:11)
E/flutter (19405): #1 MultiPage.generate (package:pdf/src/widgets/multi_page.dart:255:8)
E/flutter (19405): #2 Document.addPage (package:pdf/src/widgets/document.dart:118:10)
E/flutter (19405): #3 _DocumentConversionScreenState.saveFile (package:speak_and_translate/screens/document_conversion_screen.dart:215:11)
E/flutter (19405): <asynchronous suspension>
E/flutter (19405):
Your stacktrace gives you file and line number - so go and look there:
// Detect too big widgets
if (sameCount++ > maxPages) {
throw Exception(
'This widget created more than $maxPages pages. This may be an issue in the widget or the document. See https://pub.dev/documentation/pdf/latest/widgets/MultiPage-class.html');
}
As you see, it compares to maxPages. Where is that set? Check line 152:
this.maxPages = 20,
So, change that default to a sensible number for your application:
pw.MultiPage(
maxPages: 40, // <- add max pages here
build: (pw.Context context) {

Flutter: Exception: Invalid image data: Failed to decode image while loading image ( over ngrok )

I have uploaded an image through my flutter web application to my node-js backend. the file is uploaded fine and I can view it in VS code. I have "ngrok" running so I can connect with my flutter mobile application. but when I try and load the image in the mobile application this is what I get.
E/FlutterJNI(24257): Failed to decode image
E/FlutterJNI(24257): android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'unimplemented'Input contained an error.
E/FlutterJNI(24257): at android.graphics.ImageDecoder.nCreate(Native Method)
E/FlutterJNI(24257): at android.graphics.ImageDecoder.access$200(ImageDecoder.java:173)
E/FlutterJNI(24257): at android.graphics.ImageDecoder$ByteBufferSource.createImageDecoder(ImageDecoder.java:250)
E/FlutterJNI(24257): at android.graphics.ImageDecoder.decodeBitmapImpl(ImageDecoder.java:1862)
E/FlutterJNI(24257): at android.graphics.ImageDecoder.decodeBitmap(ImageDecoder.java:1855)
E/FlutterJNI(24257): at io.flutter.embedding.engine.FlutterJNI.decodeImage(FlutterJNI.java:524)
════════ Exception caught by image resource service ════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data
When the exception was thrown, this was the stack
#0 _futurize (dart:ui/painting.dart:5718:5)
#1 ImageDescriptor.encoded (dart:ui/painting.dart:5574:12)
#2 instantiateImageCodec (dart:ui/painting.dart:2056:60)
<asynchronous suspension>
Image provider: NetworkImage("https://ff8c-119-153-136-128.ngrok.io/uploads\banners\1660405360606-MicrosoftTeams-image.png", scale: 1.0)
Image key: NetworkImage("https://ff8c-119-153-136-128.ngrok.io/uploads\banners\1660405360606-MicrosoftTeams-image.png", scale: 1.
Although if I open the image the URL directly inside the browser, it loads fine.
P.S. I am uploading the image from the web app in bytes form using the file picker package.
This is the code to load the image:
CachedNetworkImage(
imageUrl: baseURL + banner.imageUrl!,
height: 120.h,
width: double.infinity,
fit: BoxFit.cover,
progressIndicatorBuilder: (context, str, progress) {
return SizedBox(
height: 120.h,
child: const Center(
child: CircularProgressIndicator.adaptive(),
),
);
},
),
I can't verify if the problem is because of ngrok or because the file is uploaded in bytes form.
Turns out, that it's the backward slash in the URL that is the problem. If I open the URL in the browser it automatically replaces "" with "/". But it doesn't happen in Flutter when loading the image.

'package:flutter/src/gestures/tap.dart': Failed assertion: line 201 pos 14: '_down == null && _up == null': is not true

I am using gesture tap to close the article detail page, when I reopen the article detail page, the app will show this error(the first time open the detail works fine, the second time open the detail will show this error and the detail could not roll up and down):
======== Exception caught by gesture library =======================================================
The following assertion was thrown while dispatching a pointer event:
'package:flutter/src/gestures/tap.dart': Failed assertion: line 201 pos 14: '_down == null && _up == null': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=2_bug.md
When the exception was thrown, this was the stack:
#2 BaseTapGestureRecognizer.addAllowedPointer (package:flutter/src/gestures/tap.dart:201:14)
#3 GestureRecognizer.addPointer (package:flutter/src/gestures/recognizer.dart:102:7)
#4 RawGestureDetectorState._handlePointerDown (package:flutter/src/widgets/gesture_detector.dart:1204:18)
#5 RenderPointerListener.handleEvent (package:flutter/src/rendering/proxy_box.dart:2821:29)
#6 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:361:22)
...
Event: PointerDownEvent#6e7c4(position: Offset(191.4, 563.1))
position: Offset(191.4, 563.1)
Target: RenderPointerListener#946e9 relayoutBoundary=up46
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=363.4, 0.0<=h<=Infinity)
size: Size(363.4, 458.2)
behavior: deferToChild
listeners: down
====================================================================================================
and this is my detail page flutter code:
return GestureDetector(
onHorizontalDragStart: _onHorizontalDragStart,
onHorizontalDragUpdate: _onHorizontalDragUpdate,
onHorizontalDragEnd: _onHorizontalDragEnd,
child: Container(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height * 0.9,
),
color: Theme.of(context).scaffoldBackgroundColor,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: buildListView(item, context),
),
));
void _onHorizontalDragStart(DragStartDetails details) {
_initialSwipeOffset = details.globalPosition;
}
void _onHorizontalDragUpdate(DragUpdateDetails details) {
_finalSwipeOffset = details.globalPosition;
}
void _onHorizontalDragEnd(DragEndDetails details) {
if (_initialSwipeOffset != null) {
final offsetDifference = _initialSwipeOffset!.dx - _finalSwipeOffset!.dx;
if (offsetDifference < 0) {
Navigator.pop(context);
}
}
}
I am searching from internet but find no one encount this problem. what should I do to fix this problem?
It looks like you are using a pre-release version of Flutter SDK. I recommend you use Flutter Stable channel and rebuild your project again.
according to Flutter build release channels
the stable version is recommended for all production app releases.
Now to know which branch you are currently using. open the terminal and type the following command.
flutter channel
The channel which you are on will be displayed with '*' at the beginning. E.g,
*master
dev
beta
stable
To change to the stable channel, run this command on your terminal.
flutter channel CHANNEL_NAME
For example, change the channel to stable,
flutter channel stable
To ensure that you're on the latest build from this channel, run
flutter upgrade
This is all you need to do.

Flutter : image not being found [duplicate]

This question already has answers here:
How to add image in Flutter
(15 answers)
Closed 1 year ago.
This is my widget to display a little pic of myself in the app.
Widget image() {
return CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage('images/me.jpeg'),
);
}
Yet, for some reason, I keep getting this
The following assertion was thrown resolving an image codec:
Unable to load asset: images/me.jpeg
When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:225:7)
<asynchronous suspension>
#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:668:31)
#2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:651:14)
#3 ImageProvider.resolveStreamForKey.<anonymous closure> (package:flutter/src/painting/image_provider.dart:504:13)
...
Image provider: AssetImage(bundle: null, name: "images/me.jpeg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#14309(), name: "images/me.jpeg", scale: 1.0)
Although the image is inside the folder. Please help
make sure you added the images to pubspec.yaml file and then run pub get
assets:
- images/me.jpeg

Flutter play custom sound using audioplayers 0.7.7?

pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/Images/1.png
- assets/Images/MP3.mp3
Test.dart
Widget localAsset() {
return _tab([
Text("Click to play"),
_btn('Play', () => audioCache.play('assets\Images\MP3.mp3')),
]);
}
I am new to flutter, for my applications i want play two sounds mode(background sound ,button action sound), after referred from flutter package i have changed code like as above , when i used this widget in my material,i am getting below error,
E/flutter ( 2750): [ERROR:flutter/shell/common/shell.cc(181)] Dart Error: Unhandled exception:
E/flutter ( 2750): Unable to load asset: assets/assetsImagesMP3.mp3
E/flutter ( 2750): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
Backslash are Windows-specific. Use slashes instead. Android is Unix-based and so is iOS
audioCache.play('assets/Images/MP3.mp3')