Now I am using Navigator.pop(context); to exit current page, but I want to dispose current page after pop(because current page has some gif animation and may cause other problem, it will rendering in backend will make the GPU busy all the time, and make the device heat quickly), what should I do to make it work like this? I am tried to
Navigator.popAndPushNamed(context, "..");
but I do not know how to specify the second paramter becuase it has many entry with current page, I have to specify the relative path.By the way, I am using flutter html to load the gif animation, the animation did not control by myself but the flutter html component. This is part of the code:
if (item.content != "")
Html(
data: item.content,
style: {
"body": Style(
fontSize: FontSize(19.0),
),
},
customImageRenders: defaultImageRenders,
onLinkTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
CommonUtils.launchUrl(url);
}),
Related
want to launch URL in ELEVATEDBUTTON. there are too many button for launch too many URL how can I do this in flutter??
I can't understand how can I do this. can anyone solve this problem
you can map the list while rendering on ui.
...urlList
.map(
(e) => ElevatedButton(
onPressed: () {
launchUrl(Uri.parse(e)); //use .tryParse
},
child: Text("$e"),
),
)
.toList(),
You may create a model class with label and string url.
Currently when I tap on an image, it should open a web view as the image object has an associated url. I am using the url_launcher library for Flutter, and I have implemented the code as follows:
onTap: () async {
final url = image.url;
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: true,
enableJavaScript: true,
);
}
},
My understanding is that this launches a WebView, which is an in-app browser rather than taking the user out of the app and into a separate browser app. This works fine, but the page loads much slower and Javascript elements do not work properly (e.g. animated text on websites). On the other hand,
onTap: () async {
final url = banners[index].url;
if (await canLaunch(url)) {
await launch(
url
);
}
},
works much better as it is faster and everything loads in properly, but it opens an external browser, which is not what I want.
Another issue is that I would like to add a Done button on the top left corner of the WebView to completely exit the WebView and return to where I was in the app. I only have a back button on the bottom left (on the Android emulator), that lets me go to the previous page I was at in the browser.
How do I customise the layout of the WebView, if I do not have any access to it? The url_launcher seems to handle the WebView creation internally, so I'm wondering how can I gain access from the above code to add that button?
Thank you!
If you use the native webview in this manner then you can't customise the ui. But instead, since you are displaying image you can use image.network from flutter.
Image.network(imgURL,fit: BoxFit.fill,
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,
),
);
},
),
Or, you can also use official webview plugin from flutter team to create in app web view.
webview_flutter: ^2.3.1
In this approaches if you add a back button in ui you can the use Navigator.pop(context); on onPressed property in button to go back
Now my article detail page have some gif animation, I am load the article using flutter html component like this:
if (item.content != "")
Html(
data: item.content,
style: {
"body": Style(
fontSize: FontSize(19.0),
),
},
customImageRenders: defaultImageRenders,
onLinkTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
CommonUtils.launchUrl(url);
}),
when the article content has some gif animation, the article detail page will render all the time because the page will show the gif animation. but when I exists this article detail page using:
void _onHorizontalDragEnd(DragEndDetails details) {
if (_initialSwipeOffset != null) {
final offsetDifference = _initialSwipeOffset!.dx - _finalSwipeOffset!.dx;
if (offsetDifference < 0) {
if (PaintingBinding.instance != null && PaintingBinding.instance!.imageCache != null) {
PaintingBinding.instance!.imageCache!.clear();
PaintingBinding.instance!.imageCache!.clearLiveImages();
}
Navigator.pop(context);
}
}
}
then the app all page will rendering all the time with no stop. How do I know? I turn on the real device debugging switch.
checkerboardOffscreenLayers: showDebugInfo,
checkerboardRasterCacheImages: showDebugInfo,
showPerformanceOverlay: showDebugInfo,
I am confusing why the rendering will always keeping even through I exits the article detail page? is it possible to make the article detail page dispose completely? what should I do to stop the animation after exists article detail page?
I know maybe I should dispose the article detail page after pop, but I did not know how to do.
If you want to completely remove this page from stack try other Navigator methods like pushReplacment or pushAndRemoveUntil.
I use the fluter_html package. Is there a way, to make the text Copyable? The Html Widget is in a CustomScrollView with a SliverList. I want to copy the text without the html stuff. As an example, I want to copy "Hello, copy me" and not "Hello <br> copy me"
Edit: I want to copy on Android and MacOs Desktop
This is my Html Widget.
Html(
data: singleNews.text,
style: {
"body": Style(
fontSize: FontSize(
(MediaQuery.of(context).size.width) / 70),
)
},
onLinkTap: (url, _, __, ___) async {
if (await canLaunch(url!)) {
await launch(url);
_log.i("Opening $url...");
} else {
_log.e('Could not launch $url');
}
},
),
From looking at the docs it looks like the package has a 'Selectable' option, so just change your widget from Html to SelectableHtml, which will give you the desired function, you will be able to select the text and a tooltip will appear with the 'Copy' option.
https://pub.dev/documentation/flutter_html/latest/flutter_html/SelectableHtml-class.html
Important: I have searched a lot but did not find any solution that I can understand.
I am using photo manager to show images and then after selecting an image I want to navigate to the next screen and show that image there (later I want to upload that image to firebase storage).
So the type of File I am getting from the photo_manager package is Future < File > and I am receiving File from the second screen.
How can I convert future to file?
First Screen:
IconButton(
icon: const Icon(Icons.arrow_forward, color: primaryColor),
onPressed: () {
Get.to(PostDetail(
imgFile:
_controller.mediaList[_controller.selectedImageIndex].file,
));
},
),
Second Screen:
On the second screen, I'm getting File.
final File imgFile;
const PostDetail({this.imgFile});
Source Code:: Add Post Page
So as described in photo_manager docs, you need to get the file from the AssetEntity list before moving to the next page.
So on button pressed to go to next page get the file and then pass it to the Page
Below code should work:
IconButton(
icon: const Icon(Icons.arrow_forward, color: primaryColor),
onPressed: () async {
File file = await _controller.mediaList[_controller.selectedImageIndex].file; // image file
Get.to(PostDetail(
imgFile: file,
));
},
),
File and Future<File> are 2 different things. the File is a variable that its value is in the present. but Future<File> as its name suggests, its value exist in the Future which means its value takes some time to reach you.
for example, if you send a request to a webserver, the response takes some time to reach you. so, in that case the response is a Future.
in your case the image you are trying to get is supplied in a way that it takes time. to get the File from Future<File> you have to wait. So before sending the file to this Screen, use an async and wait to turn the Future<File> to File. (i dont know how you get the file)
for example,
File myFile = await getFileorWhaterver();
Your _controller.mediaList[_controller.selectedImageIndex].file is a Future<File> means that the value of the File is promised to be returned sometimes in the future. This usually because you are doing a network call asynchronously to get the data from API.
In order to convert it to File, you need to await till the moment that value is available. However you cannot do an async/await within the UI, that's why Flutter provide a widget named FutureBuilder to wait for a certain Future value, then let you use that value in the UI.
In your case, you can do this:
FutureBuilder(
future: _controller.mediaList[_controller.selectedImageIndex].file,
builder: (context, snapshot) {
return IconButton(
icon: const Icon(Icons.arrow_forward, color: primaryColor),
onPressed: () {
if (snapshot.hasData)
Get.to(PostDetail(imgFile: snapshot.data));
},
);
})