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 படங்கள் மற்றும் மல்டிமீடியாவுடன் வேலை செய்வதை எளிதாக்கும் சக்திவாய்ந்த விட்ஜெட்களை வழங்குகிறது. இந்த விட்ஜெட்களைப் பயன்படுத்துவதன் மூலமும், பண்புக்கூறுகளைத் தனிப்பயனாக்குவதன் மூலமும், உங்கள் பயன்பாட்டின் செயல்திறனை மேம்படுத்தும் போது, ​​நீங்கள் படங்கள், வீடியோக்கள் மற்றும் ஆடியோவை நெகிழ்வான முறையில் காட்டலாம்.