user interface - How to display an image in flutter without changing its scale or aspect ratio

Question

i ma trying to display an image in my flutter app without changing its properties. Given that i have images where some have longer width than height and vice versa. i have tried not using height and width properties but it still gets to affect some images .

Here is my code

                      child: Column(
                        children: <Widget>[
                          Stack(
                              alignment: Alignment.bottomCenter,
                              children: <Widget>[
                                Image.network(
                                  widget.post.imageUrls[0],
                                  height: MediaQuery.of(context).size.height*0.3,
                                  fit: BoxFit.cover,
                                ),
                                Container(
                                  width: screenWidth(context)*0.2,
                                  padding: EdgeInsets.all(5),
                                  decoration: BoxDecoration(
                                    borderRadius:BorderRadius.circular(10),
                                    color:Color.fromRGBO(0, 0, 0, 0.4),
                                  ),
                                  child: CountDownTimer(
                                    secondsRemaining: secs,
                                    whenTimeExpires: () {
                                      setState(() {
                                        hasTimerStopped = true;
                                      });
                                    },
                                    countDownTimerStyle: TextStyle(
                                      color: Colors.redAccent,
                                      fontSize: 14.0,
                                    ),
                                  ),
                                ),
                              ]
                          ),

            ...other elements in my column below ...

What widget can i use to display these images safely.

Answer 1

If I understood you correctly, you want the image to be show as big as it is and keep also its scale?

If so then you can use the BoxFit.none which will keep the aspect ratio and size. You can read more here: https://api.flutter.dev/flutter/painting/BoxFit-class.html

But one thing bothers me, why dou you have set the height to be 30% of the screen but still ask to have the image not resized (reduced to 30% height of the screen)?