close

Flutter TabBar yenye Kivuli cha Sanduku: Mwongozo wa Utekelezaji

Ili kutumia kivuli cha kisanduku a TabBar in Flutter, unaweza kuifunga kwa a Container na kutumia BoxDecoration mali. Hapa kuna mfano:

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

Ikiwa unataka kuongeza athari ya kivuli kwenye TabBar, unaweza kuifunga TabBar a Container na kutumia 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'),  
    ],  
 ),  
),

Katika mfano huu, BoxShadow hutumika kuunda athari ya kivuli kwa TabBar. Unaweza kubinafsisha rangi, kueneza radius, radius ya ukungu, na kurekebisha ili kufikia mwonekano wa kivuli unaohitajika.

Kumbuka kurekebisha sifa za kivuli ili kuendana na mahitaji yako ya muundo.

Tafadhali kumbuka kuwa kutumia kivuli kunaweza kusifanye kazi ikiwa AppBar tayari unatumia mwinuko. Katika hali kama hizi, unaweza kuhitaji kutumia wijeti maalum au kurekebisha muundo ili kushughulikia athari zote mbili.