Flutter باکس شیڈو کے ساتھ ٹیب بار: نفاذ گائیڈ

TabBar a in پر باکس شیڈو لگانے کے لیے Flutter ، آپ اسے a میں لپیٹ کر پراپرٹی Container استعمال کر سکتے ہیں۔ BoxDecoration یہاں ایک مثال ہے:

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

اگر آپ شیڈو ایفیکٹ میں شامل کرنا چاہتے ہیں تو TabBar آپ TabBar a کو لپیٹ Container کر لاگو کر سکتے ہیں 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'),  
    ],  
 ),  
),  

اس مثال میں، BoxShadow کے لیے شیڈو اثر بنانے کے لیے استعمال کیا جاتا ہے TabBar ۔ آپ مطلوبہ سایہ کی ظاہری شکل حاصل کرنے کے لیے رنگ، پھیلاؤ رداس، دھندلا رداس، اور آفسیٹ کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

اپنے ڈیزائن کی ضروریات کو پورا کرنے کے لیے سائے کی خصوصیات کو ایڈجسٹ کرنا یاد رکھیں۔

AppBar براہ کرم نوٹ کریں کہ اگر آپ پہلے سے ہی بلندی کا استعمال کر رہے ہیں تو سایہ لگانے سے کام نہیں ہو سکتا ۔ ایسے معاملات میں، آپ کو حسب ضرورت ویجٹ استعمال کرنے یا دونوں اثرات کو ایڈجسٹ کرنے کے لیے ڈیزائن کو ایڈجسٹ کرنے کی ضرورت پڑ سکتی ہے۔