close

Yin aiki tare da Hotuna da Multimedia a ciki Flutter

A Flutter, kuna da zaɓuɓɓuka daban-daban don yin aiki tare da hotuna da multimedia, gami da nuna hotuna daga hanyar sadarwa, tsara girman hoto, nuna bidiyo da sauti, da haɓaka aiki caching don ingantacciyar aiki. A ƙasa akwai cikakkun bayanai da jerin halaye:

Nuna Hotuna daga Cibiyar sadarwa

Don nuna hotuna daga cibiyar sadarwa, zaka iya amfani da Image.network() widget din. Wannan widget din yana ba ku damar lodawa da nuna hotuna daga URL.

Misali:

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

Nuna Hotuna daga Kayayyaki a cikin App

Idan kana son nuna hotuna daga kadarori a cikin app, kamar hotunan da aka sanya a cikin assets babban fayil, kuna amfani da Image.asset() widget din.

Misali:

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

Nuna Bidiyo da Sauti

Don nuna bidiyo da sauti a cikin Flutter, zaku iya amfani da widgets kamar VideoPlayer da AudioPlayer. Da farko, kuna buƙatar ƙara abubuwan da suka dace a cikin pubspec.yaml fayil ɗin.

Misali:

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

Inganta Hoto da Multimedia Caching

Don inganta aikin app da rage lokacin lodi, zaku iya amfani da caching dakunan karatu don hotuna da multimedia a cikin Flutter. Misalai gama-gari cached_network_image don hotunan cibiyar sadarwa ne da cached_audio_player na sauti.

Misali ta amfani da 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  
)

 

Ƙarshe:

Flutter yana ba da widgets masu ƙarfi waɗanda ke sauƙaƙa aiki tare da hotuna da multimedia. Ta amfani da waɗannan widget din da keɓance sifofi, zaku iya nuna hotuna, bidiyo, da sauti cikin sassauƙan hanya yayin inganta aikin app ɗin ku.