Comment définir la couleur de fonds d'un écran dans Flutter ?
Le framework Flutter est écrit par la société Google. Il intègre donc les éléments nécessaires pour utiliser le material design, l'ensemble de règles de design créé et promu par la société. Par défaut, votre application utilisera les éléments de material design. Il est cependant possible de ne pas s'en servir pour créer votre application. Si vous souhaitez définir une couleur à votre fond d'écran, les deux approches sont possibles.
Si vous utilisez le material design, votre application va utiliser la classe "MaterialApp" comme classe principale lors de l'initialisation. Certains paramètres peuvent être définis pour l'ensemble des écrans de l'application. Ils sont regroupés avec le nom "scaffold". Dans l'initialisation de votre application, l'attribut "theme" permet de définir un thème par défaut, qui sera utilisé sur tous vos écrans. Pour ensuite définir une couleur de fond d'écran, utilisez la classe "scaffoldBackgroundColor".
MaterialApp( title: 'Mon application avec un fond blanc', theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFFFFFFF)), home: new MyHomePage(title: "Page d'accueil"), );
Si vous souhaitez ne pas utiliser les règles du material design, cela reste possible mais plus compliqué. Dans Flutter, un container doit prendre par défaut toute la place possible. Vous pouvez donc utiliser un simple container. Pour lui ajouter un fond d'écran, utilisez la propriété "decoration" du container et affectez un objet de la classe "BoxDecoration" avec votre couleur. Ce traitement est plus compliqué car il faudra le faire pour chaque écran de votre application. Cela convient donc mieux aux petites applications ou si vous ne souhaitez pas utiliser le material design.
import 'package:flutter/material.dart';
void main() {
runApp(new MonApp());
}
class MonApp extends StatelessWidget {
// Widget cœur de l'application
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color: Colors.white),
child: new Center(
child: new Text("Hello, World!"),
),
);
}
}