close

Flutter பெட்டி நிழலுடன் TabBar: செயல்படுத்தல் வழிகாட்டி

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

நீங்கள் ஒரு நிழல் விளைவை சேர்க்க விரும்பினால், நீங்கள் 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. இதுபோன்ற சந்தர்ப்பங்களில், நீங்கள் தனிப்பயன் விட்ஜெட்களைப் பயன்படுத்த வேண்டும் அல்லது இரண்டு விளைவுகளுக்கும் இடமளிக்கும் வகையில் வடிவமைப்பைச் சரிசெய்ய வேண்டும்.