close

Flutter TabBar with Box Shadow: Implementation Guide

Chcete-li použít stín rámečku na TabBar in Flutter, můžete jej zabalit do a Container a použít BoxDecoration vlastnost. Zde je příklad:

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

Pokud chcete přidat efekt stínu TabBar, můžete zabalit TabBar do Container a použít 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'),  
    ],  
 ),  
),

V tomto příkladu BoxShadow je použito k vytvoření stínového efektu pro TabBar. Můžete upravit barvu, poloměr rozprostření, poloměr rozostření a odsazení, abyste dosáhli požadovaného vzhledu stínu.

Nezapomeňte upravit vlastnosti stínu tak, aby odpovídaly vašim požadavkům na návrh.

Vezměte prosím na vědomí, že použití stínu nemusí fungovat, pokud AppBar již používáte nadmořskou výšku. V takových případech možná budete muset použít vlastní widgety nebo upravit design tak, aby vyhovoval oběma efektům.