Don amfani da inuwar akwatin zuwa a TabBar
cikin Flutter, zaku iya nannade shi a cikin Container
kuma amfani da BoxDecoration
kayan. Ga misali:
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),
],
),
),
);
}
}
Idan kuna son ƙara tasirin inuwa zuwa ga TabBar
, zaku iya kunsa TabBar
cikin a Container
sannan kuyi amfani da 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'),
],
),
),
A cikin wannan misali, BoxShadow
ana amfani da shi don ƙirƙirar tasirin inuwa ga TabBar
. Kuna iya keɓance launi, watsa radius, radius blur, da diyya don cimma siffar inuwar da ake so.
Ka tuna don daidaita kaddarorin inuwa don dacewa da buƙatun ƙirar ku.
Lura cewa yin amfani da inuwa ba zai yi aiki ba idan kun AppBar
riga kuna amfani da tsayi. A irin waɗannan lokuta, ƙila ka buƙaci amfani da widgets na al'ada ko daidaita ƙira don ɗaukar tasirin duka biyun.