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

जर तुम्हाला छाया प्रभाव जोडायचा असेल तर, तुम्ही a मध्ये TabBar गुंडाळू शकता आणि लागू करू शकता: TabBar 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 कृपया लक्षात घ्या की तुम्ही आधीच एलिव्हेशन वापरत असल्यास सावली लागू करणे कदाचित काम करणार नाही. अशा परिस्थितीत, तुम्हाला सानुकूल विजेट्स वापरण्याची किंवा दोन्ही प्रभावांना सामावून घेण्यासाठी डिझाइन समायोजित करण्याची आवश्यकता असू शकते.