close

Flutter 상자 그림자가 있는 TabBar: 구현 가이드

TabBar in 에 상자 그림자를 적용하려면 이를 a 로 감싸고 속성을 사용할 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),  
          ],  
       ),  
     ),  
   );  
  }  
}

에 그림자 효과를 추가하려면 을 a 에 래핑 하고 다음을 적용하면 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. 이러한 경우에는 사용자 정의 위젯을 사용하거나 두 효과를 모두 수용하도록 디자인을 조정해야 할 수도 있습니다.