close

Flutter બોક્સ શેડો સાથે ટેબબાર: અમલીકરણ માર્ગદર્શિકા

TabBar 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. આવા કિસ્સાઓમાં, તમારે કસ્ટમ વિજેટ્સનો ઉપયોગ કરવાની અથવા બંને અસરોને સમાવવા માટે ડિઝાઇનને સમાયોજિત કરવાની જરૂર પડી શકે છે.