Flutter TabBar me Box Shadow: Udhëzues Implementimi

Për të aplikuar një hije kutie në një TabBar in Flutter, mund ta mbështillni atë në një Container dhe të përdorni BoxDecoration vetinë. Ja një shembull:

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

Nëse dëshironi të shtoni një efekt hije në TabBar, mund ta mbështillni atë TabBar në a Container dhe të aplikoni 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'),  
    ],  
 ),  
),  

Në këtë shembull, BoxShadow përdoret për të krijuar një efekt hije për TabBar. Mund të personalizoni ngjyrën, rrezen e përhapjes, rrezen e turbullimit dhe kompensimin për të arritur pamjen e dëshiruar të hijes.

Mos harroni të rregulloni vetitë e hijes që të përputhen me kërkesat tuaja të dizajnit.

Ju lutemi vini re se aplikimi i një hije mund të mos funksionojë nëse AppBar tashmë po përdorni lartësinë. Në raste të tilla, mund t'ju duhet të përdorni miniaplikacione të personalizuara ose të rregulloni dizajnin për të akomoduar të dy efektet.