close

Flutter बॉक्स शैडो के साथ टैबबार: कार्यान्वयन गाइड

TabBar a में बॉक्स छाया लागू करने के लिए 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 कृपया ध्यान दें कि यदि आप पहले से ही एलिवेशन का उपयोग कर रहे हैं तो छाया लगाना काम नहीं करेगा । ऐसे मामलों में, आपको दोनों प्रभावों को समायोजित करने के लिए कस्टम विजेट का उपयोग करने या डिज़ाइन को समायोजित करने की आवश्यकता हो सकती है।