একটি টিপ ক্যালকুলেটর তৈরি করতে কীভাবে ফ্লটার ব্যবহার করবেন

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

অনেক devs উইজেটগুলির একটি সাধারণ কাঠামো ব্যবহার করে পিক্সেল নিখুঁত UI সহ অ্যাপগুলি বিকাশ করার ক্ষমতার প্রশংসা করে৷ আমি মনে করি ফ্লাটার হল মোবাইল অ্যাপ ডেভেলপমেন্টের ভবিষ্যত কারণ এটির UI তৈরির সরলতা এবং ডার্ট প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করে ফিচার লজিক পাওয়ার ক্ষমতা।

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

এখানে ধারণাটি একটি স্টার্টার ফ্লাটার প্রকল্প স্থাপন করে শুরু করা। তারপর, আমরা সামগ্রিক UI এবং মৌলিক কার্যকারিতা বাস্তবায়নে এগিয়ে যাব।

তো, চলুন শুরু করা যাক!

কিভাবে আপনার ফ্লাটার প্রকল্প সেট আপ করবেন

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

মনে রাখবেন যে আপনি যদি অ্যান্ড্রয়েড প্ল্যাটফর্মের জন্য একটি অ্যাপ তৈরি করেন তবে এটির জন্য অ্যান্ড্রয়েড স্টুডিও এবং অ্যান্ড্রয়েড এসডিকে প্রয়োজন।

ডকুমেন্টেশন অনুসরণ করে সবকিছু সফলভাবে সেট আপ করার পরে, আপনি এগিয়ে যেতে পারেন এবং টার্মিনালে নিম্নলিখিত ফ্লাটার কমান্ডটি চালাতে পারেন:

flutter create tipCalculator

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

যদি আপনার কাছে একটি ডিভাইস সিমুলেটর বা প্রকৃত স্মার্টফোন ডিভাইস সংযুক্ত থাকে, তাহলে আপনি অ্যাপটি চালু করতে নিম্নলিখিত কমান্ডটি চালাতে পারেন:

flutter run

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

মনে রাখবেন, আপনাকে অবশ্যই .dart এক্সটেনশন সহ ফাইলের ভিতরে থাকতে হবে এই কমান্ডটি সফলভাবে চালানোর জন্য।

উপরের কমান্ড বা F5 ব্যবহার করে এটি তৈরি করুন এবং চালান আপনার এমুলেটর/প্রকৃত ডিভাইসে নিম্নলিখিত স্টার্টার টেমপ্লেট পেতে:

এখন আপনার ফ্লটার অ্যাপ চালু করা উচিত।

মূল প্রজেক্ট ফাইল, main.dart-এ কী চলছে সে সম্পর্কে একটু বিস্তারিত জেনে নেওয়া যাক .

main.dart-এ ফাইল, আমাদের দুটি ক্লাস অবজেক্ট আছে। একটি স্টেটফুল উইজেট এবং অন্যটি স্টেটলেস উইজেট পর্যন্ত প্রসারিত। তাহলে এর মানে কি?

• স্টেটফুল উইজেট:যে ক্লাসে অ্যাপের স্টেট রয়েছে। রাজ্যগুলি এই স্টেটফুল উইজেট ক্লাসে উইজেটগুলির রেন্ডার পরিবর্তন এবং ট্রিগার করতে পারে। এটি গতিশীল অবস্থার পরিবর্তনে অবদান রাখে।
• রাষ্ট্রহীন উইজেট:এই শ্রেণীতে কোনো রাজ্য নেই। এটি উইজেট দৃশ্যের প্রতিনিধিত্ব করে যা পরিবর্তন হয় না। এটি কোনো গতিশীল অবস্থার পরিবর্তনে অবদান রাখে না।

main.dart ফাইলে main()ও থাকে ফাংশন যা MyApp কল করে runApp এর ভিতরে ক্লাস ডিভাইসে ফ্লাটার অ্যাপ চালু করার জন্য পদ্ধতি।

কিভাবে টিপ ক্যালকুলেটরের 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 যোগ করার পরে এটি তৈরি করুন এবং চালান AppBar ব্যবহার করে title সহ উইজেট সম্পত্তি আপনি আপনার এমুলেটর স্ক্রিনে নিম্নলিখিত ফলাফল পাবেন:

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

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

এখানে, আমরা 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 শিরোনাম কেন্দ্রীভূত করতে,
• এবং আমরা ব্যাকগ্রাউন্ডের রঙও সাদা করেছি।

ধাপ 2:স্ক্যাফোল্ড বডি ডিজাইন করুন

এই বিন্দু পর্যন্ত, আমাদের কাছে শুধুমাত্র একটি খালি Container আছে body-এ উইজেট সম্পত্তি এখন, আমরা 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 আছে উইজেট (এর একটি শিশু) যার জন্য আমরা পাঠ্য ক্ষেত্র সহ একটি সাধারণ ফর্ম তৈরি করতে যাচ্ছি।

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

ধাপ 3:ধ্রুবক এবং ভেরিয়েবল সংজ্ঞায়িত করুন

ফর্ম উপাদানগুলি (টেক্সট ক্ষেত্র সহ) প্রয়োগ করার আগে, ইনপুট ক্ষেত্রগুলি থেকে ইনপুটগুলি পরিচালনা করার জন্য আমাদের কিছু ধ্রুবক সংজ্ঞায়িত করতে হবে।

আপনি নীচের কোড স্নিপেটে প্রয়োজনীয় ধ্রুবক এবং ভেরিয়েবল দেখতে পারেন:

// This is the default bill amount
  static const defaultBillAmount = 0.0;

  // This is the default tip percentage
  static const defaultTipPercentage = 15;

  // This is the TextEditingController which is used to keep track of the change in bill amount
  final _billAmountController =
      TextEditingController(text: defaultBillAmount.toString());

  // This is the TextEditingController which is used to keep track of the change in tip percentage
  final _tipPercentageController =
      TextEditingController(text: defaultTipPercentage.toString());

  // This stores the latest value of bill amount calculated
  double _billAmount = defaultBillAmount;

  // This stores the latest value of tip percentage calculated
  int _tipPercentage = defaultTipPercentage;

উপরের কোড স্নিপেটে, আপনি দেখতে পাচ্ছেন যে আমরা TextEditingController ব্যবহার করছি পদ্ধতি এই কন্ট্রোলার পদ্ধতিটি আমাদের TextFormField-এ পাঠ্য ইনপুটগুলি পরিচালনা করতে দেয় উইজেট পরে যা ডিফল্ট মানগুলিতে শুরু হয়।

ধাপ 4:ইনপুট ফর্ম ক্ষেত্র যোগ করুন

এখন, আমরা 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: 'Enter the Bill Amount',
                      labelText: 'Bill Amount',
                      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: 'Enter the Tip Percentage',
                    labelText: 'Tip Percentage',
                    labelStyle: TextStyle(
                      fontSize: 25,
                      letterSpacing: 1,
                      fontWeight: FontWeight.bold
                    ),
                    fillColor: Colors.white,
                    border: new OutlineInputBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

এখানে, আমরা keyboardType বরাদ্দ করেছি প্রপার্টি যা ব্যবহারকারী ইনপুট ফিল্ডে ট্যাপ করলে প্রয়োজনীয় ধরনের কীবোর্ড দেখাতে সক্ষম করে।

এছাড়াও আমাদের অলঙ্করণ বৈশিষ্ট্য রয়েছে যা দিয়ে আমরা InputDecoration ব্যবহার করে আমাদের ইনপুট ক্ষেত্রগুলিকে স্টাইল করতে পারি উইজেট

InputDecoration-এ উইজেট, আমাদের বেশ কয়েকটি বৈশিষ্ট্য রয়েছে যা আমাদেরকে প্লেসহোল্ডার পাঠ্যের পাশাপাশি ইনপুটের উপরে লেবেল দেখাতে সাহায্য করে। আমরা borderও প্রয়োগ করেছি একটি বাঁকা আউটলাইন সীমানা দেখানোর জন্য সম্পত্তি।

এটি তৈরি করুন এবং চালান, এবং আপনি আপনার এমুলেটর স্ক্রিনে নিম্নলিখিত ফলাফল পাবেন:

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

যেহেতু ব্যবহারকারী বিলের পরিমাণ বা শতাংশ ইনপুট করার সাথে সাথে আমরা টিপের পরিমাণ গণনা করতে যাচ্ছি, তাই আমাদের পাঠ্য ইনপুট ক্ষেত্রের পরিবর্তনগুলি শুনতে হবে।

এর জন্য, আমাদের addListener ব্যবহার করে কন্ট্রোলারের সাথে ইভেন্ট শ্রোতাদের যোগ করতে হবে পদ্ধতি

এখন ইনপুট ক্ষেত্রে কোনো পরিবর্তন ঘটলেই, আমরা বিলের পরিমাণ এবং টিপ শতাংশ আপডেট করার জন্য একটি নির্দিষ্ট ফাংশন ট্রিগার করতে চাই।

এর জন্য, আমরা setState এর সাথে প্রয়োজনীয় ফাংশন ব্যবহার করতে যাচ্ছি পদ্ধতি যা কিছু পরিবর্তন ঘটলেই সম্পূর্ণ UI রেন্ডার করতে সাহায্য করে।

উল্লেখ্য যে 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 আছে পাশাপাশি পদ্ধতি। আমরা অ্যাপের এই স্ক্রিনে প্রবেশ করার সাথে সাথে এই পদ্ধতিটি চলে। তাই আমরা পর্দায় প্রবেশ করার সাথে সাথে ইভেন্ট শ্রোতাদের যোগ করি।

ধাপ 6:পরিমাণ বিভাগ যোগ করুন

এখন আমাদের UI উইজেটগুলিতে ফিরে আসি। আমরা কলাম উইজেটের ভিতরে ইনপুট ক্ষেত্রগুলির ঠিক নীচে পরিমাণ বিভাগ যোগ করতে যাচ্ছি।

এখানে, আমরা SizedBoxও ব্যবহার করব উইজেট যা আমাদের উইজেটগুলির মধ্যে কিছু প্রয়োজনীয় ব্যবধান প্রদান করতে সক্ষম করে। আপনি নীচের কোড স্নিপেটে পরিমাণ বিভাগের কোডিং বাস্তবায়ন দেখতে পারেন:

),
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("Tip Amount"),
      Text("Total Amount")
    ],
  ),
),

এখানে, আমাদের একটি Container আছে কিছু প্রয়োজনীয় শৈলী সজ্জা সঙ্গে. child সম্পত্তিতে আরেকটি Column আছে দুটি Text সহ উইজেট উইজেটগুলি উল্লম্বভাবে সাজানো।

এটি তৈরি করুন এবং চালান, এবং আপনি আপনার এমুলেটর স্ক্রিনে নিম্নলিখিত ফলাফল পাবেন:

ধাপ 7:পরিমাণগুলি দেখানোর জন্য একটি পৃথক স্টেটলেস উইজেট তৈরি করুন

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

আপনি 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)),
    );
  }
}

এখানে, আমরা কন্সট্রাক্টর ক্লাস ব্যবহার করেছি যাতে প্রদর্শিত হবে প্রকৃত টেক্সটের মান। এই ক্লাসের বিল্ড পদ্ধতি Container প্রদান করে সহজ padding সহ উইজেট এবং Text একটি শিশু উইজেট হিসাবে উইজেট।

যেহেতু আমাদের AmountText উইজেট প্রস্তুত, এখন আমরা স্টেটফুল উইজেটে উইজেটকে কল করতে পারি।

আমরা Column এর ভিতরে উইজেট যোগ করতে যাচ্ছি উইজেট যা আমরা আগে সহজ 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(
        'Tip Amount: ${_getTipAmount()}',
        key: Key('tipAmount'),
      ),
      AmountText(
        'Total Amount: ${_getTotalAmount()}',
        key: Key('totalAmount'),
      ),
    ],
  ),
),

এখানে, আমরা AmountText এর ভিতরে ফাংশনটি পাস করেছি উইজেট ফাংশনটি সংশ্লিষ্ট টিপের পরিমাণ এবং মোট পরিমাণের মান প্রদান করে, আপনি নীচের কোড স্নিপেটে দেখতে পারেন:

  _getTipAmount() => _billAmount * _tipPercentage / 100;

  _getTotalAmount() => _billAmount + _getTipAmount();

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

এই পদ্ধতির ভিতরে, আমাদের dispose দিয়ে কন্ট্রোলারদের কল করতে হবে ইনপুট টেক্সট কন্ট্রোলার বন্ধ করার পদ্ধতি। এর ফলে কন্ট্রোলার ইনপুট ক্ষেত্রের পরিবর্তনগুলি শোনা বন্ধ করবে।

আপনি নীচের কোড স্নিপেটে নিষ্পত্তি ফাংশন দেখতে পারেন:

@override
void dispose() {
  // To make sure we are not leaking anything, dispose any used TextEditingController
  // when this widget is cleared from memory.
  _billAmountController.dispose();
  _tipPercentageController.dispose();
  super.dispose();
}

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

আপনি লক্ষ্য করবেন যে ইনপুট ক্ষেত্রের ইনপুট পরিবর্তন করার সাথে সাথে উভয় রাশির মান পরিবর্তিত হয়।

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

এখান থেকে কোথায় যেতে হবে?

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

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

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

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

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

পুরো প্রকল্পের ডেমো কোডপেনে উপলব্ধ।

আপনি অন্যদের থেকে আপনার ফ্লটার অ্যাপের জন্য অনুপ্রেরণা পেতে পারেন যারা ইতিমধ্যেই সেখানে আছে।

শুভ কোডিং!