ফ্লাটারে সূচনা

ফ্লাটার ইন্সটল

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

তাহলে New Flutter Project অপশন পাওয়া যাবে। উপরের ফ্লাগিন ইন্সটল করার পর আমাদের ফ্লাটার SDK ডাউনলোড করে নিতে হবে। যে লোকেশনে ফ্লাটার SDK ক্লোন করতে চান, টার্মিনাল বা কমান্ড লাইন থেকে সে লোকেশে গিয়ে নিচের কমান্ড রান করলে SDK ডাউনলোড হবে। অথবা ফ্লাটার get started পেইজ থেকেও ডাউনলোড করে নিতে পারেন।

git clone https://github.com/flutter/flutter.git -b stable

এরপর অ্যান্ড্রয়েড স্টুডিও থেকে New Flutter Project এ ক্লিক করে নতুন ফ্লাটার প্রজেক্ট তৈরি করব।

এখানে Flutter SDK লোকেশন সিলেক্ট করতে হবে। ফ্লাটার SDK ডাউনলোড অথবা ক্লোন করার পর যে লোকেশনে রেখেছি, ঐ লোকেশন সিলেক্ট করে দিতে হবে। এরপর Next এ ক্লিক করব।

এখানে প্রজেক্টের একটা নাম দিব। কোথায় সেভ করব, সেই লোকেশন সিলেক্ট করব। এবং কোন কোন ফ্লাটফর্মের জন্য অ্যাপ বানাবো, সেগুলো সিলেক্ট করব। এবং ফাইনালি Create বাটনে ক্লিক করব। তাহলে ফ্লাটার প্রজেক্ট তৈরি হবে।

প্রজেক্ট ভার্চুয়াল ডিভাইস, রিয়েল ডিভাইস, ব্রাউজার অথবা কম্পিউটারে রান করা যাবে।

প্রথমে Chrome(web) এ রান করে দেখতে পারেন। এরপর সিমুলেটর বা রিয়েল ডিভাইসে রান করতে পারেন।

ফ্লাটার কোড

ফ্লাটারের কোড গুলো থাকে lib/main.dart ফোল্ডারে। ঐখানে ডিফল্ট ভাবে কিছু কোড থাকার কথা। চাইলে সেগুলো মডিফায় করতে পারেন। অথবা নিচের মত করে লিখতে পারেনঃ

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(
          child: Text('Welcome to Flutter!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }
}

সাধারণত যখন আমরা সিমুলেটরে রান করি, তখন ডান কোনায় ডিভাগ ব্যাজ দেখায়। তা হাইড করতে debugShowCheckedModeBanner: false, ব্যবহার করতে পারি।

একেবারে মিনিমাল ফ্লাটার অ্যাপের স্ট্র্যাকচার নিচের মতঃ

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello, world!',
       style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold)
      ),
    );
  }
}

প্রতিটা অ্যাপের স্টার্টিং পয়েন্ট থাকে। ফ্লাটার অ্যাপের স্টার্টিং পয়েন্ট হচ্ছে void main() {…} । এর ভেতর একটা উইজেট পাস করেছি। যে উইজেট আমরা অ্যাপ রান করলে দেখতে পাবো।

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

ফ্লাটার অ্যাপের সব কিছুই এক একটা উইজেট। একটা উইজেটের ভেতর আরেকটা উইজেট ব্যবহার করতে পারি।

ভিজ্যুয়াল স্টুডিও কোডে ফ্লাটার অ্যাপ

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