flutter image placeholder (FadeInImage) without setting fixed size?

Question

How can I use something like FadeInImage to setup and hold the layout of a page before images have downloaded? As expected, just using Image.network causes the page to jump around once the images load and become visible. I don't have set image sizes (i allow them to resize based on screen/etc) and want to avoid setting a fixed height. The images load and show fine using FadeInImage however the screen still jumps a lot.

  @override
  Widget build(BuildContext context) {
    return 
      Scaffold(
        appBar: AppBar(
          title: Text('Welcome!'),
        ),
        drawer: sideDrawer(),
        body: new SingleChildScrollView(
          padding: const EdgeInsets.all(8.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: [
              SizedBox(height: 28),
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(width: 64),
                  Flexible( // tried Expanded too
                    child: 
                        FadeInImage.memoryNetwork(
                          placeholder: kTransparentImage,
                          image: 'https://www.xyzserver.com/images/dummyimage.png',
                          fit: BoxFit.scaleDown,
                        ),
                  ),
                  SizedBox(width: 64),
                ],
              ),
              SizedBox(height: 28),
              Text("stuff below the image"),
            ],
          ),
        )
      );
}

When using "Expanded" the image row/area is very tall vertically (the text "stuff below the image" is at the bottom of the page so the page jumps up when the image loads. When using "Flexible" the image row/area is somewhat smaller and the page jumps down when the image loads.

In the image I'm playing around with now, it's a horizontal image that is larger than the available screen space, so it will get scaled down. I guess I was thinking that since flutter can calculate the max width of what's available to the expanded/flexible, it should be able to calculate the height, but as I write this I'm thinking that's impossible since it doesn't know the height/width ratio so it can't predict the height.

How can I set this up so that images can be resized and show correctly and the page doesn't jump around? I can't imagine using fixed height/width settings is the way to go. Maybe my approach to images is all wrong and I should always use a set height/width although that can be rather difficult when people are allowed to upload their own images/etc.

Thanks!

Answer 1

Check this one

    class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Uint8List? imageData;

  Future<Uint8List> dosometinhdd() async {
    return (await rootBundle.load('assets/images/a.png')).buffer.asUint8List();
  }

  @override
  void initState() {
    dosometinhdd().then((value) {
      setState(() {
        imageData = value;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Welcome!'),
        ),
        body: new SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height * 0.8,
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                imageData != null
                    ? Expanded(
                        child: FadeInImage.memoryNetwork(
                          placeholder: imageData!,
                          image:
                              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
                          fit: BoxFit.scaleDown,
                        ),
                      )
                    : Container(),
                Text("stuff below the image"),
              ],
            ),
          ),
        ));
  }