Puna me imazhe dhe multimedia në Flutter

Në Flutter, ju keni opsione të ndryshme për të punuar me imazhe dhe multimedia, duke përfshirë shfaqjen e imazheve nga rrjeti, personalizimin e madhësive të imazheve, shfaqjen e videove dhe audios dhe optimizimin caching për performancë të përmirësuar. Më poshtë janë detajet dhe një listë e atributeve:

Shfaqja e imazheve nga rrjeti

Për të shfaqur imazhe nga rrjeti, mund të përdorni miniaplikacionin Image.network(). Ky miniaplikacion ju lejon të ngarkoni dhe shfaqni imazhe nga një URL.

Shembull:

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  
  },  
)  

Shfaqja e imazheve nga aktivet në aplikacion

Nëse dëshironi të shfaqni imazhe nga asetet në aplikacion, si p.sh. imazhet e vendosura në assets dosje, përdorni Image.asset() miniaplikacionin.

Shembull:

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

Shfaqja e videove dhe audios

Për të shfaqur video dhe audio në Flutter, mund të përdorni miniaplikacione si VideoPlayer dhe AudioPlayer. Së pari, duhet të shtoni shtojcat e duhura në pubspec.yaml skedar.

Shembull:

// 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();  

Optimizimi i imazhit dhe multimedias Caching

Për të optimizuar performancën e aplikacionit dhe për të zvogëluar kohën e ngarkimit, mund të përdorni caching bibliotekat për imazhe dhe multimedia në Flutter. Shembujt e zakonshëm janë cached_network_image për imazhet e rrjetit dhe cached_audio_player audio.

Shembull duke përdorur 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  
)  

 

konkluzioni:

Flutter ofron miniaplikacione të fuqishme që e bëjnë të lehtë punën me imazhe dhe multimedia. Duke përdorur këto miniaplikacione dhe duke personalizuar atributet, ju mund të shfaqni imazhe, video dhe audio në një mënyrë fleksibël duke optimizuar performancën e aplikacionit tuaj.