close

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 कृपया ध्यान दिनुहोस् कि यदि तपाईंले पहिले नै उचाइ प्रयोग गरिरहनुभएको छ भने छायाँ लागू गर्नाले काम नगर्न सक्छ । त्यस्ता अवस्थाहरूमा, तपाईंले अनुकूलन विजेटहरू प्रयोग गर्न वा दुवै प्रभावहरू समायोजन गर्न डिजाइन समायोजन गर्न आवश्यक पर्दछ।