০ ২. Flutter ইনস্টলেশন - পাইথন বাংলা টিউটোরিয়াল

আমি আপনার অসন্তোষের জন্য দুঃখিত। আপনি সঠিক, আমি আপনার প্রত্যাশা অনুযায়ী বিস্তারিত ও সুসংগঠিত টিউটোরিয়াল দিতে পারিনি। আসুন, আমরা আবার শুরু করি, এবার আরও বিস্তারিত ও সুসংগঠিতভাবে।

পার্ট 1: Flutter ইনস্টলেশন ও প্রথম অ্যাপ

Flutter SDK ইনস্টলেশন:

a) Flutter SDK ডাউনলোড:

https://flutter.dev/docs/get-started/install/windows এ যান
“Get Flutter SDK” বাটনে ক্লিক করুন
ZIP ফাইল ডাউনলোড হওয়া শেষ হলে, এটি এক্সট্র্যাক্ট করুন (যেমন: C:\src\flutter)

b) সিস্টেম PATH আপডেট:

Start মেনুতে “env” সার্চ করুন ও “Edit the system environment variables” সিলেক্ট করুন
“Environment Variables” বাটনে ক্লিক করুন
“System variables” সেকশনে, “Path” সিলেক্ট করুন ও “Edit” ক্লিক করুন
“New” ক্লিক করে C:\src\flutter\bin যোগ করুন (আপনার Flutter ফোল্ডার লোকেশন অনুযায়ী)
OK ক্লিক করে সব উইন্ডো বন্ধ করুন

a) Android Studio ডাউনলোড ও ইনস্টল:

https://developer.android.com/studio থেকে Android Studio ডাউনলোড করুন
ডাউনলোড শেষে .exe ফাইল রান করুন ও ইনস্টলেশন প্রসেস ফলো করুন

a) VS Code ইনস্টলেশন:

https://code.visualstudio.com/ থেকে VS Code ডাউনলোড করুন
.exe ফাইল রান করে ইনস্টল করুন

b) Flutter ও Dart এক্সটেনশন ইনস্টল:

VS Code এ Extensions ভিউ খুলুন (Ctrl+Shift+X)
“Flutter” সার্চ করুন ও ইনস্টল করুন
“Dart” এক্সটেনশনও অটোমেটিক ইনস্টল হবে
Flutter ডকটর:

a) কমান্ড প্রম্পট খুলুন (Start মেনুতে cmd টাইপ করুন)
b) নিচের কমান্ড রান করুন:

flutter doctor

c) যদি কোন সমস্যা থাকে, Flutter ডকটর সেগুলো দেখাবে। প্রতিটি সমস্যা সমাধান করুন।

প্রথম Flutter প্রজেক্ট তৈরি:

a) VS Code খুলুন
b) File > New Window সিলেক্ট করুন
c) View > Command Palette খুলুন (Ctrl+Shift+P)
d) “Flutter: New Project” টাইপ করুন ও সিলেক্ট করুন
e) প্রজেক্টের নাম দিন (যেমন: my_first_app)
f) প্রজেক্ট সেভ করার লোকেশন সিলেক্ট করুন

প্রজেক্ট স্ট্রাকচার বিস্তারিত ব্যাখ্যা:

my_first_app/
├── android/         # Android-specific files
│   ├── app/
│   └── gradle/
├── ios/             # iOS-specific files
├── lib/             # Dart source files
│   └── main.dart    # Main entry point
├── test/            # Test files
├── web/             # Web-specific files
├── .gitignore       # Git ignore file
├── .metadata        # Flutter metadata
├── pubspec.yaml     # Project configuration
└── README.md        # Project readme file

a) android/:

Android প্ল্যাটফর্ম-স্পেসিফিক কোড ও কনফিগারেশন
gradle ফাইলস, AndroidManifest.xml, ও Java/Kotlin সোর্স ফাইলস

b) ios/:

iOS প্ল্যাটফর্ম-স্পেসিফিক কোড ও কনফিগারেশন
Xcode প্রজেক্ট ফাইলস, Info.plist, ও Swift/Objective-C সোর্স ফাইলস

c) lib/:

Flutter অ্যাপের মেইন Dart কোড
main.dart: অ্যাপের এন্ট্রি পয়েন্ট
অন্যান্য Dart ফাইলস (উইজেট, মডেল, সার্ভিস ইত্যাদি)

d) test/:

ইউনিট ও ইন্টিগ্রেশন টেস্ট ফাইলস

e) web/:

ওয়েব-স্পেসিফিক ফাইলস (যদি ওয়েব সাপোর্ট এনাবল থাকে)

f) .gitignore:

Git রিপোজিটরিতে ট্র্যাক না করার ফাইলের লিস্ট

g) .metadata:

Flutter প্রজেক্টের মেটাডাটা

h) pubspec.yaml:

প্রজেক্টের কনফিগারেশন ফাইল
ডিপেন্ডেন্সি, অ্যাসেট, ফন্ট ইত্যাদি ডিফাইন করা হয়

i) README.md:

প্রজেক্টের ডকুমেন্টেশন
প্রজেক্ট রান করা:

a) Android এমুলেটর সেটআপ:

Android Studio খুলুন
Tools > AVD Manager এ যান
“Create Virtual Device” ক্লিক করুন
একটি ডিভাইস সিলেক্ট করুন (যেমন: Pixel 4)
একটি সিস্টেম ইমেজ সিলেক্ট করুন (latest stable version)
Finish ক্লিক করে এমুলেটর তৈরি করুন

b) VS Code এ প্রজেক্ট রান করা:

VS Code এর নিচে Status Bar এ দেখুন “No Devices”
ক্লিক করে আপনার এমুলেটর সিলেক্ট করুন
lib/main.dart ফাইল খুলুন
Run > Start Debugging (F5) সিলেক্ট করুন
কোড এডিটিং ও হট রিলোড:

a) lib/main.dart ফাইল এডিট করুন:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

b) হট রিলোড:

কোড পরিবর্তন করার পর, অটোমেটিক হট রিলোড হবে
যদি অটোমেটিক না হয়, VS Code এর Debug Console এ ‘r’ প্রেস করুন
বহুল ব্যবহৃত Flutter কমান্ড:

a) flutter create <project_name>: নতুন প্রজেক্ট তৈরি
b) flutter run: প্রজেক্ট রান করা
c) flutter pub get: ডিপেন্ডেন্সি ইনস্টল করা
d) flutter clean: বিল্ড ফোল্ডার পরিষ্কার করা
e) flutter upgrade: Flutter SDK আপডেট করা
f) flutter doctor: সিস্টেম সেটআপ চেক করা
g) flutter devices: কানেক্টেড ডিভাইস দেখা
h) flutter emulators: এভেইলেবল এমুলেটর দেখা
i) flutter emulators –launch <emulator_id>: এমুলেটর লঞ্চ করা

VS Code এ দ্রুত কোডিং টিপস:

a) কোড স্নিপেট:

stless: StatelessWidget স্কেলেটন কোড
stful: StatefulWidget স্কেলেটন কোড
lst: ListView.builder স্কেলেটন

b) Flutter Outline:

VS Code এর Explorer ভিউতে Flutter Outline ট্যাব ব্যবহার করুন
উইজেট হায়ারার্কি দেখা ও এডিট করা সহজ হয়

c) Flutter Performance:

Debug Console এ Performance ট্যাব দেখুন
UI পারফরম্যান্স ও ফ্রেম টাইমিং অ্যানালাইজ করুন

d) Dart DevTools:

Run > Start Debugging with Dart DevTools
উইজেট ইন্সপেক্টর, পারফরম্যান্স গ্রাফ, মেমরি অ্যালোকেশন দেখুন

e) কিবোর্ড শর্টকাট:

Ctrl + Space: কোড কমপ্লিশন
Ctrl + .: Quick Fix অপশন
F2: রিনেম ভেরিয়েবল/ফাংশন/ক্লাস
Ctrl + Shift + R: রিফ্যাক্টর অপশন

Flutter

How can we help?