TabBar ਇੱਕ ਵਿੱਚ ਇੱਕ ਬਾਕਸ ਸ਼ੈਡੋ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ 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 ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਜੇਕਰ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਉਚਾਈ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਸ਼ੈਡੋ ਲਾਗੂ ਕਰਨਾ ਕੰਮ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ । ਅਜਿਹੇ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਕਸਟਮ ਵਿਜੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ ਜਾਂ ਦੋਵਾਂ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

