Question 361283 in Flutter Question posted in
The official Flutter documentation can be found here.

Can't display very high images using the flutter image widget

I have a comic reading app built using Flutter, this app requires to display sometimes a very high quality images with a high ratio. when displaying these images, the flutter image widget and every other widget i used minimize the quality of the picture. I tried using a lot of packages but all of them are based on the image widget. The only thing that worked was using a WebView. which isn’t a very good solution for my case. I google this for more than a month, all solutions sugges trying FilterQuality.Medium, which is good if the image was not a very big image. Images below shows:

1- Displaying the image in a browser:

2- Displaying the image in image using FilterQuality.medium:

3- Displaying the image in image using FilterQuality.none:

EDIT:

for example the shown image dimension is 720×14266.

I’m trying to loaded from the internet and show it into a scroll view filling the device width without loosing the image quality.

Here’s an example url of the image showed above:
https://onma.top/uploads/manga/they_say_i_was_born_kingsdaughter/chapters/166/01.jpg

Tags:

2

Answers


  1. 0

    Brother, how are these images being called? Are you using NetworkImage or AssetImage? 

    If you are using NetworkImage, then there is nothing I can do because the image is divided into packages and then on display they are combined, which will lose some quality. If you are using AssetImage, then there will be no loss, but the max resolution will be set according to the device output capability. 

    If a device is 1080p, then the output  image will be 1080p.

    Login or Signup to reply.
  2. 0

    Try using ResizeImage widget. You can set it in the initstate and use that in build method like the following

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ResizeImage? img;

  @override
  void initState() {
    super.initState();
    img = ResizeImage(
        NetworkImage(
            'https://onma.top/uploads/manga/they_say_i_was_born_kingsdaughter/chapters/166/01.jpg'),
        width: 500,
        allowUpscaling: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: SingleChildScrollView(child: Image(image: img!)));
  }
}

    preview

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search