close

Flutter বক্স শ্যাডো সহ ট্যাববার: বাস্তবায়ন গাইড

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 এর জন্য একটি ছায়া প্রভাব তৈরি করতে ব্যবহৃত হয় TabBar । আপনি পছন্দসই ছায়ার উপস্থিতি অর্জন করতে রঙ, ব্যাসার্ধ ছড়িয়ে, অস্পষ্ট ব্যাসার্ধ এবং অফসেট কাস্টমাইজ করতে পারেন।

আপনার নকশা প্রয়োজনীয়তা মেলে ছায়া বৈশিষ্ট্য সমন্বয় মনে রাখবেন.

AppBar অনুগ্রহ করে মনে রাখবেন যে যদি আপনি ইতিমধ্যে উচ্চতা ব্যবহার করেন তবে ছায়া প্রয়োগ করা কাজ নাও করতে পারে । এই ধরনের ক্ষেত্রে, আপনাকে কাস্টম উইজেটগুলি ব্যবহার করতে হবে বা উভয় প্রভাবকে মিটমাট করার জন্য ডিজাইন সামঞ্জস্য করতে হবে।