Flutter, c’est quoi ?
Aujourd’hui, nous allons parler de l’intégration d’un media dans Flutter. Mais avant toute chose, qu’est-ce que Flutter ?
Flutter est un framework open-source développé par Google. Il permet de créer des applications mobiles, web et desktop avec un seul code source. Grâce à son langage Dart, Flutter offre rapidité et performance. De plus, il propose une large bibliothèque de widgets pour concevoir des interfaces modernes et réactives. En conséquence, les développeurs gagnent du temps et réduisent les coûts de production. Autre atout, Flutter permet un rendu natif sur iOS et Android. Ainsi, il garantit une expérience utilisateur fluide et homogène. Aujourd’hui, Flutter s’impose comme une solution incontournable pour le développement multiplateforme.
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. En effet, 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. De plus, 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é ! En effet, 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.
2
3
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
2
3
4
5
6
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.
2
3
'https://homework.family/wp-content/uploads/2019/02/logo-hmwk-production-application-blanc.png',
),
Vidéo player dans Flutter
Ensuite, 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.
Enfin, il ne vous reste plus qu’à afficher votre vidéo dans votre widget. De plus, si vous utilisez un lien URL, vous risquez quelques problèmes. En effet, seuls les liens https se lisent dans cette configuration.
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
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.
2
3
import 'package:fluttery_audio/fluttery_audio.dart';
Une fois le package importé, vous pouvez utiliser le plugin dans votre fichier main.dart
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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();
},
);
}
Nous vous invitons à lire notre article sur des astuces sur Flutter.