close

Flutter TabBar avec Box Shadow : Guide d'implémentation

Pour appliquer une ombre de boîte à a TabBar in Flutter, vous pouvez l'envelopper dans a Container et utiliser la BoxDecoration propriété. Voici un exemple :

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return DefaultTabController(  
      length: 3,  
      child: Scaffold(  
        appBar: AppBar(  
          title: Text('TabBar with Shadow'),  
          bottom: TabBar(  
            tabs: [  
              Tab(text: 'Tab 1'),  
              Tab(text: 'Tab 2'),  
              Tab(text: 'Tab 3'),  
            ],  
         ),  
       ),  
        body: TabBarView(  
          children: [  
            Container(color: Colors.red),  
            Container(color: Colors.green),  
            Container(color: Colors.blue),  
          ],  
       ),  
     ),  
   );  
  }  
}

Si vous souhaitez ajouter un effet d'ombre au TabBar, vous pouvez envelopper le TabBar dans un Container et appliquer le BoxDecoration  :

Container(  
  decoration: BoxDecoration(  
    boxShadow: [  
      BoxShadow(  
        color: Colors.grey.withOpacity(0.5),  
        spreadRadius: 5,  
        blurRadius: 7,  
        offset: Offset(0, 3), // changes position of shadow  
     ),  
    ],  
 ),  
  child: TabBar(  
    tabs: [  
      Tab(text: 'Tab 1'),  
      Tab(text: 'Tab 2'),  
      Tab(text: 'Tab 3'),  
    ],  
 ),  
),

Dans cet exemple, le BoxShadow est utilisé pour créer un effet d'ombre pour le TabBar. Vous pouvez personnaliser la couleur, le rayon de propagation, le rayon de flou et le décalage pour obtenir l'apparence d'ombre souhaitée.

N'oubliez pas d'ajuster les propriétés de l'ombre en fonction de vos exigences de conception.

Veuillez noter que l'application d'une ombre peut ne pas fonctionner si vous AppBar utilisez déjà l'élévation. Dans de tels cas, vous devrez peut-être utiliser des widgets personnalisés ou ajuster la conception pour prendre en compte les deux effets.