Astuces pour Flutter : Partie 2
Après avoir parcouru notre premier article d’Astuces pour Flutter : Partie 1, voici Astuces pour Flutter : Partie 2. Dans ce nouvel article, nous revenons avec d’autres éléments qui viennent compléter la finalisation d’une application mobile Android et iOS. Cette fois-ci, nous allons voir comment supprimer le bandeau debug qui est par défaut à la création d’une app Flutter. Nous allons vous montrer comment fixer notre application en mode portrait ou encore changer la couleur de la status bar.
Tous ces points rapides et simples à mettre en place donneront à votre solution mobile un meilleur aspect.
Mode debug
Par défaut dans Flutter, votre debugShowCheckedModeBanner est à true. Si vous souhaitez supprimer cette bannière debug apparaissant en haut à droite, rien de plus simple ! Il vous suffit juste de la définir à false dans votre classe MaterielApp. Si vous avez plusieurs MaterielApp dans votre projet, il faudra configurer à chaque fois votre bannière à false.
1 2 3 | return new MaterialApp( debugShowCheckedModeBanner: false, ); |
Mode portrait
Même si ce n’est pas conseillé de bloquer l’utilisation d’une application en mode portrait selon les guidlines de Google et Apple, on peut quand même en avoir besoin. Le cas échéant, il nous suffira d’ajouter l’import services.dart à notre classe main et de définir l’orientation dans la fonction SystemChrome.
1 2 3 4 5 6 7 8 9 10 | import 'package:flutter/services.dart'; void main() async { SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); } |
Statut bar
Vous pouvez modifier les couleurs qui sont mises en place par défaut dans Flutter. Pour changer la couleur de la statusBar ou le thème primaryColor et primaryColorDark (pour les développeurs Android), il suffit d’ajouter l’import de services.dart comme pour bloquer l’orientation du portrait.
Ajoutez votre ThemeData dans votre MaterialApp.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import 'package:flutter/services.dart'; void main() async { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith( statusBarColor: Color(0xFF2d4d5c) )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primaryColor: Color(0xFF2d4d5c), primaryColorDark: Color(0xFF2d4d5c), ), ); } } |
