Flutter Tabbalk met Box Shadow: implementatiehandleiding

Om een ​​doosschaduw toe te passen op a TabBar in Flutter, kunt u deze in a wikkelen Container en de BoxDecoration eigenschap gebruiken. Hier is een voorbeeld:

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),  
          ],  
       ),  
     ),  
   );  
  }  
}  

Als je een schaduweffect wilt toevoegen aan de TabBar, kun je de TabBar in een wikkelen Container en het volgende toepassen 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'),  
    ],  
 ),  
),  

In dit voorbeeld BoxShadow wordt de gebruikt om een ​​schaduweffect te creëren voor de TabBar. U kunt de kleur, de spreidingsradius, de vervagingsradius en de verschuiving aanpassen om het gewenste schaduweffect te bereiken.

Vergeet niet om de schaduweigenschappen aan te passen aan uw ontwerpvereisten.

Houd er rekening mee dat het toepassen van een schaduw mogelijk niet werkt als u AppBar al hoogte gebruikt. In dergelijke gevallen moet u mogelijk aangepaste widgets gebruiken of het ontwerp aanpassen om aan beide effecten tegemoet te komen.