close

Työskentely kuvien ja multimedian kanssa Flutter

Ohjelmassa Flutter sinulla on useita vaihtoehtoja kuvien ja multimedian käsittelyyn, mukaan lukien kuvien näyttäminen verkosta, kuvakokojen mukauttaminen, videoiden ja äänen näyttäminen sekä optimointi caching suorituskyvyn parantamiseksi. Alla on yksityiskohdat ja luettelo attribuuteista:

Kuvien näyttäminen verkosta

Voit näyttää kuvia verkosta käyttämällä widgetiä Image.network(). Tämän widgetin avulla voit ladata ja näyttää kuvia URL-osoitteesta.

Esimerkki:

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

Kuvien näyttäminen sovelluksen resursseista

Jos haluat näyttää kuvia sovelluksen resursseista, kuten kansioon sijoitetuista kuvista assets, käytä Image.asset() widgetiä.

Esimerkki:

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

Videoiden ja äänen näyttäminen

Voit näyttää videoita ja ääntä sovelluksessa Flutter käyttämällä widgetejä, kuten VideoPlayer ja AudioPlayer. Ensin sinun on lisättävä tiedostoon sopivat laajennukset pubspec.yaml.

Esimerkki:

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

Kuvan ja multimedian optimointi Caching

Voit optimoida sovelluksen suorituskyvyn ja lyhentää latausaikaa käyttämällä caching kuvien ja multimedian kirjastoja Flutter. Yleisiä esimerkkejä ovat cached_network_image verkkokuvat ja cached_audio_player ääni.

Esimerkki käyttäen 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  
)

 

Johtopäätös:

Flutter tarjoaa tehokkaita widgetejä, jotka helpottavat kuvien ja multimedian käsittelyä. Käyttämällä näitä widgetejä ja mukauttamalla attribuutteja voit näyttää kuvia, videoita ja ääntä joustavasti samalla kun optimoit sovelluksesi suorituskyvyn.