სურათებთან და მულტიმედიასთან მუშაობა Flutter

In 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 გთავაზობთ ძლიერ ვიჯეტებს, რომლებიც აადვილებს სურათებთან და მულტიმედიასთან მუშაობას. ამ ვიჯეტების გამოყენებით და ატრიბუტების მორგებით, შეგიძლიათ აჩვენოთ სურათები, ვიდეო და აუდიო მოქნილად, თქვენი აპის მუშაობის ოპტიმიზაციისას.