close

Flutter TabBar ერთად Box Shadow: განხორციელების გზამკვლევი

ყუთის ჩრდილის გამოსაყენებლად in-ზე TabBar, 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 უკვე იყენებთ სიმაღლეს. ასეთ შემთხვევებში, შეიძლება დაგჭირდეთ პერსონალური ვიჯეტების გამოყენება ან დიზაინის მორგება ორივე ეფექტისთვის.