close

Flutter Välilehtipalkki ruutuvarjolla: Käyttöönottoopas

TabBar Jos haluat lisätä varjon ruutuun Flutter, voit kääriä sen a:han Container ja käyttää BoxDecoration ominaisuutta. Tässä on esimerkki:

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

Jos haluat lisätä varjotehosteen TabBar, voit kääriä sen TabBar a:han Container ja käyttää 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'),  
    ],  
 ),  
),

Tässä esimerkissä BoxShadow käytetään luomaan varjotehoste TabBar. Voit mukauttaa väriä, levityssädettä, sumennuksen sädettä ja siirtymää saavuttaaksesi halutun varjon ulkonäön.

Muista säätää varjon ominaisuudet vastaamaan suunnitteluvaatimuksiasi.

Huomaa, että varjon lisääminen ei välttämättä toimi, jos käytät AppBar jo korkeutta. Tällaisissa tapauksissa saatat joutua käyttämään mukautettuja widgetejä tai säätämään suunnittelua molempien tehosteiden mukaiseksi.