ফ্লাটার বাংলা টিউটোরিয়াল পর্ব – ৩ (Create Flutter Application)

Create Simple Application Using Flutter in Bangla
Spread the love

এই টিউটোরিয়াল এ আমরা Android Studio তে একটি ফ্লাটার অ্যাপ্লিকেশন(create flutter application) তৈরির মূল বিষয়গুলি বোঝার জন্য সাধারণ ফ্লাটার অ্যাপ্লিকেশন তৈরি করবো।

Create Flutter Application in Bangla

স্টেপ ১ – Android Studio চালু করুন ।

স্টেপ ২ – ফ্লাটার প্রজেক্ট তৈরি করুন। এর জন্য File → New → New Flutter Project ক্লিক করুন।

flutter bangla project create

স্টেপ ৩ – Flutter Application সিলেক্ট করুন। এরপর Next ক্লিক করুন।

flutter bangla new project create

স্টেপ ৪ – নীচের মতো অ্যাপ্লিকেশনটি কনফিগার করুন এবং Next ক্লিক করুন।

  • প্রজেক্ট নামঃ প্রজেক্টের নাম লিখুন
  • Flutter SDK পথঃ <path_to_flutter_sdk>
  • প্রজেক্ট লোকেশনঃ <path_to_project_folder>
  • ডেসক্রিপশনঃ <A new Flutter hello world application>

 flutter bangla new project create 2

স্টেপ ৫ – কনফিগার প্রজেক্ট। কোম্পানি ডোমেইন নাম সেট করুন এমন mahbubhabib.com এবং ক্লিক finish ।

flutter bangla new project create 3

স্টেপ ৬ – Android Studio ফুল ফাংশনালিটি সহ পুরোপুরি কাজ করছে এমন ফ্লাটার অ্যাপ্লিকেশন তৈরি করে। আসুন আমরা অ্যাপ্লিকেশনটির স্ট্রাকচারটি ভাল করে লক্ষ্য করি এবং তারপরে, আমাদের কাজের জন্য কোডটি পরিবর্তন করি

flutter bangla new project create 4

স্ট্রাকচার নীচে রয়েছে –

flutter bangla project description

অ্যাপ্লিকেশন এর বিভিন্ন কম্পোন্যান্ট এবং স্ট্রাকচার নিচে ব্যাখ্যা করা হলো –

  • android – এই এপ্লিকেশনের এন্ড্রয়েড এর জন্যে সোর্স কোড অটো জেনেরেট হই এই ফোল্ডারে
  • iOS – এই এপ্লিকেশনের iOS এর জন্যে সোর্স কোড অটো জেনেরেট হই এই ফোল্ডারে
  • lib – ফ্লাটার ফ্রেমওয়ার্ক ব্যবহার করে ডার্ট কোড লিখার মূল ফোল্ডার এটি
  • ib/main.dart − ফ্লাটার এপ্লিকেশনের এন্ট্রি পয়েন্ট
  • test- ফ্লাটার ফ্রেমওয়ার্ক ব্যবহার করে ডার্ট কোড টেস্ট এর মূল ফোল্ডার এটি
  • test/widget_test.dart − স্যাম্পল কোড
  • .gitignore – গিট ভার্সন নিয়ন্ত্রণ ফাইল
  • .metadata − ফ্লাটার টুলস দ্বারা অটো জেনারেট
  • .packages − ফ্লাটার প্যাকেজেস ট্র্যাক এর জন্যে অটো জেনারেট
  • .iml – অ্যান্ড্রয়েড স্টুডিও দ্বারা প্রজেক্ট ফাইল ব্যবহৃত হয়
  • pubspec.yaml – pub , ফ্লাটার প্যাকেজ ম্যানেজার এর জন্যে ব্যবহৃত হয়
  • pubspec.lock − pub , ফ্লাটার প্যাকেজ দ্বারা অটো জেনারেট
  • README.md – প্রজেক্টের বর্ণনার ফাইলটি মার্কডাউন ফর্ম্যাটে তৈরি

স্টেপ ৭ – lib / main.dart ফাইলে ডার্ট কোডটি নীচের কোডের মত করে পরিবর্তন করুন –

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

আসুন লাইন বাই লাইন ডার্ট কোডটি বুঝি-

লাইন ১ – ইম্পোর্ট ফ্লাটার প্যাকেজ material. অ্যান্ড্রয়েড এর জন্যে নির্দিষ্ট material ডিজাইন অনুযায়ী ইউজার ইন্টারফেস তৈরির জন্য এটি একটি ফ্লাটার প্যাকেজ।

লাইন ৩ – এটি অ্যাপ্লিকেশনটির এন্ট্রি পয়েন্ট। runApp ফাংশন অ্যাপ্লিকেশনকে কল করে এবং এটি MyApp ক্লাস এর একটি অবজেক্টকে পাস করে । runApp ফাংশনটির উদ্দেশ্য হ’ল প্রদত্ত উইজেটটি স্ক্রিনে যুক্ত করা।

লাইন ৫-১৭ – উইজেটটি ফ্লাটার ফ্রেমওয়ার্কে UI তৈরি করতে ব্যবহৃত হয়। StatelessWidget একটি উইজেট, যা উইজেটের কোনও স্ট্যাট মেইনটেইন করে না। MyApp এক্সটেন্ট করে StatelessWidget কে এবং ওভার রাইট করে আগের তৈরি মেথড কে। এপ্লিকেশনের UI তৈরি করাই হইচ্ছে এই বিল্ড মেথড এর উদ্দেশ্য। এখানে, বিল্ড মেথড টি অ্যাপ্লিকেশনটির মূল স্তরের UI তৈরি করতে MaterialApp, নামের একটি উইজেট ব্যবহার করে। এটিতে তিনটি বৈশিষ্ট্য রয়েছে – title , theme এবং home ।

  • title হচ্ছে এই এপ্লিকেশনের title
  • থিমটি হচ্ছে উইজেটের থিম। এখানে, আমরা থিমডাটা ক্লাস এবং তার প্রোপার্টি , primarySwatch ব্যবহার করে অ্যাপ্লিকেশনটির একটি ডিফল্ট কালার হিসাবে নীল সেট করেছি।
  • home হ’ল অ্যাপ্লিকেশনটির অভ্যন্তরীণ UI , যা আমরা MyHomePage নামে আরেকটি উইজেট সেট করি

লাইন ১৯-৩৮ – MyHomePage প্রায় সেইম MyApp এর মত কিন্তু রিটার্ন করে Scaffold উইজেট । Scaffold UI কনফর্মিং material ডিজাইন তৈরি করতে ব্যবহৃত MaterialApp উইজেটের পাশে একটি টপ লেভেলের উইজেট। এটির দুটো গুরুত্বপুর্ণ বৈশিষ্ট্য রয়েছে – appBar এ এপ্লিকেশনের হেডার দেখানো হয় এবং বডিতে কন্টেন্ট লিখা হয়। appBar হচ্ছে আরেকটি উইজেট যেখানে হেডার এর যাবতীয় কাজ রেন্ডার করা হয়, এটিকে আমরা appBar প্রোপার্টি হিসাবে ব্যবহার করি। আর বডি প্রোপার্টিতে,
আমরা center উইজেট ব্যবহার করেছি, যা এটি child উইজেটকে কেন্দ্র করে। Text হচ্ছে ফাইনাল এবং অভ্যন্তরীণ সর্বাধিক উইজেট এবং এটি এপ্লিকেশনের কেন্দ্রে প্রদর্শিত হবে ।

স্টেপ ৮ – এখন, অ্যাপ্লিকেশনটি রান করুন – Run → Run main.dart

 flutter bangla project run

স্টেপ ৯ – অবশেষে, অ্যাপ্লিকেশনটির আউটপুট নিম্নরূপ দেখতে পাবেন –

flutter bangla emulator

আগের পোস্ট টি পড়ুন-

ফ্লাটার টিউটোরিয়াল বাংলা পর্ব – ১ (What is Flutter)

ফ্লাটার বাংলা টিউটোরিয়াল পর্ব – ২ (How to Install Flutter)

Leave a Reply

Your email address will not be published. Required fields are marked *