میں امیجز اور ملٹی میڈیا کے ساتھ کام کرنا Flutter

میں Flutter ، آپ کے پاس تصاویر اور ملٹی میڈیا کے ساتھ کام کرنے کے لیے مختلف اختیارات ہیں، بشمول نیٹ ورک سے تصاویر کی نمائش، تصویر کے سائز کو حسب ضرورت بنانا، ویڈیوز اور آڈیو دکھانا، اور caching بہتر کارکردگی کے لیے بہتر بنانا۔ ذیل میں تفصیلات اور صفات کی فہرست ہے:

نیٹ ورک سے تصاویر کی نمائش

نیٹ ورک سے تصاویر دکھانے کے لیے، آپ Image.network() ویجیٹ استعمال کر سکتے ہیں۔ یہ ویجیٹ آپ کو یو آر ایل سے تصاویر لوڈ اور ڈسپلے کرنے کی اجازت دیتا ہے۔

مثال:

Image.network(  
  'https://example.com/image.jpg',  
  width: 200, // Set the width of the image  
  height: 100, // Set the height of the image  
  fit: BoxFit.cover, // Adjust how the image resizes to fit the widget size  
  loadingBuilder:(BuildContext context, Widget child, ImageChunkEvent loadingProgress) {  
    if(loadingProgress == null) {  
      return child; // Display the image when loading is complete  
    } else {  
      return Center(  
        child: CircularProgressIndicator(  
          value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes: null,  
       ),  
     ); // Display loading progress  
    }  
  },  
  errorBuilder:(BuildContext context, Object error, StackTrace stackTrace) {  
    return Text('Unable to load image'); // Display an error message when an error occurs  
  },  
)  

ایپ میں اثاثوں سے امیجز ڈسپلے کرنا

اگر آپ ایپ میں موجود اثاثوں سے تصاویر دکھانا چاہتے ہیں، جیسے assets فولڈر میں رکھی گئی تصاویر، تو آپ Image.asset() ویجیٹ استعمال کرتے ہیں۔

مثال:

Image.asset(  
  'assets/image.jpg',  
  width: 200,  
  height: 100,  
)  

ویڈیوز اور آڈیو ڈسپلے کرنا

میں ویڈیوز اور آڈیو ڈسپلے کرنے کے لیے Flutter ، آپ وجیٹس جیسے VideoPlayer اور استعمال کر سکتے ہیں AudioPlayer ۔ سب سے پہلے، آپ کو فائل میں مناسب پلگ ان شامل کرنے کی ضرورت ہے pubspec.yaml ۔

مثال:

// VideoPlayer- requires adding the video_player plugin  
VideoPlayerController _controller;  
_controller = VideoPlayerController.network('https://example.com/video.mp4');  
VideoPlayer(_controller);  
  
// AudioPlayer- requires adding the audioplayers plugin  
AudioPlayer _player;  
_player = AudioPlayer();  
_player.setUrl('https://example.com/audio.mp3');  
_player.play();  

امیج اور ملٹی میڈیا کو بہتر بنانا Caching

ایپ کی کارکردگی کو بہتر بنانے اور لوڈنگ کے وقت کو کم کرنے کے لیے، آپ caching تصاویر اور ملٹی میڈیا کے لیے لائبریریوں کا استعمال کر سکتے ہیں Flutter ۔ عام مثالیں cached_network_image نیٹ ورک امیجز اور cached_audio_player آڈیو کے لیے ہیں۔

استعمال کرنے کی مثال cached_network_image:

CachedNetworkImage(  
  imageUrl: 'https://example.com/image.jpg',  
  placeholder:(context, url) => CircularProgressIndicator(), // Display loading progress  
  errorWidget:(context, url, error) => Icon(Icons.error), // Display an error message when an error occurs  
)  

 

نتیجہ:

Flutter طاقتور ویجٹ فراہم کرتا ہے جو تصاویر اور ملٹی میڈیا کے ساتھ کام کرنا آسان بناتا ہے۔ ان ویجیٹس کو استعمال کرکے اور صفات کو حسب ضرورت بنا کر، آپ اپنی ایپ کی کارکردگی کو بہتر بناتے ہوئے لچکدار طریقے سے تصاویر، ویڈیوز اور آڈیو ڈسپلے کر سکتے ہیں۔