I'm using flutter wub with flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true
I need canvaskit for my richtext editor, there are some know issues if you don't use it : https://github.com/flutter/flutter/issues/49860
if you test this example app on flutter web with
flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true
import 'package:flutter/material.dart';
import 'package:catex/catex.dart';
class CatexExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CaTeX(r'\sum'),
),
);
}
}
you need :
catex: ^0.0.1+7
if anyone has a solution to display latex with canvaskit enabled..
Okay if anyone has the same problem, i switched to flutter_math and it works!
Related
I'm unable to load images to my app although I tried many solutions
my code is
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.amber,
appBar: AppBar(
backgroundColor: Colors.amber[900],
title: const Text("hi"),
),
body: Image(image: AssetImage("images/ab.png"),
),
),
);
}
}
this is my pubspec.yaml
flutter doctor
1- I used $ flutter clean and then $ flutter pub get.
2- I updated flutter SDK.
3- I mention only the folder (images).
4- I used a smaller image.
5- I restarted my laptop.
6- I run my code in another IDE.
but nothing is working for me, so can anyone help me?
thanks in advance
I copied your main.dart code, I created a images folder with a .png file.
I think the problem could be the position of the images folder, you should place it beside the lib folder.
Without seeing the project folder structure I cannot be sure, but if you do it like that your code should work fine.
Here's the pubspec.yaml:
flutter:
assets:
- images/
Here's a screenshot of the your code running:
currently I am developing an app using Flutter Web and I've been trying to use this library which does not have a lot of documentation.
I've tried the example provided but for some reason it's not working
In the example there is no onLoaded() {} function method and without that I get an error saying that I have to implement it.
Finally, if I want to set the width and height of the website I should call setState(). How do I do that?
Link to the library https://pub.dev/packages/easy_web_view2
Code: (I'm running main() in another file)
import 'package:flutter/material.dart';
import 'package:easy_web_view2/easy_web_view2.dart';
class Quiz extends StatelessWidget {
const Quiz({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('CyberQuiz'),
),
body: EasyWebView(
src: 'https://www.ncsc.gov.uk/',
onLoaded: () {
print('Loaded!!');
},
),
);
}
}
A bit of an unobvious issue. I was trying to embed a government website. Apparently you are not allowed to do that.
I am also using a different library which is called webviewx. It has better documentation than the other one
I have an app with lots of Lottie animations. They work fine in a Windows UWP app and AirBnB sample Android app. Also look fine in lottiefiles.com online test tool.
But they are glitchy in Flutter using Lottie for Flutter package. Not all of them, but many, maybe around a third.
Full source code below, you can try for yourself.
Glitches are either frame overlaps or blinking, as if there is a gap between frames.
Glitches are consistent, i.e. always happen in the same place, so does not seem like a performance issue.
Also, they are not happening between repeats, but in the middle of the animation, so again not an application issue but seems to be the issue with how they are rendered.
I have tried loading them as composition from memory with a controller. I have also tried a vanilla asset load to rule out issues with my implementation, and they are behaving the same. The issue appears both in the emulator and the actual phone. So it seems to me it is not caused by the way I implemented but by the Lottie package itself, or perhaps an issue with Lottie JSON that for some reason only affects Android.
Full example is below. Just paste this into main.dart and add dependency to yaml: lottie: ^1.2.1.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.dark,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Lottie Test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Lottie.network(
'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
),
],
),
),
);
}
}
Try adding frameRate: FrameRate.max like stated below.
Expanded(
child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json',
frameRate: FrameRate.max,
),
),
this will render the Lottie animation with the same frame rate of that of the app. In Lottie plugin it will render the json as per the frame rate mentioned in the json file. An animation encoded with a 25 FPS will only be painted 25 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds. Hence this framerate was introduced from Lottie 0.6.0
I use Lottie for Flutter on my applications and it works well also on emulator or on low-performance phones. The problem can be related to bad converted animations, or you can try to use Lottie.asset(yourjson) to avoid potential network fetch issues.
According to the official package documentation
For Flutter Web, run the app with: flutter run --web-renderer canvaskit
Works fine for me in the latest version: lottie: ^1.2.1
════════ Exception caught by image resource service ════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://cdn.sportmonks.com/images/soccer/leagues/5.png
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
When i try the demo URL https://picsum.photos/250?image=9 it is working but the url above is good so what can be the problem?
class ListRow extends StatelessWidget {
final String name;
final imageUrl;
const ListRow({Key key, this.name, this.imageUrl}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 18,
height: 18,
child: Image(
image: NetworkImage(
'https://cdn.sportmonks.com/images/soccer/leagues/5.png'),
),
),
SizedBox(width: 10),
Flexible(
child: new Text(
name,
style:
new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
],
);
}
}
So flutter web has upgraded default rendered(HTML) -> CanvasKit and it has better performance.
You are most likely getting this error because CORS(can check chrome network tab to be sure).
To solve it could:
Update cors settings server side: https://stackoverflow.com/a/66104543/4679965
Run app with old rendered:
flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build
Or display images with platform view:
import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class MyImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
String imageUrl = "image_url";
// https://github.com/flutter/flutter/issues/41563
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
imageUrl,
(int _) => ImageElement()..src = imageUrl,
);
return HtmlElementView(
viewType: imageUrl,
);
}
}
I get the same error, for a couple of weeks now, when trying to run an app from the master channel.
I got it working by forcing the web renderer to be HTML:
flutter run -d chrome --no-sound-null-safety --web-renderer=html
When you build your app for web you should:
flutter build web --no-sound-null-safety --web-renderer=html
By default the web renderer is auto, choosing the canvaskit web renderer on desktop browsers and html on mobile.
If you want to avoid this altogether you can stay on the beta or dev channels.
if it is working with another image then it should be a server-side error where the image is stored.
Could be an issue with the codec format. Try running the same code with another image url. If it is working, then the above error could be a technical glitch.
You could try this widget
https://pub.dev/packages/meet_network_image
You can just use this package https://pub.dev/packages/image_network
Using HTML renderer might break other things (like SVG rendering in my case)
Try not to define height, width for container and add fit:BoxFit.cover as a parameter of NetworkImage
it's all good on android but not good on iOS.
whenever i try to enter the videoPlayerScreen
error occurs
I tryed another project with same class code ,
it was fine.
but in this project doens't work.
Here's my code
...
class _VideoTestState extends State<VideoTest> {
final FijkPlayer player = FijkPlayer();
#override
void initState() {
super.initState();
player.setDataSource( // ✅ App dies in here
'http://baishan.oversketch.com/2019/11/05/d07f2f1440e51b9680f4bcfe63b0ab67.MP4',
autoPlay: true);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.green,
child: Center(
child: FijkView(
player: player,
),
),
),
);
}
}
in Android studio when I enter it , it dies immediately, Log( Lost connection to device. )
but in Xcode show log like this.
I assume its package problem.
not sure about it but only difference between another project and this one is
another project has few package ( actually minimum packages to play video )
this one has alot include firebase things.
I tried ,
flutter clean ,
rm Podfile.lock
pod install.
is there any clue to solve this problem??