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