close

ਵਿੱਚ ਚਿੱਤਰ ਅਤੇ ਮਲਟੀਮੀਡੀਆ ਨਾਲ ਕੰਮ ਕਰਨਾ Flutter

ਵਿੱਚ Flutter, ਤੁਹਾਡੇ ਕੋਲ ਚਿੱਤਰਾਂ ਅਤੇ ਮਲਟੀਮੀਡੀਆ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕਈ ਵਿਕਲਪ ਹਨ, ਜਿਸ ਵਿੱਚ ਨੈੱਟਵਰਕ ਤੋਂ ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ, ਚਿੱਤਰ ਦੇ ਆਕਾਰ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ, ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਦਿਖਾਉਣਾ, ਅਤੇ caching ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਸ਼ਾਮਲ ਹੈ। ਹੇਠਾਂ ਵੇਰਵੇ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਸੂਚੀ ਦਿੱਤੀ ਗਈ ਹੈ:

ਨੈੱਟਵਰਕ ਤੋਂ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ

ਨੈੱਟਵਰਕ ਤੋਂ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ Image.network() ਵਿਜੇਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਵਿਜੇਟ ਤੁਹਾਨੂੰ URL ਤੋਂ ਚਿੱਤਰਾਂ ਨੂੰ ਲੋਡ ਕਰਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਉਦਾਹਰਨ:

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 ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਜੇਟਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਚਿੱਤਰਾਂ ਅਤੇ ਮਲਟੀਮੀਡੀਆ ਨਾਲ ਕੰਮ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਇਹਨਾਂ ਵਿਜੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਕੇ, ਤੁਸੀਂ ਆਪਣੇ ਐਪ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋਏ ਲਚਕਦਾਰ ਤਰੀਕੇ ਨਾਲ ਚਿੱਤਰ, ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ।