close

Darbas su vaizdais ir multimedija Flutter

Turite Flutter įvairių parinkčių dirbti su vaizdais ir daugialypės terpės, įskaitant vaizdų iš tinklo rodymą, vaizdo dydžių tinkinimą, vaizdo įrašų ir garso rodymą bei optimizavimą, caching kad pagerintumėte veikimą. Toliau pateikiama išsami informacija ir atributų sąrašas:

Vaizdų iš tinklo rodymas

Norėdami rodyti vaizdus iš tinklo, galite naudoti Image.network() valdiklį. Šis valdiklis leidžia įkelti ir rodyti vaizdus iš URL.

Pavyzdys:

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

Vaizdų iš išteklių rodymas programoje

Jei norite rodyti vaizdus iš programos išteklių, pvz., į aplanką įdėtus vaizdus assets, ​​naudokite Image.asset() valdiklį.

Pavyzdys:

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

Vaizdo įrašų ir garso įrašų rodymas

Norėdami rodyti vaizdo įrašus ir garsą Flutter, galite naudoti tokius valdiklius kaip VideoPlayer ir AudioPlayer. Pirmiausia prie failo turite pridėti atitinkamus papildinius pubspec.yaml.

Pavyzdys:

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

Vaizdo ir daugialypės terpės optimizavimas Caching

Norėdami optimizuoti programos našumą ir sutrumpinti įkėlimo laiką, galite naudoti caching bibliotekas vaizdams ir daugialypės terpės failams Flutter. Įprasti pavyzdžiai yra cached_network_image tinklo vaizdai ir cached_audio_player garsas.

Pavyzdys naudojant 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  
)

 

Išvada:

Flutter pateikia galingus valdiklius, kurie palengvina darbą su vaizdais ir daugialypės terpės. Naudodami šiuos valdiklius ir tinkindami atributus galite lanksčiai rodyti vaizdus, ​​vaizdo įrašus ir garsą optimizuodami programos našumą.