AppBar Widget in Flutter: AppBar সাধারণত অ্যাপের শীর্ষস্থানীয় উপাদান (বা কখনও কখনও সবচেয়ে নীচের অংশ), এতে টুলবার এবং কিছু অন্যান্য সাধারণ অ্যাকশন বোতাম থাকে। যেহেতু একটি Flutter অ্যাপ্লিকেশনের সমস্ত উপাদান একটি উইজেট বা উইজেটগুলির সংমিশ্রণ।
Constructor of AppBar class:
AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)
Key Properties of Appbar Widget:
actions: অ্যাপবার একটি সারি হলে শিরোনামের পরে দেখানোর জন্য এই বৈশিষ্ট্যটি একটি প্যারামিটার হিসাবে উইজেটগুলির একটি তালিকায় নিয়ে যায়।
title: অ্যাপবারে প্রদর্শিত হওয়ার জন্য এই বৈশিষ্ট্যটি সাধারণত একটি প্যারামিটার হিসাবে প্রধান উইজেটে লাগে।
backgroundColor: অ্যাপবারের ব্যাকগ্রাউন্ডে রং যোগ করতে এই প্রপার্টি ব্যবহার করা হয়।
elevation: এই সম্পত্তিটি z-কোঅর্ডিনেট সেট করতে ব্যবহৃত হয় যেখানে এই অ্যাপ বারটি তার পিতামাতার সাথে সম্পর্কিত।
shape: এই বৈশিষ্ট্যটি অ্যাপবারকে আকার দিতে এবং এর ছায়া পরিচালনা করতে ব্যবহৃত হয়।
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('BnCodeing'),
), //AppBar
body: const Center(
child: Text(
'BnCodeing',
style: TextStyle(fontSize: 24),
), //Text
), // center
), //Scaffold
debugShowCheckedModeBanner: false, //Removing Debug Banner
)); //MaterialApp
}
Explanation:
First, we have imported the material.dart file as the AppBar widget utilizes it, we will also do the same in the following two examples. Then we have our main function calling runApp.
At top, we have MaterialApp widget followed by Scaffold. The MaterialApp widget provided Style to AppBar and the Scaffold widget by default places the AppBar widget at the top of the screen.
import "package:flutter/material.dart";
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("BnCodeing"),
titleSpacing: 00.0,
centerTitle: true,
toolbarHeight: 60.2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(360)),
elevation: 0.00,
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: const Center(
child: Text(
'BnCodeing',
style: TextStyle(fontSize: 24),
), //Text
), //Center
), //Scaffold
debugShowCheckedModeBanner: false, //Removing Debug Banner
)); //MaterialApp
}
AppBar Widget in Flutter:
ফ্লটারে অ্যাপবার উইজেট কি?
এর চিত্র ফলাফল AppBar হল ফ্লটারে একটি ম্যাটেরিয়াল উইজেট যা প্রায় সব ধরনের অ্যাপ্লিকেশনে সবচেয়ে বেশি ব্যবহৃত হয়। Appbar টুলবার প্রদর্শন করবে যা আমরা প্রতিটি অ্যাপ্লিকেশনে দেখতে পাই। এটি স্ক্রিনের শিরোনাম, পিছনের বোতাম (‘<-‘) / বন্ধ বোতাম (‘x’) এবং অনুসন্ধানের মতো ক্রিয়াকলাপগুলির মতো বেশ কয়েকটি উইজেটও প্রদর্শন করে।
