Suppression de l'ombre portée d'une AppBar Scaffold dans Flutter ?

Question

Y a-t-il un moyen de supprimer l'ombre portée sous la barre d'application (classe AppBar) lors de l'utilisation d'un widget Scaffold dans Flutter ?

Answer 1

En examinant le constructeur de AppBar, il y a une propriété elevation qui peut être utilisée pour définir la hauteur de la barre d'application et donc la quantité d'ombre projetée. En mettant cela à zéro, l'ombre est supprimée :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mon Titre d'Application'),
        elevation: 0,
      ),
      body: const Center(
        child: Text('Bonjour le Monde'),
      ),
    );
  }

Answer 2

J'ai essayé quelque chose qui pourrait vous aider

AppBar(
backgroundColor: Colors.transparent,
bottomOpacity: 0.0,
elevation: 0.0,
),

Vérifiez ceci

Answer 3

Si vous souhaitez supprimer l'ombre de toutes les barres d'applications sans répéter le code, il vous suffit d'ajouter une propriété AppBarTheme avec elevation: 0 à votre thème d'application (ThemeData), à l'intérieur de votre widget MaterialApp:

// Ce code doit être situé à l'intérieur de votre classe "MyApp", ou équivalent (dans main.dart par défaut)
return MaterialApp(
  // Thème de l'application:
  theme: ThemeData(
    // ••• AJOUTEZ CECI: Thème de la barre d'application: •••
    appBarTheme: AppBarTheme(
      elevation: 0, // Cela supprime l'ombre de toutes les barres d'application.
    )
  ),
);

Answer 4

Pour supprimer l'ombre du déroulement de la barre d'applications, définissez un constructeur AppBar elevation: 0.0

Les arguments primaires, toolbarOpacity, bottomOpacity et automaticallyImplyLeading ne doivent pas être nuls. De plus, si l'élévation est spécifiée, elle doit être supérieure ou égale à zéro.

Si la couleur d'arrière-plan, élévation, shadowColor, brightness, iconTheme, actionsIconTheme, textTheme ou centerTitle sont nuls, alors les valeurs de AppBarTheme seront utilisées. Si la propriété correspondante de AppBarTheme est nulle, alors la valeur par défaut spécifiée dans la documentation de la propriété sera utilisée.

appBar: AppBar(
   title: Text('Titre de l'application'),
   elevation: 0.0,
   bottomOpacity: 0.0,
),

Pour en savoir plus : Constructeur AppBar

Answer 5

Il semble que les versions récentes de Flutter (3.3/3.7+) ont introduit un nouveau paramètre appelé scrolledUnderElevation :

AppBar(
  backgroundColor: Colors.transparent,
  bottomOpacity: 0.0,
  elevation: 0.0,
  // Nouveau paramètre:
  scrolledUnderElevation: 0,
);