Drawer Widget in Flutter

Drawer Widget in Flutter: ড্রয়ার উইজেটটি একটি অতিরিক্ত সাব-রাউটার হিসাবে ব্যবহৃত হয়। যা একই অ্যাপ্লিকেশনে বিভিন্ন অপশন নিয়ে গঠিত। এটি Scaffold উইজেট এর প্রান্ত থেকে বের হয় মিনু লিস্ট নিয়ে। একটি ড্রয়ার উইজেটের অনেক গুলি child অপশন থাকে, সাধারণত লিস্টভিউতে থাকে এবং প্রাথমিকভাবে, শুধুমাত্র ড্রয়ারহেডার UI-তে উপস্থিত থাকে যা ট্যাপ করা হলে মিনু অপশন নিয়ে প্রসারিত হয়।

Constructors:

Syntax:
Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel}) 

Properties:

Child: tree এই উইজেটের নিচের উইজেটগুলো।

hashCode: এই বস্তুর জন্য হ্যাশ কোড।

Key: কিভাবে একটি উইজেট tree অন্য উইজেট প্রতিস্থাপন করে তা নিয়ন্ত্রণ করে।

runtimeType: অবজেক্টের রানটাইম ধরনের একটি উপস্থাপনা।

elevation: z-কোঅর্ডিনেট যেখানে এই ড্রয়ারটিকে এর প্যারেন্টের তুলনায় স্থাপন করতে হবে।

semanticLabel: অ্যাক্সেসিবিলিটি ফ্রেমওয়ার্ক দ্বারা ব্যবহৃত সংলাপের শব্দার্থিক লেবেল

Implementation

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterialLocalizations(context));
  String? label = semanticLabel;
  switch (Theme.of(context).platform) {
    case TargetPlatform.iOS:
    case TargetPlatform.macOS:
      break;
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.linux:
    case TargetPlatform.windows:
      label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel;
  }
  return Semantics(
    scopesRoute: true,
    namesRoute: true,
    explicitChildNodes: true,
    label: label,
    child: ConstrainedBox(
      constraints: const BoxConstraints.expand(width: _kWidth),
      child: Material(
        elevation: elevation,
        child: child,
      ),
    ),
  );
}

Example Drawer Widget in Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
static const String _title = 'Drawer Example';

@override
Widget build(BuildContext context) {
	return MaterialApp(
	title: _title,
	home: MyStatefulWidget(),
	);
}
}

class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);

@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
	Text(
	'Index 0: Home',
	style: optionStyle,
	),
	Text(
	'Index 1: Business',
	style: optionStyle,
	),
	Text(
	'Index 2: School',
	style: optionStyle,
	),
];

void _onItemTapped(int index) {
	setState(() {
	_selectedIndex = index;
	});
}

@override
Widget build(BuildContext context) {
return Scaffold(
	appBar: AppBar(
		title: const Text('BnCodeing'),
		backgroundColor: Colors.green,
	),
	drawer: Drawer(
		child: ListView(
		padding: EdgeInsets.zero,
		children: const <Widget>[
			DrawerHeader(
			decoration: BoxDecoration(
				color: Colors.green,
			),
			child: Text(
				'Drawer Header',
				style: TextStyle(
				color: Colors.white,
				fontSize: 24,
				),
			),
			),
			ListTile(
			leading: Icon(Icons.message),
			title: Text('Messages'),
			),
			ListTile(
			leading: Icon(Icons.account_circle),
			title: Text('Profile'),
			),
			ListTile(
			leading: Icon(Icons.settings),
			title: Text('Settings'),
			),
		],
		),
	),
	);
}
}

প্রথমে, মূল অ্যাপটিকে স্টেটলেস উইজেট হিসেবে আরম্ভ করুন।
দ্বিতীয়টি আপনার ইচ্ছামতো মূল উইজেট ডিজাইন করুন।
স্ক্যাফোল্ড উইজেট দিয়ে অ্যাপবার তৈরি করুন।
এখন স্ক্যাফোল্ড উইজেটের বডির ভিতরে ড্রয়ার উইজেটটি ব্যবহার করুন যা অ্যাপবারের একটি child।


What is drawer in scaffold?

মেটেরিয়াল ডিজাইন ব্যবহার করা মোবাইল অ্যাপে নেভিগেশনের জন্য দুটি প্রাথমিক বিকল্প রয়েছে। এই নেভিগেশনগুলি হল ট্যাব এবং ড্রয়ার। একটি ড্রয়ার ট্যাবগুলির জন্য একটি বিকল্প বিকল্প কারণ কখনও কখনও মোবাইল অ্যাপগুলিতে ট্যাবগুলিকে সমর্থন করার জন্য পর্যাপ্ত জায়গা থাকে না৷ একটি ড্রয়ার একটি অদৃশ্য পার্শ্ব পর্দা.

Flutter Topic

MaterialApp class in Flutter

Scaffold in flutter

Flutter Widgets

Hello World Flutter

Create Flutter Project

Flutter Architecture

Leave a Reply