আজকে আমরা শিখবো কিভাবে ফ্লাটা্র ব্যবহার করে ওয়েব এপ্লিকেশন তৈরি করতে হয়। এই আর্টিকেলটি আপনাকে এক্সাম্পলসহ ফ্লাটার দেখানোর মাধ্যমে ওয়েব এপ্লিকেশন বানানোর ক্ষেত্রে সাহায্য করবে।

ফ্লাটার মূলত ইনটুইটিভ কনটেন্ট সমৃদ্ধ্ব অ্যাপ্লিকেশন ডেভেলপে সাহায্য করে থাকে। ফ্লাটারের ওয়েব-হেল্প মোবাইল অ্যাপ্লিকেশনের জন্য একটি ব্রাউজার-ভিত্তিক মডেল দেয়। ফ্লাটার ওয়েব অ্যাপ্লিকেশনগুলো অ্যান্ড্রয়েড/আইওএস এর অ্যাপ্লিকেশনগুলোকেও একইভাবে রেন্ডার করে। এটি আপনার ডিমান্ড অনুযায়ী একটি প্রজেক্টকে সম্পূর্ণরূপে নেটিভ কোডে (HTML, CSS, JS) কনভার্ট করে।

ফ্লাটার ওয়েব অ্যাপের জন্য যা যা প্রয়োজন

যেকোনো ফ্লাটার ওয়েব অ্যাপ তৈরি করার জন্য আমাদের কিছু গুরুত্বপূর্ণ বিষয় মাথায় রাখতে হবে।যেমন:

•  Flutter SDK: Flutter SDK এর জন্য ইনস্টলেশন নির্দেশাবলী দেখুন।
• ক্রোম: একটি ওয়েব অ্যাপ ডিবাগ করার জন্য Chrome ব্রাউজার প্রয়োজন।
• ঐচ্ছিক: এক্ষেত্রে আমাদের একটি IDE প্রয়োজন যা ফ্লাটার সাপোর্ট করে। আপনি Android Studio, IntelliJ IDEA, or Visual Studio Code ইনস্টল করতে পারেন এবং তারপর ওয়েব অ্যাপকে রিফ্যাক্টরিং, চালানো, ডিবাগিং এবং রিলোড করার জন্য ল্যাঙ্গুয়েজ সাপোর্ট এবং টুলসহ ফ্লাটার এবং ডার্ট প্লাগইনগুলো ইনস্টল করতে পারেন৷ আরো বিস্তারিত জানার জন্য একটি ইডিটর সেট আপ দেখে নেওয়া যাক।

ফ্লাটার ওয়েব কেন গুরুত্বপূর্ণ

আসুন ফ্লাটার ওয়েবের কিছু গুরুত্বপূর্ণ বিষয় জেনে নেওয়া যাক:

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

ফ্লাটার ওয়েবের ওভার-অল পারফরম্যান্স এবং এটি যে কারণে অন্যদের থেকে আলাদা

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

ফ্লাটার ওয়েব অ্যাপের জন্য যা যা সেট আপ করতে হবে

• প্রথমে, আমাদের একটি ফ্লাটার প্রজেক্ট তৈরি করতে হবে এবং অ্যান্ড্রয়েড স্টুডিওতে নির্দিষ্ট ওয়েব প্ল্যাটফর্ম সিলেক্ট করতে হবে। এখানে আমরা উদাহরণস্বরূপ অ্যান্ড্রয়েড, আইওএস এবং ওয়েব ব্যবহার করছি। কিন্তু আমরা যদি লিনাক্স, উইন্ডোজ বা ম্যাক ওএসের জন্য একটি অ্যাপ তৈরি করতে চাই তাহলে আমাদের বিকল্প অপশনগুলো ব্যবহার করতে হবে।

• পরের ধাপে আমাদের ফ্লাটার চ্যানেলটি চেক করতে হবে। এখানে ফ্লাটার চ্যানেলের জন্য আমরা চ্যানেল বিটা ব্যবহার করবো। তবে যদি আপনার ফ্লাটার চ্যানেল আলাদা ধরনের হয় তবে আপনাকে নিচের কমান্ডটি ব্যবহার করে চ্যানেলটিকে বিটাতে পরিবর্তন করতে হবে।

$ flutter channel beta

• চ্যানেল পরিবর্তন করার পর নিচের কমান্ড ব্যবহার করে ফ্লাটারের ভার্শন আপগ্রেড করতে হবে।

$ flutter upgrade

• চ্যানেল পরিবর্তন করা এবং ফ্লাটার আপগ্রেড করার সময় আমাদের ফ্লাটার ওয়েব অ্যাপ চালানোর জন্য ওয়েব কনফিগার করতে হবে। এই কমান্ডটি দেওয়ার পরে আমাদের অ্যান্ড্রয়েড স্টুডিও রিস্টার্ট করতে হবে এবং ক্রোম বা অন্য কোনো ব্রাউজারে প্রজেক্টট রান করতে হবে।

$ flutter config --enable-web

•  নিচের কমান্ডটি দেওয়ার পর আমাদের অ্যান্ড্রয়েড স্টুডিও রিস্টার্ট করতে হবে। এখানে আমরা ওয়েব নামে একটি নতুন ফোল্ডার খুঁজে পাই। ওয়েব ফোল্ডারের ভেতরে আমরা index.html, manifest.json এর মতো অনেক ফাইল খুঁজে পাওয়ার পাশাপাশি আইকন নামের একটি ফোল্ডারও খুঁজে পাই।

• এইভাবেই আমরা একটি ভাল ফ্লাটার ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য কোডিং শুরু করতে পারি।

অ্যাপটি যেভাবে বাস্তবায়ন করতে হবে

আসুন এখন একটি ফ্লাটার ওয়েব অ্যাপ্লিকেশন তৈরি করা যাক। ধরা যাক অ্যাপ্লিকেশনটির নাম flutter_web_demo। প্রধান ডার্টে আমরা runApp() এ MyApp() ক্লাস পাস করি এবং MyApp() নামে একটি স্টেটলেস ক্লাস তৈরি করি এবংতারপর Material App রিটার্ন করি এবং হোমপেজ নামে একটি নতুন ক্লাস পাস করি।

return const MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter Demo',home: HomePage(),);

হোমপেজ ক্লাসে আমরা স্ক্যাফোল্ডটটি রিটার্ন করি এবং স্ক্যাফোল্ড প্রোপার্টিজ ব্যবহার করি, অ্যাপ-বারে পেইজ টাইটেলটি পাস করি।

appBar: AppBar(backgroundColor: Colors.black,centerTitle: true,title: const Text('Flutter Web App',style: TextStyle(color: Colors.white),),),

এবার পেইজ সেন্টারে একটি বাটন তৈরি করতে হবে। বাটনটিতে "ক্লিক মি" নামক একটি টেক্সট এড করুন এবং GestureDetector() ব্যবহার করে আমরা বাটনটি প্রেস করে এবং নতুন পেইজে যেতে পারি, যা মূলত অ্যাপ্লিকেশনটির সেকেন্ড পেইজ। এখান থেকে আমরা Navigator.push() ব্যবহার করে একটি নিউ পেইজে স্ক্রিন নেভিগেট করতে পারি।

GestureDetector(onTap: (){Navigator.push(context,MaterialPageRoute(builder: (context)=> const NewScreen()));},child: Container(height: 50,width: 150,decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.black,),child: const Center(child: Text('CLICK ME!!!',style: TextStyle(color: Colors.white),)),),),

 অ্যাপ্লিকেশনটি রান করার সময় আমরা নিচের স্ক্রিনে ক্যাপচার এক্সাম্পলটির মতো আমাদের স্ক্রিনের আউটপুট পাবো।

নতুন স্ক্রিনে NewScreen() নামে একটি ক্লাস পাবো। এরপর আমরা স্ক্যাফোল্ড রিটার্ন করি এবং এর বডিতে টেক্সট পাস করি।

return const Scaffold(body: Center(child: Text('Welcome to Flutter Web App...',style: TextStyle(fontStyle: FontStyle.italic,fontSize: 30,fontWeight: FontWeight.w500,color: Colors.teal),)),);

 এখানেও অ্যাপ্লিকেশনটি রান করার সময় আমরা নিচের স্ক্রিনে ক্যাপচার এক্সাম্পলটির মতো আমাদের স্ক্রিনের আউটপুট পাবো।

উপসংহার

ফ্লাটার ওয়েব এবং অ্যাপ ডেভেলপার উভয়ের জন্যই সমান উপকারী। এখন আপনাকে আর কোডিং এর জন্য কষ্ট করে HTML, CSS, JS শিখতে হবে না। আশা করি এই আর্টিকেলটি আপনার ফ্লাটারের সাথে অ্যাপ ডেভেলপমেট জার্নিটি সহজ করবে। তাই দেরি না করে এখনি শুরু করুন …