Hello friends, As time passed we trying our best to find you the right content which you might need in your daily programming skills. In today’s tutorial we would learn about ImageStreamListener() function of flutter. This function is used to retrieve image dimensions like width and height. So now we know what size of our images is. So in this tutorial we would learn about Example of Get Remote HTTP Image Width Height in Flutter.
To make sure we’re getting the right dimensions width and height, I am sharing properties of this Image from my computer :-
Contents in this project Example of Get Remote HTTP Image Width Height in Flutter :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method, Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. Here we would call our child class ImageSize().
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: ImageSize()))); } } |
4. Creating our ImageSize extends StatefulWidget class. In this class we would make our main NetworkImageSize class with createState() class to enable mutable state management.
|
1 2 3 |
class ImageSize extends StatefulWidget { NetworkImageSize createState() => NetworkImageSize(); } |
5. Creating NetworkImageSize extends State<ImageSize> . This is our main class.
|
1 2 3 4 5 |
class NetworkImageSize extends State<ImageSize> { } |
6. Creating a String variable, In this variable we would store the HTTP remote image URL.
|
1 2 |
String imageURL = "https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg"; |
7. Creating a Size variable named as imageSize. It is used to store image width and height.
|
1 |
late Size imageSize = const Size(0.00, 0.00); |
8. Creating a function named as _getImageDimension(). In this function we would call the ImageStreamListener() function with image URL and then extract the image dimensions width and height and store into State.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
void _getImageDimension() { Image image = Image.network(imageURL); image.image.resolve(const ImageConfiguration()).addListener( ImageStreamListener( (ImageInfo image, bool synchronousCall) { var myImage = image.image; setState(() { imageSize = Size(myImage.width.toDouble(), myImage.height.toDouble()); }); }, ), ); } |
9. Creating Widget Build Area ->1 Image widget, 1 ElevatedButton widget and 2 Text widgets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Center( child: Column( children: <Widget>[ Image.network( imageURL, width: 300, height: 200, fit: BoxFit.contain, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: const EdgeInsets.all(7), textStyle: const TextStyle(fontSize: 20), ), child: const Text('Get Image Size'), onPressed: _getImageDimension, ), ), Text( imageSize != null ? 'Image Width : ${imageSize.width.toString()} px' : '', style: const TextStyle(fontSize: 24), ), Text( imageSize != null ? 'Image Height : ${imageSize.height.toString()} px' : '', style: const TextStyle(fontSize: 24), ), ], ), ))); } |
10. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: ImageSize()))); } } class ImageSize extends StatefulWidget { NetworkImageSize createState() => NetworkImageSize(); } class NetworkImageSize extends State<ImageSize> { String imageURL = "https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg"; late Size imageSize = const Size(0.00, 0.00); void _getImageDimension() { Image image = Image.network(imageURL); image.image.resolve(const ImageConfiguration()).addListener( ImageStreamListener( (ImageInfo image, bool synchronousCall) { var myImage = image.image; setState(() { imageSize = Size(myImage.width.toDouble(), myImage.height.toDouble()); }); }, ), ); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Center( child: Column( children: <Widget>[ Image.network( imageURL, width: 300, height: 200, fit: BoxFit.contain, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: const EdgeInsets.all(7), textStyle: const TextStyle(fontSize: 20), ), child: const Text('Get Image Size'), onPressed: _getImageDimension, ), ), Text( imageSize != null ? 'Image Width : ${imageSize.width.toString()} px' : '', style: const TextStyle(fontSize: 24), ), Text( imageSize != null ? 'Image Height : ${imageSize.height.toString()} px' : '', style: const TextStyle(fontSize: 24), ), ], ), ))); } } |
Screenshots :-
