ফ্রন্ট-এন্ড ওয়েব ডেভেলপারদের জন্য ফ্লাটার-

 

ফ্রন্ট-এন্ড ওয়েব ডেভেলপারদের জন্য ফ্লাটার- পর্ব ০১

আপনি যদি ফ্রন্ট-এন্ড ডেভেলপার হয়ে থাকেন, ফ্লাটারে মুভ করা আপনার জন্য খুবই সহজ হবে। দেখাযাবে কিছু নতুন এবং কিছু পুরাতন কন্সেপ্ট শিখে একজন দক্ষ ফ্লাটার ডেভেলপার হয়ে উঠবেন।

CONCEPTS THAT TRANSFERRED OVER

এই বিভাগটি এমন জায়গাগুলি সম্পর্কে জানাবে যেখানে ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এবং ফ্লাটার সাদৃশ্যপূর্ণ। আপনার যদি ইতিমধ্যেই এমন দক্ষতা থাকে এবং যদি আপনি যদি ফ্লাটার শুরু করেন তবে এটি আপনার জন্য একটি এডভান্টেজ।

1. Implementing User Interfaces (UIs)

ফ্রন্ট-এন্ড ওয়েবে যেমন একটি UI বাস্তবায়ন করতে, আপনি HTML ইলিমেন্টগুলো ব্যবহার করেন এবং সেগুলিকে CSS দিয়ে স্টাইল করেন, তেমনি Flutter-এ UI প্রয়োগ করতে, আপনি উইজেট কম্পোজ করবেন এবং স্টাইল করবেন।

CSS এর মত, Dart-এ কালার ক্লাস "rgba" এবং "hex" এর সাথে কাজ করে। এছাড়াও CSS এর মত, Flutter স্পেস এবং সাইজের ইউনিটের জন্য পিক্সেল ব্যবহার করে।

Flutter-এ, আমাদের কাছে প্রায় সমস্ত CSS বৈশিষ্ট্য এবং তাদের মানগুলির জন্য ডার্ট ক্লাস এবং enums রয়েছে। উদাহরণ স্বরূপ:

BorderRadius

BoxShadow

FontWeight

Opacity

Padding

…......

ফ্লাটারে Column and Row উইজেটও আছে। এগুলি হল ডিসপ্লের জন্য ফ্লাটার সমতুল্য: CSS-এ flex.

To configure justify-content and align-items styles, you use MainAxisAlignment and CrossAxisAlignment properties. To adjust the flex-grow style, wrap the affected child(ren) widget(s) of the Column/Row, in an Expanded or Flexible.

উন্নত UI-এর জন্য, Flutter-এর CustomPaint শ্রেণী রয়েছে – এটি Canvas API ওয়েব ডেভেলপমেন্টের জন্য। CustomPaint আপনাকে আপনার ইচ্ছামতো যেকোনো UI ডিজাইন করতে একটা পেইন্টার দেয়।

**2. Developing For Multiple Screen Resolutions **

যেসব ওয়েবসাইটগুলি ব্রাউজারে চলে এবং মোবাইল অ্যাপগুলি ডিভাইসে চলে৷ যেমন, যেকোনো একটি প্ল্যাটফর্মের জন্য ডেভেলপ করার সময়, আপনাকে প্ল্যাটফর্মটি মাথায় রাখতে হবে। প্রতিটি প্ল্যাটফর্ম একই বৈশিষ্ট্য (camera, location, notifications, ইত্যাদি) বিভিন্ন উপায়ে প্রয়োগ করে।

একজন ওয়েব ডেভেলপার হিসেবে, আপনি আপনার ওয়েবসাইটের Responsiveness সম্পর্কে চিন্তা করেন। আপনার ওয়েবসাইটটি ছোট এবং বড় স্ক্রীনে কেমন দেখায় তা ডেভেলপ করতে আপনি মিডিয়া কোয়েরি ব্যবহার করেন।

মোবাইল ওয়েব ডেভেলপমেন্ট থেকে ফ্লটারে এসে, আপনার কাছে MediaQuery হেল্পার ক্লাস আছে। MediaQuery ক্লাস আপনাকে বর্তমান ডিভাইসের orientation (landscape or portrait) দেয়। এটি আপনাকে অন্যান্য ডিভাইসের তথ্যের মধ্যে বর্তমান ভিউপোর্টের আকার, ডিভাইস পিক্সেল রেশিও জানতে সাহায্য করে। একসাথে, এই ভ্যালুগুলো আপনাকে মোবাইল ডিভাইসের কনফিগারেশন সম্পর্কে ইনসাইটস দেয়। বিভিন্ন স্ক্রিনের আকারে আপনার মোবাইল অ্যাপটি কেমন দেখায় তা পরিবর্তন করতে আপনি সেগুলি ব্যবহার করতে পারেন।

**3. Working with Debuggers, Editors, and Command Line Tools **

ডেস্কটপ ব্রাউজারগুলিতে ডেভেলপমেন্ট সরঞ্জাম রয়েছে। এই সরঞ্জামগুলির মধ্যে একটি inspector, একটি console, একটি network monitor ইত্যাদি অন্তর্ভুক্ত রয়েছে। এই টুলগুলি ওয়েব ডেভেলপমেন্ট প্রক্রিয়া উন্নত করে। ফ্লাটারেরও নিজস্ব DevTools আছে। এটির widget inspector, debugger, network monitor সহ অন্যান্য ফিচারস রয়েছে।

IDE গুলোর সাপোর্টও এরকম। Visual Studio Codeওয়েব ডেভেলপমেন্টের জন্য সবচেয়ে জনপ্রিয় IDE গুলির মধ্যে একটি। VS Code এর অনেক ওয়েব-সম্পর্কিত অনেক এক্সটেনশন রয়েছে। ফ্লাটারও VS Code সাপোর্ট করে। তাই স্থানান্তর করার সময়, আপনাকে IDE পরিবর্তন করতে হবে না। VS Code এর জন্য ডার্ট এবং ফ্লাটার এক্সটেনশন রয়েছে। ফ্লাটার Android Studio এর সাথেও ভাল কাজ করে। Android Studio এবং VS Code উভয়ই ফ্লটার ডেভটুল সমর্থন করে। এই IDE ইন্টিগ্রেশনগুলি Flutter টুলিং সম্পূর্ণ করে।

বেশিরভাগ ফ্রন্ট-এন্ড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক তাদের কমান্ড-লাইন ইন্টারফেসের (CLI) সাথে থাকে। যেমন: Angular CLI, Create React App, Vue CLI ইত্যাদি। Flutter এছাড়াও একটি এক্সক্লুসিভ CLI এর সাথে আসে। Flutter CLI আপনাকে Angular projects তৈরি এবং develop এর অনুমতি দেয়। এতে ফ্লাটার Projectanalyzing এবং পরীক্ষা করার জন্য কমান্ড আছে।