TabBar in కు పెట్టె నీడను వర్తింపజేయడానికి Flutter, మీరు దానిని aలో చుట్టి 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 కోసం నీడ ప్రభావాన్ని సృష్టించడానికి the ఉపయోగించబడుతుంది TabBar. మీరు కోరుకున్న ఛాయ రూపాన్ని సాధించడానికి రంగు, స్ప్రెడ్ రేడియస్, బ్లర్ వ్యాసార్థం మరియు ఆఫ్సెట్ను అనుకూలీకరించవచ్చు.
మీ డిజైన్ అవసరాలకు సరిపోయేలా నీడ లక్షణాలను సర్దుబాటు చేయాలని గుర్తుంచుకోండి.
AppBar మీరు ఇప్పటికే ఎలివేషన్ని ఉపయోగిస్తుంటే, నీడను వర్తింపజేయడం పని చేయదని దయచేసి గమనించండి. అటువంటి సందర్భాలలో, మీరు కస్టమ్ విడ్జెట్లను ఉపయోగించాల్సి రావచ్చు లేదా రెండు ప్రభావాలకు అనుగుణంగా డిజైన్ను సర్దుబాటు చేయాలి.