close

Flutter TabBar tare da Akwatin Inuwa: Jagorar Aiwatarwa

Don amfani da inuwar akwatin zuwa a TabBar cikin Flutter, zaku iya nannade shi a cikin Container kuma amfani da BoxDecoration kayan. Ga misali:

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

Idan kuna son ƙara tasirin inuwa zuwa ga TabBar, zaku iya kunsa TabBar cikin a Container sannan kuyi amfani da 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'),  
    ],  
 ),  
),

A cikin wannan misali, BoxShadow ana amfani da shi don ƙirƙirar tasirin inuwa ga TabBar. Kuna iya keɓance launi, watsa radius, radius blur, da diyya don cimma siffar inuwar da ake so.

Ka tuna don daidaita kaddarorin inuwa don dacewa da buƙatun ƙirar ku.

Lura cewa yin amfani da inuwa ba zai yi aiki ba idan kun AppBar riga kuna amfani da tsayi. A irin waɗannan lokuta, ƙila ka buƙaci amfani da widgets na al'ada ko daidaita ƙira don ɗaukar tasirin duka biyun.