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

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 এবং পরীক্ষা করার জন্য কমান্ড আছে।

Concepts That Were New

এই সেকশনটি ফ্লাটার সম্পর্কে নির্দিষ্ট ধারণা সম্পর্কে আপনাকে জানতে সাহায্য করবে। এখান থেকে জানতে পারবেন ফ্লাটারে প্রবেশ করার সময় আপনার কী কী মনে রাখা উচিত।

1. How To Handle Scrolling

ওয়েবের জন্য বিকাশ করার সময়, ডিফল্ট স্ক্রোলিং বিহ্যাভিয়ার ওয়েব ব্রাউজার দ্বারা পরিচালিত হয়। তবুও, আপনি CSS (ওভারফ্লো ব্যবহার করে) দিয়ে স্ক্রলিং কাস্টমাইজ করতে পারবেন।

ফ্লাটারে এমনটা হয় না। উইজেট গ্রুপগুলি ডিফল্টরূপে স্ক্রোল করে না। যখন আপনি বুঝতে পারবেন যে উইজেট গ্রুপগুলি উপচে পড়তে পারে, আপনাকে সক্রিয়ভাবে স্ক্রলিং কনফিগার করতে হবে। যেমন: ListView, SingleChildScrollView, CustomScrollView ইত্যাদি।

এই স্ক্রলযোগ্য উইজেটগুলি আপনাকে স্ক্রলিং এর উপর দুর্দান্ত নিয়ন্ত্রণ দেয়। CustomScrollView-এর সাহায্যে, আপনি অ্যাপ্লিকেশনের মধ্যে জটিল স্ক্রল প্রক্রিয়া কনফিগার করতে পারেন। 

Flutter এর দিকে, ScrollViews ব্যবহার করা অনিবার্য। স্ক্রলিং পরিচালনা করার জন্য Android এবং iOS- এ আছে ScrollView এবং UIScrollView.

2. Setting Up Your Development Environment

সবচেয়ে সহজ ওয়েবসাইট তৈরি করতে, আপনি একটি .html এক্সটেনশন দিয়ে একটি ফাইল তৈরি করতে পারেন এবং এটি একটি ব্রাউজারে খুলতে পারেন। ফ্লাটার এত সহজ নয়। Flutter ব্যবহার করার জন্য, আপনাকে Flutter SDK ইনস্টল করতে হবে এবং একটি টেস্ট ডিভাইসের জন্য Flutter কনফিগার করতে হবে। তাই আপনি যদি Android এর জন্য Flutter কোড করতে চান তাহলে আপনাকে Android SDK সেট আপ করতে হবে। আপনাকে কমপক্ষে একটি Android ডিভাইস (একটি Android এমুলেটর বা একটি ফিজিক্যাল ডিভাইস) কনফিগার করতে হবে।

অ্যাপল ডিভাইসের (iOS এবং macOS) ক্ষেত্রে এটি একই। একটি ম্যাকে ফ্লাটার ইনস্টল করার পরে, আরও সামনে যাওয়ার আগে আপনাকে এখনও Xcode সেট আপ করতে হবে। আইওএস-এ ফ্লাটার পরীক্ষা করার জন্য আপনার অন্তত একটি iOS সিমুলেটর বা একটি আইফোনের প্রয়োজন হবে। Flutter for desktop ও একটি যথেষ্ট সেটআপ। উইন্ডোজে, আপনাকে Visual Studio (VS Code নয়) সহ উইন্ডোজ ডেভেলপমেন্ট SDK সেট আপ করতে হবে। লিনাক্সে, আপনি আরও প্যাকেজ ইনস্টল করবেন।

অতিরিক্ত সেটআপ ছাড়াই, Flutter ব্রাউজারে কাজ করে। ফলস্বরূপ, আপনি টার্গেট ডিভাইসগুলির জন্য অতিরিক্ত সেটআপ বাদ দিতে পারেন। বেশিরভাগ ক্ষেত্রে দেখা যাবে, আপনি মোবাইল অ্যাপ বিকাশের জন্য ফ্লাটার ব্যবহার করবেন। 

3. Packaging and Deployment

মোবাইল অ্যাপ্লিকেশন ডেপ্লয়ের তুলনায় ওয়েবসাইট ডেপ্লয় করা সস্তা এবং সহজ। 

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

বর্তমানে, অনেক প্ল্যাটফর্ম বিনামূল্যে হোস্টিং অফার করে।

আপনি যদি একটি ডকুমেন্টেশন ওয়েবসাইট তৈরি করেন এবং আপনি যখন ব্র্যান্ডিং নিয়ে চিন্তিত নন তখন আপনি এগুলি ব্যবহার করতে পারেন। 

মোবাইল অ্যাপ্লিকেশানগুলির সাথে ফ্লাটারের জগতে, আপনি সাধারণত বেশিরভাগ ক্ষেত্রে আপনার অ্যাপটি দুটি জায়গায় ডেপ্লয় করতে পারেন। 

• App Store (for iOS devices)
• Google Play (for Android devices)

আপনাকে এই প্ল্যাটফর্মগুলির প্রতিটিতে একটি ডেভেলপমেন্ট অ্যাকাউন্ট তৈরী করতে হবে। একটি ডেভেলপার অ্যাকাউন্ট নিবন্ধন করার জন্য একটি ফি এবং পরিচয় যাচাইকরণ প্রয়োজন।

অ্যাপ স্টোরের জন্য, আপনাকে অ্যাপল ডেভেলপার প্রোগ্রামের জন্য রেজিস্টার করতে হবে। আপনাকে $99 এর বার্ষিক মেম্বারশিপ বজায় রাখতে হবে। Google Play-এর জন্য, আপনাকে অ্যাকাউন্টের জন্য এককালীন $25 পেমেন্ট করতে হবে।

প্রতিটি প্লাটফর্মে এ রিভিউ সিস্টেম আছে। 

এছাড়াও মনে রাখবেন যে ব্যবহারকারীরা সহজে অ্যাপ আপডেটগুলি পান না। ব্যবহারকারীদের আবার ইনস্টল করা অ্যাপ্লিকেশন আপডেট করতে হবে। এটি ওয়েবের বিপরীত; যেখানে প্রত্যেকে একটি ওয়েবসাইটের সর্বশেষ ডেপ্লয় করা সংস্করণ দেখতে পায়। এরজন্য আপনাকে অটোমেটিক আপডেট সিস্টেমে মনোযোগী হতে হবে।

ফ্লাটার সম্পর্কিত আরো কিছু কথা 

ফ্লাটার হল ডেস্কটপ, মোবাইল বা ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি ক্রস-প্ল্যাটফর্ম টুল। ফ্লাটার অ্যাপগুলি পিক্সেল-পারফেক্ট। ফ্লাটার টার্গেট প্ল্যাটফর্ম নির্বিশেষে প্রতিটি অ্যাপে একই UI পেইন্ট করে। কারণ প্রতিটি ফ্লাটার অ্যাপে ফ্লাটার ইঞ্জিন থাকে। এই ইঞ্জিনটি Flutter UI কোড রেন্ডার করে। ফ্লাটার প্রতিটি ডিভাইসের জন্য একটি ক্যানভাস প্রদান করে এবং আপনাকে আপনার পছন্দ মতো ডিজাইন করতে দেয়। এর ইঞ্জিন events এবং interactions পরিচালনা করতে টার্গেট প্ল্যাটফর্মের সাথে যোগাযোগ করে।

ফ্লাটার একটি দক্ষ প্লাটফর্ম। এটির উচ্চ-কর্মক্ষমতা স্তর আছে কারণ এটি ডার্ট দিয়ে তৈরি এবং এটি ডার্টের বৈশিষ্ট্যগুলিকে কাজে লাগায়।

এই অনেক সুবিধার সাথে, ফ্লাটার অনেক অ্যাপ্লিকেশন ডেভেলপারের কাছে একটি ভাল পছন্দ। ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশনগুলি তৈরি এবং রক্ষণাবেক্ষণের জন্য অর্থ এবং সময় সাশ্রয় করে। যাইহোক, কিছু ক্ষেত্রে ফ্লাটার (বা ক্রস-প্ল্যাটফর্ম সলিউশন) একটি সর্বোত্তম পছন্দ নাও হতে পারে।

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

এছাড়াও, content-heavy ওয়েবসাইটের জন্য ফ্লাটার ব্যবহার করবেন না।

উপসংহার

এটি ছিল ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট থেকে শুরু করে Flutter-এর সাথে কাজ করার দক্ষতার একটি পর্যালোচনা। সেই সাথে আমরা অ্যাপ ডেভেলপমেন্টের ধারণা নিয়েও আলোচনা করেছি।

ওয়েব ডেভেলপারদের জন্য ফ্লাটার সহজ; কারণ তারা উভয়ই UI ইমপ্লিমেন্টেশনের সাথে জড়িত। আপনি যদি Flutter শুরু করেন, আপনি দেখতে পাবেন যে এটি আপনাকে একটি ভাল ডেভেলপার হবার দিক নির্দেশনা দিবে। 

ফ্লাটার একবার চেষ্টা করে দেখুন! মোবাইল অ্যাপ তৈরি করতে এটি ব্যবহার করুন এবং অবশ্যই, আপনি যা তৈরি করেন তা শোকেস করুন।

চিয়ার্স!

আপনি যেহেতু ফ্লাটার শেখার সিদ্ধান্ত নিয়েছেন আমি বিশ্বাস করি এটি একটি ভাল সিদ্ধান্ত। আপনার যাত্রা বাধা পূর্ণ হতে পারে কিন্তু হাল ছাড়া যাবেনা। 

আপনি যে প্রথম বাধার সম্মুখীন হচ্ছেন তা হল কিভাবে আপনার অ্যাপ ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করবেন, আসুন শুরু করা যাক।

docs.flutter.dev খুলুন এবং আপনার অপারেটিং সিস্টেম নির্বাচন করুন। আমি এখানে ফ্লাটার ইনস্টল করার জন্য সাধারণ স্টেপগুলো শিখিয়ে দিব। ডকুমেন্টেশন খুব স্পষ্ট এবং আমি আপনার সাধারণ সমস্যার সমাধান করার চেষ্টা করব। 

#1 Android Studio ডাউনলোড এবং ইনস্টল করুন

কোড লেখার জন্য আপনার একটি IDE প্রয়োজন হবে আপনি অন্য IDE ও বেছে নিতে পারেন কিন্তু গুগল Android Studio সুপারিশ করে এবং আমরা এটি ইনস্টল করব।

Android Studio ডাউনলোড করতে developer.android.com এ যান।

ইনস্টলারটি বেশ সহজ। শর্তাবলী পড়া, প্রয়োজনীয় অনুমতি দেওয়া এসব শেষ করে ইন্সটল করে নিন। 

Android Studio কে এর স্মুদ কার্যকারিতার জন্য সর্বশেষ SDK এবং কিছু অন্যান্য ফাইল ডাউনলোড করার অনুমতি দিন।

#2 flutter SDK ডাউনলোড করুন

উইন্ডোজ এবং ম্যাক ব্যবহারকারীদের জন্য আপনি জিপ ফাইলটি ডাউনলোড করতে পারেন বা গিটহাব থেকে স্থিতিশীল ভার্সনটি ক্লোন করতে পারেন।

লিনাক্স ব্যবহারকারীরা স্ন্যাপ ব্যবহার করতে পারেন।

#3 Add the path

পরবর্তী ধাপ হল গ্লোবাল ভেরিয়েবলে একটি flutter/bin path যোগ করা যাতে আপনি ফ্লাটার cmd globally ব্যবহার করতে পারেন।

Windows:

স্টার্ট মেনু খুলুন এবং ফলাফল থেকে env টাইপ করুন আপনার অ্যাকাউন্টের জন্য Edit environment variables for your account সিলেক্ট করুন।

Mac:

ফাইলটিকে কাঙ্খিত স্থানে এক্সট্রাক্ট করুন।

উদাহরণ:

$ cd ~/geekAid $ unzip ~/Downloads/flutter_macos_3.3.6-stable.zip

আপনার path এ ফ্লাটার যোগ করুন, ইনস্টল লোকেশনে টার্মিনাল খুলুন এবং এই cmd পেস্ট করুন।

$ export PATH="$PATH:pwd/flutter/bin"

Linux:

$ https://docs.flutter.dev/get-started/install/macos#update-your-path

আপনি যদি ফ্লাটার ইনস্টল করতে স্ন্যাপ ব্যবহার করে থাকেন তাগলে তো হলই। আপনি ফ্লাটার পাথ চেক করতে নিচে দেওয়া cmd ব্যবহার করতে পারেন।

আপনি অস্থায়ীভাবে টার্মিনালে ফ্লাটার পাথ যোগ করতে পারেন, কিন্তু আমি শুধু এগিয়ে যাই এবং পরে এটি স্থায়ীভাবে যোগ করি।

#4 Run flutter doctor

ফ্লাটার ইন্সটলেশন সঠিকভাবে সম্পন্ন হয়েছে কিনা এবং কোন সমস্যা নেই তা পরীক্ষা করার জন্য টার্মিনাল খুলুন এবং cmd লিখুন “flutter doctor” এবং এন্টার চাপুন।

$ flutter doctor

গ্রিন ফ্ল্যাগ দিয়ে দিলে এগিয়ে যান। 

কিন্তু এটা আপনাদের অনেকের ক্ষেত্রেই হবে না। এখানে আমি এখানে সবচেয়ে সাধারণ বিষয় নিয়ে আলোচনা করছি।

• Flutter SDK not found in the specified location

আপনি এটি Android Studio থেকে ইনস্টল করতে পারেন।

Menu > Tools > SDK Manager > Android SDK > SDK Tools (tab)

এখান থেকে missing dependency খুঁজুন এবং এটি ইনস্টল করুন।

• Flutter run error: You have not accepted the license agreements

লাইসেন্স গ্রহণ করতে টার্মিনাল খুলুন এবং cmd চালান। 

$ flutter doctor --android-licensed

এখন, ত্রুটিটি সমাধান করার পরে আরও সমস্যাগুলি পরীক্ষা করতে আবার "ফ্লাটার ডাক্তার" চালান।

আপনি যদি এখনও সমস্যার সম্মুখীন হন তবে আমি আপনাকে StackOverflow তে সেই সমস্যাটি খুঁজে বের করার চেষ্টা করার এবং এটি সমাধান করার পরামর্শ দিচ্ছি। 

#5 অ্যান্ড্রয়েড স্টুডিওতে প্রয়োজনীয় প্লাগইন ইনস্টল করুন।

এই প্লাগইনগুলি আপনাকে run & debug support, syntax highlighting, code completion, widget editing assistance এবং আরও অনেক কিছু দেয়।

প্লাগইনগুলি ইনস্টল করতে 'Ctrl+Alt+S' বা Menu> File > Settings দ্বারা সেটিংসে যান।

সেটিংসে প্লাগইন সেকশনগুলো খুলুন।

আপনাকে দুটি প্লাগইন ইনস্টল করতে হবে এবং মার্কেটপ্লেসে সেগুলি অনুসন্ধান করতে হবে।

• flutter
• dart

   একবার ইন্সটল করলে IDE রিস্টার্ট করুন। 

ব্যস! শুরু করে দিন আপনার ফ্লাটার ডেভেলপমেন্টের যাত্রা।