close

Flutter TabBar med Box Shadow: Implementeringsguide

För att applicera en boxskugga på en TabBar in Flutter kan du slå in den i en Container och använda BoxDecoration egenskapen. Här är ett exempel:

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

Om du vill lägga till en skuggeffekt till TabBar, kan du linda TabBar in en Container och tillämpa 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'),  
    ],  
 ),  
),

I det här exemplet BoxShadow används för att skapa en skuggeffekt för TabBar. Du kan anpassa färg, spridningsradie, oskärpa radie och offset för att uppnå önskat skuggutseende.

Kom ihåg att justera skuggegenskaperna för att matcha dina designkrav.

Observera att applicering av en skugga kanske inte fungerar om du AppBar redan använder elevation. I sådana fall kan du behöva använda anpassade widgets eller justera designen för att passa båda effekterna.