Flutter টিপ ক্যালকুলেটর তৈরি করুন: ধাপে ধাপে গাইড

Flutter মোবাইল অ্যাপ ডেভেলপমেন্ট ফ্রেমওয়ার্ক দিনে দিন জনপ্রিয় হচ্ছে, অনেক ব্যবসা তাদের প্রজেক্টের জন্য এটি বেছে নিচ্ছে।

অনেক ডেভেলপার এর পিক্সেল-পারফেক্ট UI উইজেটের সহজ কাঠামো ব্যবহার করে অ্যাপ তৈরি করার ক্ষমতা পছন্দ করেন। আমার মতে Flutter মোবাইল অ্যাপ ডেভেলপমেন্টের ভবিষ্যত কারণ এর UI ডেভেলপমেন্টের সাদगी এবং Dart প্রোগ্রামিং ভাষা ব্যবহার করে ফিচার লজিক চালানোর ক্ষমতা।

এই টিউটোরিয়াল मुख্যভাবে Flutter ফ্রেমওয়ার্কের বেসিক শেখাতে ফোকাস করে একটি সহজ টিপ ক্যালকুলেটর অ্যাপ তৈরি করে। আমরা স্টেটফুল এবং স্টেটলেস উইজেট ক্লাস এবং Flutter অ্যাপ ডেভেলপমেন্টে সবচেয়ে বেশি ব্যবহৃত উইজেটগুলো কভার করব।

আমরা একটি স্টার্টার Flutter প্রজেক্ট সেটআপ দিয়ে শুরু করব। তারপর সামগ্রিক UI এবং বেসিক ফাংশনালিটি বাস্তবায়ন করব।

চলুন শুরু করা যাক!

Flutter প্রজেক্ট সেটআপ করার উপায়

নতুন Flutter প্রজেক্ট তৈরি করতে আপনার সিস্টেমে Flutter SDK ইনস্টল থাকতে হবে। সহজ এবং দ্রুত ইনস্টলেশনের জন্য অফিসিয়াল Flutter ডকুমেন্টেশন অনুসরণ করুন।

মনে রাখবেন Android প্ল্যাটফর্মের জন্য অ্যাপ ডেভেলপ করতে হলে Android Studio এবং Android SDKও প্রয়োজন।

ডকুমেন্টেশন অনুসরণ করে সব সেটআপ সফল হলে টার্মিনালে নিচের Flutter কমান্ড চালান:

flutter create tipCalculator 

এই কমান্ড স্বয়ংক্রিয়ভাবে আপনার স্টার্টার Flutter প্রজেক্ট ডাউনলোড ও সেটআপ করবে। এখন প্রজেক্টটি Visual Studio Code IDE-এ খুলুন।

আপনার ডিভাইস সিমুলেটর বা আসল স্মার্টফোন কানেক্টেড থাকলে নিচের কমান্ড চালিয়ে অ্যাপ লঞ্চ করুন:

flutter run 

বা কীবোর্ডে 'F5' চাপুন যা VSCode-এ একটি মেনু আনায়। সেখান থেকে ডিভাইস নির্বাচন করুন অ্যাপ লঞ্চ করতে।

নোট: আপনাকে .dart এক্সটেনশন वाली ফাইলের ভিতরে থাকতে হবে এই কমান্ড সফলভাবে চালাতে।

বিল্ড ও রান করলে আপনার এমুলেটর/আসল ডিভাইসে নিচের স্টার্টার টেমপ্লেট দেখবেন:

এখন আপনার Flutter অ্যাপ চলে চলেছে।

মূল প্রজেক্ট ফাইল main.dart এর વિશ্তারিত জানি।

main.dart ফাইলে দুটি ক্লাস অবজেক্ট আছে। একটি Stateful উইজেটে এক্সটেন্ড করে আরেকটি Stateless উইজেটে। এগুলোর অর্থ কী?

• Stateful widget: অ্যাপের স্টেট রাখে এমন ক্লাস। স্টেট পরিবর্তন হলে এই ক্লাসের উইজেটগুলো রি-রেন্ডার হয়। ডাইনামিক স্টেট পরিবর্তনে অবদান রাখে।
• Stateless widget: এই ক্লাস কোনো স্টেট রাখে না। এটি উইজেট ভিউ রিপ্রেজেন্ট করে যা পরিবর্তন হয় না। কোনো ডাইনামিক স্টেট পরিবর্তনে অবদান রাখে না।

main.dart ফাইলে main() ফাংশনও আছে যা runApp মেথডে MyApp ক্লাস কল করে Flutter অ্যাপ লঞ্চ ট্রিগার করে।

টিপ ক্যালকুলেটরর UI তৈরি করার উপায়

UI বাস্তবায়ন শুরু করতে MyHomePageState ক্লাসের ডিফল্ট সব কন্টেন্ট মুছে ফেলতে হবে।

তারপর বিল্ড ফাংশনের ভিতর থেকে একটি সাধারণ Scaffold উইজেট রিটার্ন করব।

Scaffold উইজেটে appBar এবং body প্রোপার্টি যোগ করার সুবিধা আছে। এখন একটি সাধারণ অ্যাপবার যোগ করব। সামগ্রিক বাস্তবায়ন নিচে দেখুন:

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),), ), body: Container() ); } } 

AppBar উইজেটে title প্রোপার্টি যোগ করে বিল্ড ও রান করলে এমুলেটর স্ক্রিনে নিচের ফলাফল পাবেন:

Flutter-এ হট রিলোডিং আছে Dart ফাইল সেভ করার সময়। তাই প্রজেক্টের Dart ফাইলে যেকোনো পরিবর্তন সেভ করলে তা স্বয়ংক্রিয়ভাবে এমুলেটরে রিফ্লেক্ট হয়।

ধাপ ১: অ্যাপবার ডিজাইন করুন

এখানে AppBar উইজেটকে এর বিভিন্ন প্রোপার্টি ব্যবহার করে মডিফাই করব। মডিফাইড কোড নিচে:

appBar: AppBar( title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),), centerTitle: true, elevation: 0.0, backgroundColor: Colors.white70, ), 

বিল্ড ও রান করলে এমুলেটর স্ক্রিনে নিচের ফলাফল পাবেন:

এখানে আমরা কিছু বেসিক AppBar উইজেট প্রোপার্টি ব্যবহার করেছি:

• elevation - অ্যাপবারের শ্যাডো ইফেক্ট কন্ট্রোল করে (z-index-এর মতো)
• centerTitle - টাইটেল কেন্দ্রস্থ করে
• ব্যাকগ্রাউন্ড কালার সাদা করা হয়েছে

ধাপ ২: Scaffold বডি ডিজাইন করুন

এতক্ষণ body প্রোপার্টিতে শুধু খালি Container ছিল। এখন Container উইজেটে কিছু প্রোপার্টি এবং চাইল্ড উইজেট যোগ করব:

body: Container( color: Colors.white70, padding: const EdgeInsets.all(16.0), child: Center( child: Form( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ], ), ), ), 

বিল্ড ও রান করলে এমুলেটর স্ক্রিনে নিচের ফলাফল পাবেন:

উপরের স্ক্রিনশটে দেখা যাচ্ছে বডির ব্যাকগ্রাউন্ড কালার সাদা করা হয়েছে। সাথে padding এবং চাইল্ড উইজেট হিসেবে Center উইজেট যোগ করা হয়েছে যা পুরো UI-কে বডির মাঝপথে আনবে।

Center উইজেটের একটি চাইল্ড হিসেবে Form উইজেট আছে যার জন্য আমরা টেক্সট ফিল্ড সহ একটি সাধারণ ফর্ম তৈরি করব।

সর্বোচ্চ গুরুত্বপূর্ণ, Form এর চাইল্ড উইজেট হিসেবে Column উইজেট আছে। Column উইজেটে children উইজেট অ্যারে প্রোপার্টি থাকে যেখানে যেকোনো সংখ্যক উইজেট ভертিক্যালি দেখানোর জন্য ইন্টিগ্রেট করা যায়।

ধাপ ৩: কনস্ট্যান্ট এবং ভেরিয়েবল ডিফাইন করুন

ফর্ম এলিমেন্ট (টেক্সট ফিল্ড সহ) বাস্তবায়নের আগে ইনপুট ফিল্ড থেকে ইনপুট হ্যান্ডেল করার জন্য কিছু কনস্ট্যান্ট ডিফাইন করতে হবে।

প্রয়োজনীয় কনস্ট্যান্ট এবং ভেরিয়েবল নিচে:

// ডিফল্ট বিল অ্যামাউন্ট static const defaultBillAmount = 0.0; // ডিফল্ট টিপ পারসেন্টেজ static const defaultTipPercentage = 15; // বিল অ্যামাউন্ট পরিবর্তন ট্র্যাক করার TextEditingController final _billAmountController = TextEditingController(text: defaultBillAmount.toString()); // টিপ পারসেন্টেজ পরিবর্তন ট্র্যাক করার TextEditingController final _tipPercentageController = TextEditingController(text: defaultTipPercentage.toString()); // ক্যালকুলেট করা বিল অ্যামাউন্টের লেটেস্ট ভ্যালু double _billAmount = defaultBillAmount; // ক্যালকুলেট করা টিপ পারসেন্টেজের লেটেস্ট ভ্যালু int _tipPercentage = defaultTipPercentage; 

উপরের কোডে TextEditingController মেথড ব্যবহার করা হয়েছে। এই কন্ট্রোলার মেথড TextFormField উইজেটে টেক্সট ইনপুট হ্যান্ডেল করতে সাহায্য করে যা ডিফল্ট ভ্যালুতে ইনিশিয়ালাইজড।

ধাপ ৪: ইনপুট ফর্ম ফিল্ড যোগ করুন

এখন TextFormField উইজেট ব্যবহার করে দুটি ইনপুট ফর্ম ফিল্ড যোগ করব।

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

body: Container( color: Colors.white70, padding: const EdgeInsets.all(16.0), child: Center( child: Form( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextFormField( key: Key("billAmount"), controller: _billAmountController, keyboardType: TextInputType.numberWithOptions(decimal: true), decoration: InputDecoration( hintText: 'বিল অ্যামাউন্ট লিখুন', labelText: 'বিল অ্যামাউন্ট', labelStyle: TextStyle( fontSize: 25, letterSpacing: 1, fontWeight: FontWeight.bold ), fillColor: Colors.white, border: new OutlineInputBorder( borderRadius: new BorderRadius.circular(20.0), ), ), ), SizedBox(height: 25,), TextFormField( key: Key("tipPercentage"), controller: _tipPercentageController, keyboardType: TextInputType.number, decoration: InputDecoration( hintText: 'টিপ পারসেন্টেজ লিখুন', labelText: 'টিপ পারসেন্টেজ', labelStyle: TextStyle( fontSize: 25, letterSpacing: 1, fontWeight: FontWeight.bold ), fillColor: Colors.white, border: new OutlineInputBorder( borderRadius: new BorderRadius.circular(20.0), ), ), ), ], ), ), ), ), 

এখানে keyboardType প্রোপার্টি অ্যাসাইন করা হয়েছে যা ইউজার ইনপুট ফিল্ডে ট্যাপ করলে প্রয়োজনীয় টাইপের কীবোর্ড দেখাবে।

InputDecoration উইজেট ব্যবহার করে ডেকোরেশন প্রোপার্টি দিয়ে ইনপুট ফিল্ড স্টাইল করা হয়েছে।

InputDecoration উইজেটে.placeholder টেক্সট এবং ইনপুটের উপরে লেবেল দেখানোর প্রোপার্টি রয়েছে। কার্বড আউटलাইন বর্ডার দেখানোর জন্য border প্রোপার্টি প্রয়োগ করা হয়েছে।

বিল্ড ও রান করলে এমুলেটর স্ক্রিনে নিচের ফলাফল পাবেন:

ধাপ ৫: ইভেন্ট লিসেনার এবং ফাংশন যোগ করুন

বিল অ্যামাউন্ট বা পারসেন্টেজ ইনপুট দিলেই টিপ অ্যামাউন্ট ক্যালকুলেট করার জন্য টেক্সট ইনপুট ফিল্ডের পরিবর্তন শুনতে হবে।

সেজন্য addListener মেথড ব্যবহার করে কন্ট্রোলারগুলোর ইভেন্ট লিসেনার যোগ করব।

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

নোট: setState মেথড build মেথড পুনরায় চালু করে।

সামগ্রিক কোডিং বাস্তবায়ন নিচে:

@override void initState() { super.initState(); _billAmountController.addListener(_onBillAmountChanged); _tipPercentageController.addListener(_onTipAmountChanged); } _onBillAmountChanged() { setState(() { _billAmount = double.tryParse(_billAmountController.text) ?? 0.0; }); } _onTipAmountChanged() { setState(() { _tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0; }); } 

এখানে initState মেথডও আছে। এই মেথড অ্যাপের এই স্ক্রিনে প্রবেশ करते ही চলে। তাই স্ক্রিনে ঢুকতেই ইভেন্ট লিসেনার যোগ করা হয়।

ধাপ ৬: অ্যামাউন্ট সেকশন যোগ করুন

এখন UI উইজেটে ফিরে। ইনপুট ফিল্ডের নিচে Column উইজেটের ভিতরে Amounts সেকশন যোগ করব।

এখানে SizedBox উইজেটও ব্যবহার করব যা উইজেটগুলোর মধ্যে স্পেসিং দেয়। Amounts সেকশনের কোডিং বাস্তবায়ন নিচে:

), SizedBox(height: 20,), Container( margin: EdgeInsets.all(15), padding: EdgeInsets.all(15), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all( Radius.circular(15), ), border: Border.all(color: Colors.white), boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(2, 2), spreadRadius: 2, blurRadius: 1, ), ], ), child: Column( children: [ Text("টিপ অ্যামাউন্ট"), Text("টোটাল অ্যামাউন্ট") ], ), ), 

এখানে কিছু স্টাইল ডেকোরেশন সহ একটি Container আছে। এর child প্রোপার্টিতে আরেকটি Column উইজেট আছে যেখানে দুটি Text উইজেট ভERTিক্যালি সাজানো।

বিল্ড ও রান করলে এমুলেটর স্ক্রিনে নিচের ফলাফল পাবেন:

ধাপ ৭: অ্যামাউন্ট দেখানোর জন্য আলাদা একটি Stateless Widget তৈরি করুন

টিপ অ্যামাউন্ট এবং টোটাল অ্যামাউন্ট কিছু স্টাইলিং সহ দেখাতে চাই। এতে কোনো স্টেট থাকবে না কিন্তু Stateful উইজেট থেকে পাস করা ভ্যালুর ওপর নির্ভর করবে।

AmountText স্টেটলেস উইজেট ক্লাসের সামগ্রিক কোডিং বাস্তবায়ন নিচে:

class AmountText extends StatelessWidget { final String text; const AmountText( this.text, { Key key, }) : super(key: key); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(8), child: Text(text.toUpperCase(), style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)), ); } } 

এখানে কনস্ট্রাক্টর ক্লাস ব্যবহার করে ডিসপ্লে করার টেক্সটের ভ্যালু নেওয়া হয়েছে। এই ক্লাসের বিল্ড মেথড সিম্পল padding এবং চাইল্ড উইজেট হিসেবে Text উইজেট সহ Container উইজেট রিটার্ন করে।

আমাদের AmountText উইজেট রেডি হলে, এখন এটি Stateful উইজেটে কল করতে পারি।

পূর্বে ডিফাইন করা Column উইজেটে (যেখানে সিম্পল Text উইজেট ছিল) এই উইজেট যোগ করব। শুধু Text উইজেটকে AmountText উইজেট দিয়ে রিপ্লেস করে প্রয়োজনীয় টেক্সট ভ্যালু পাস করব।

কোডিং বাস্তবায়ন নিচে:

Container( margin: EdgeInsets.all(15), padding: EdgeInsets.all(15), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all( Radius.circular(15), ), border: Border.all(color: Colors.white), boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(2, 2), spreadRadius: 2, blurRadius: 1, ), ], ), child: Column( children: [ AmountText( 'টিপ অ্যামাউন্ট: ${_getTipAmount()}', key: Key('tipAmount'), ), AmountText( 'টোটাল অ্যামাউন্ট: ${_getTotalAmount()}', key: Key('totalAmount'), ), ], ), ), 

এখানে AmountText উইজেটের ভিতরে ফাংশন পাস করা হয়েছে। ফাংশনগুলো সংশ্লিষ্ট টিপ অ্যামাউন্ট এবং টোটাল অ্যামাউন্ট ভ্যালু রিটার্ন করে, নিচে দেখুন:

 _getTipAmount() => _billAmount * _tipPercentage / 100; _getTotalAmount() => _billAmount + _getTipAmount(); 

শেষে, ভিউ থেকে বের होते সময় কন্ট্রোলার টার্মিনেট করতে হবে। সেজন্য বিল্ট-ইন dispose ফাংশন ব্যবহার করব। এই ফাংশন করেন্ট স্ক্রিন থেকে এক্সিট করার সময় চলে।

এই মেথডের ভিতরে কন্ট্রোলারগুলোর dispose মেথড কল করে ইনপুট টেক্সট কন্ট্রোলার টার্মিনেট করব। এতে কন্ট্রোলার ইনপুট ফিল্ডের পরিবর্তন শুনা বন্ধ করবে।

dispose ফাংশন নিচে:

@override void dispose() { // নিশ্চিত করুন যে কোনো TextEditingController লিক হচ্ছে না, যখন এই উইজেট মেমরি থেকে ক্লিয়ার হবে। _billAmountController.dispose(); _tipPercentageController.dispose(); super.dispose(); } 

বিল্ড ও রান করলে আমাদের টিপ ক্যালকুলেটর বাস্তবায়নের চূড়ান্ত ফলাফল পাবেন, নিচের ডেমোতে দেখুন:

দেখবেন ইনপুট ফিল্ডে ইনপুট পরিবর্তন করার সাথে সাথে দুটি অ্যামাউন্টের ভ্যালু পরিবর্তন হচ্ছে।

এই টিউটোরিয়ালের শেষে আমরা পৌঁছেছি। আপনি সফলভাবে Flutter ফ্রেমওয়ার্ক এবং Dart ব্যবহার করে একটি সহজ টিপ ক্যালকুলেটর বাস্তবায়ন করেছেন।

এখন কिधরে যাবেন?

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

অনেক আরো रोচক উইজেট এবং অডিশন আছে যা আপনি এক্সপ্লোর করতে পারেন। ফাংশনাল কম্পোনেন্ট একই রেখে আপনার অ্যাপের UI পরিবর্তন করতে পারেন।

সামগ্রিকভাবে Flutter উইজেট প্যাটার্ন দিয়ে জটিল UI ডিজাইন সহজ করে দেয়। আপনি সিম্পলি উইজেটগুলো তাদের চাইল্ড প্রোপার্টি ব্যবহার করে স্ট্যাক করে একটি দুর্দান্ত UI তৈরি করতে পারেন।

পরবর্তী ধাপ হতে পারে Flutter-এর নেভিগেশন মেকানিজম ব্যবহার করে ভিন্ন স্ক্রিনে নেভিগেট করা। Flutter কাস্টম ড্রয়ার মেনু এবং বটম ট্যাব যোগ করাও সহজ করে দেয়।

এটি শুধু Flutter ডেভেলপমেন্টের শুরু। এর চেয়ে অনেক বেশি আছে। আমাদের बस এক্সপ্লোর এবং কোডিং চালিয়ে যেতে হবে।

পুরো প্রজেক্টের ডেমো Codepen-এ উপলব্ধ।

আপনার Flutter অ্যাপের জন্য অন্যাএরা বানানো অ্যাপ থেকে অনুপ্রেরণা নেওয়া যাবে।

শুভ কোডিং!