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 शक्तिशाली विजेटहरू प्रदान गर्दछ जसले छविहरू र मल्टिमिडियासँग काम गर्न सजिलो बनाउँदछ। यी विजेटहरू प्रयोग गरेर र विशेषताहरू अनुकूलन गरेर, तपाईंले आफ्नो एपको कार्यसम्पादनलाई अप्टिमाइज गर्दा तस्बिरहरू, भिडियोहरू र अडियोहरूलाई लचिलो रूपमा प्रदर्शन गर्न सक्नुहुन्छ।