Media dans Flutter
Pour donner de l’intérêt à votre application mobile iOS et Android, vous pouvez ajouter un media dans Flutter. Par média, nous comprenons les images, les vidéos et les fichiers audio. Pratique et simple d’utilisation, nous allons voir comment afficher des ressources stockées dans l’app ou par URL depuis un serveur distant.
Comme pour la plupart des fonctionnalités à créer dans Flutter, nous allons utiliser des widgets déjà disponibles. Concernant les médias images, ils sont compris dans le SDK. En revanche, pour les fichiers audio et vidéo, nous allons devoir importer des packages tiers.
Image dans Flutter
Nous commençons par les images dans Flutter. Rien de bien compliqué ! Si vous voulez utiliser une image interne à votre application mobile, vous devez ajouter votre fichier .jpeg ou .png dans un dossier asset. Ensuite, dans votre fichier pubspec.yaml, vous devez les déclarer, presque de la même façon que l’import d’un package.
1 2 3 | # To add assets to your application, add an assets section, like this: assets: - images/ic_hmwk.png |
Une fois votre image déclarée, elle devrait être automatiquement visible si vous l’appelez dans votre fichier main.dart
1 2 3 4 5 6 | child: new IconButton( icon: new Image.asset('images/ic_hmwk.png'), onPressed: () { _launchUrlHmwk(); } ) |
Maintenant, si l’on souhaite ajouter une image depuis internet, il nous faudra utiliser Image.network à la place de Image.asset. Partant de là, vous verrez s’afficher votre image URL dans Flutter.
1 2 3 | body: Image.network( 'https://homework.family/wp-content/uploads/2019/02/logo-hmwk-production-application-blanc.png', ), |
Vidéo player dans flutter
Pour la lecture de vidéos dans Flutter, nous utiliserons le package video_player: ^0.7.2
Une fois votre package ajouté, n’oubliez pas de l’importer dans votre main.dart.
1 | import 'package:video_player/video_player.dart'; |
Il ne vous reste plus qu’à afficher votre vidéo dans votre widget. Dans le cas où vous utiliseriez un lien URL, j’ai pour ma part rencontré quelques problèmes. En effet, seuls les liens https se lisent dans cette configuration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | class _MyFragment extends State { VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.network('https://homework.family/wp-content/uploads/2017/10/hmwk.-showreel-2017.mp4',)..initialize().then((_) { setState(() { _controller.play(); }); }); } @override void dispose() { super.dispose(); _controller.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( body: Center( child: _controller.value.initialized ? AspectRatio (aspectRatio: _controller.value.aspectRatio, child: new Container( decoration: BoxDecoration(color: Colors.black), child: VideoPlayer(_controller), ) ) : Container( child: new CircularProgressIndicator(), ), ), ); } } |
Audio player dans flutter
Passons maintenant au lecteur audio dans Flutter. Cette fois-ci, nous allons importer le package fluttery_audio, toujours de la même façon.
1 2 3 | fluttery_audio: ^0.0.3 import 'package:fluttery_audio/fluttery_audio.dart'; |
Une fois le package importé, vous pouvez utiliser le plugin dans votre fichier main.dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | static const streamUri = ''; AudioPlayer audioPlayer; @override void initState() { super.initState(); audioPlayer = FlutteryAudio.audioPlayer(); } void playerPause() { audioPlayer.stop(); } void playerPlay() { audioPlayer.loadMedia(Uri.parse(streamUri)); audioPlayer.addListener( onAudioReady: () { audioPlayer.play(); }, ); } |
