Flutter TabBar sa sjenom okvira: Vodič za implementaciju

Da biste primijenili sjenu okvira na TabBar in Flutter, možete ga omotati u Container i koristiti BoxDecoration svojstvo. Evo primjera:

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

Ako želite dodati efekt sjene na TabBar, možete zamotati TabBar u Container i primijeniti 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'),  
    ],  
 ),  
),  

U ovom primjeru, BoxShadow koristi se za stvaranje efekta sjene za TabBar. Možete prilagoditi boju, radijus širenja, radijus zamućenja i pomak kako biste postigli željeni izgled sjene.

Ne zaboravite prilagoditi svojstva sjene kako bi odgovarala vašim zahtjevima dizajna.

Imajte na umu da primjena sjene možda neće funkcionirati ako AppBar već koristite elevaciju. U takvim slučajevima, možda ćete morati koristiti prilagođene widgete ili prilagoditi dizajn kako bi se prilagodili oba učinka.