close

Flutter TabBar with Box Shadow: Οδηγός υλοποίησης

Για να εφαρμόσετε μια σκιά πλαισίου σε ένα TabBar in Flutter, μπορείτε να το τυλίξετε σε ένα 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 σε ένα 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 ήδη ανύψωση. Σε τέτοιες περιπτώσεις, ίσως χρειαστεί να χρησιμοποιήσετε προσαρμοσμένα γραφικά στοιχεία ή να προσαρμόσετε τη σχεδίαση για να προσαρμόσετε και τα δύο εφέ.