Scaffold in flutter: হল ফ্লটারের একটি ক্লাস যা অনেকগুলি উইজেট সরবরাহ করে বা আমরা API বলতে পারি যেমন ড্রয়ার, স্ন্যাকবার, বটম নেভিগেশনবার, ফ্লোটিংঅ্যাকশনবাটন, অ্যাপবার ইত্যাদি। Scaffold পুরো ডিভাইসের স্ক্রীনকে দখল করবে।
Constructor of the Scaffold class:
const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior
= DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
})
Properties of Scaffold Class:
- appBar: এটি একটি অনুভূমিক বার প্রদর্শন করে যা প্রধানত স্ক্যাফোল্ডের শীর্ষে থাকে। অ্যাপবার উইজেট অ্যাপবার ব্যবহার করে যার নিজস্ব বৈশিষ্ট্য রয়েছে যেমন উচ্চতা, শিরোনাম, উজ্জ্বলতা ইত্যাদি।
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text('BnCodeing'),
),
- body: এটি স্ক্যাফোল্ডে প্রধান বা প্রাথমিক বিষয়বস্তু প্রদর্শন করবে। এটি অ্যাপবারের নীচে এবং ফ্লোটিং অ্যাকশন বোতামের নীচে রয়েছে। শরীরের ভিতরের উইজেটগুলি ডিফল্টরূপে বাম কোণে থাকে৷
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
),
body: Center(
child: Text("Welcome to BnCodeing!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton
- FloatingActionButton হল একটি Button যা ডিফল্টরূপে ডান নীচের কোণায় স্থাপন করা হয়। FloatingActionButton হল একটি আইকন বোতাম যা একটি নির্দিষ্ট স্থানে স্ক্রিনের বিষয়বস্তুর উপর ভাসতে থাকে।
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(title: Text('BnCodeing')),
body: Center(
child: Text("Welcome to BnCodeing!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: Icon(Icons.add),
onPressed: (){
// action on button press
}
);
}
drawer
- drawer: ড্রয়ার হল একটি স্লাইডার মেনু বা একটি প্যানেল যা স্ক্যাফোল্ডের পাশে প্রদর্শিত হয়। ড্রয়ার মেনু অ্যাক্সেস করার জন্য সংজ্ঞায়িত কাজ অনুসারে ব্যবহারকারীকে বাম থেকে ডানে বা ডান থেকে বামে সোয়াইপ করতে হবে।
অ্যাপবারে, ড্রয়ারের জন্য একটি উপযুক্ত আইকন একটি নির্দিষ্ট অবস্থানে স্বয়ংক্রিয়ভাবে সেট করা হয়। ড্রয়ার খোলার অঙ্গভঙ্গি স্বয়ংক্রিয়ভাবে সেট করা হয়। এটি স্ক্যাফোল্ড দ্বারা পরিচালিত হয়।
drawer: Drawer(
child: ListView(
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text(
'BnCodeing',
style: TextStyle(
color: Colors.green,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
],
),
),
ListTile(
title
: Text('Item 1'),
leading
: Icon(Icons.people), ),
ListTile(
title
: Text('Item 2'),
leading
: Icon(Icons.mail), ),
- bottomNavigationBar: নিচের নেভিগেশনবারটি স্ক্যাফোল্ডের নীচে একটি মেনুর মতো। আমরা বেশিরভাগ অ্যাপ্লিকেশনে এই নেভিগেশনবারটি দেখেছি। আমরা বারে একাধিক আইকন বা টেক্সট বা উভয়ই আইটেম হিসাবে যোগ করতে পারি।
bottomNavigationBar
: BottomNavigationBar(
currentIndex : 0,
fixedColor
: Colors.green,
items
: [
BottomNavigationBarItem(
title
: Text("Home"),
icon
: Icon(Icons.home), ),
BottomNavigationBarItem(
title
: Text("Search"),
icon
: Icon(Icons.search), ),
BottomNavigationBarItem(
title
: Text("Profile"),
icon
: Icon(Icons.account_circle), ),
],
onTap
: (int indexOfItem){
}),
Scaffold in flutter
- backgroundColor: used to set the color of the whole Scaffold widget.
- floatingActionButtonAnimator: used to provide animation to move floatingActionButton.
- primary: to tell whether the Scaffold will be displayed or not.
- drawerScrimColor: used to define the color for the primary content while a drawer is open.
- bottomSheet: This property takes in a widget (final) as the object to display it at the bottom of the screen.
- drawerDragStartBehaviour: This property holds DragStartBehavior enum as the object to determine the drag behaviour of the drawer.
- drawerEdgeDragWidth: This determines the area under which a swipe or a drag will result in the opening of the drawer. And it takes in a double as the object.
- drawerEnableOpenGesture: This property holds in a boolean value as the object to determine the drag gesture will open the drawer or not, by default it is set to true.
- endDrawer: The endDrawer property takes in a widget as the parameter. It is similar to the Drawer, except the fact it opens in the opposite direction.
- endDrawerEnableOpenGesture: Again this property takes in a boolean value as the object to determine whether the drag gesture will open the endDrawer or not.
- extendBody: The extendBody property takes in a boolean as the object. By default, this property is always false but it must not be null.
- If it is set to true in the presence of a bottomNavigationBar or persistentFooterButtons, then the height of these is added to the body and they are shifted beneath the body.
- extendBodyBehindAppBar: This property also takes in a boolean as the object. By default, this property is always false but it must not be null. If it is set to true the appBar instead of being on the body is extended above it and its height is added to the body. This property is used when the color of the appBar is not fully opaque.
- floatingActionButtonLocation: This property is responsible for the location of the floatingActionBotton.
- persistentFooterButton: This property takes in a list of widgets. Which are usually buttons that are displayed underneath the scaffold.
- resizeToAvoidBottomInsets: This property takes in a boolean value as the object. If set to true then the floating widgets on the scaffold resize themselves to avoid getting in the way of the on-screen keyboard.
Scaffold in flutter
