close

Flutter Kutu Gölgeli TabBar: Uygulama Kılavuzu

TabBar a'ya kutu gölgesi uygulamak için Flutter, onu a'ya sarabilir Container ve BoxDecoration özelliğini kullanabilirsiniz. İşte bir örnek:

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

öğesine bir gölge efekti eklemek istiyorsanız, öğesini a içine TabBar sarabilir ve şunu uygulayabilirsiniz: 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'),  
    ],  
 ),  
),

Bu örnekte, BoxShadow. için bir gölge efekti oluşturmak için kullanılır TabBar. İstenilen gölge görünümünü elde etmek için rengi, yayılma yarıçapını, bulanıklık yarıçapını ve ofseti özelleştirebilirsiniz.

Gölge özelliklerini tasarım gereksinimlerinize uyacak şekilde ayarlamayı unutmayın.

Halihazırda yükseklik kullanıyorsanız gölge uygulamasının işe yaramayabileceğini lütfen unutmayın AppBar. Bu gibi durumlarda, özel widget'lar kullanmanız veya tasarımı her iki efekte de uyacak şekilde ayarlamanız gerekebilir.