দারুণ! তুমি চাইছো main.dart ফাইলকে পরিষ্কার করে নতুনভাবে তৈরি করতে এবং অন্য একটি ফাইল থেকে Widget import করে সেটাকেই অ্যাপের Entry Point বানাতে — এটা Flutter এর প্রফেশনাল প্র্যাকটিসের অংশ। আমি নিচে ধাপে ধাপে + শর্টকাট সহ বিস্তারিত দেখাচ্ছি:
✅ পার্ট ১: নতুন main.dart কে পরিষ্কার করে নতুন ফাইল থেকে runApp() করা
1️⃣ একটি নতুন ফাইল তৈরি করো
VS Code-এ:
lib/ফোল্ডারে ➤home_screen.dartনামে নতুন ফাইল বানাও
🖱️ Shortcut:Ctrl + N➤File > Save As➤lib/home_screen.dart
2️⃣ home_screen.dart ফাইলে কোড লিখো:
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Home Page")),
body: const Center(child: Text("Welcome to Flutter!")),
);
}
}
✅ পার্ট ২: main.dart ফাইলে শুধু এটুকু রাখো:
import 'package:flutter/material.dart';
import 'home_screen.dart'; // Import your widget
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
));
}
✅ শর্টকাট কী (VS Code) টিপস:
| কাজ | শর্টকাট |
|---|---|
| নতুন ফাইল তৈরি | Ctrl + N তারপর Ctrl + S |
| কোড অটো ফরম্যাট | Shift + Alt + F |
| Widget skeleton (stless) | টাইপ করো stless ➤ Enter |
| Widget skeleton (stful) | টাইপ করো stful ➤ Enter |
| হট রিলোড | Debug Console এ r চাপো বা Ctrl + S |
| হট রিস্টার্ট | Debug Console এ R চাপো |
✅ কোডের ফোল্ডার ভিউ (পরে বাড়ানোর জন্য):
lib/
├── main.dart # Entry Point
└── home_screen.dart # আলাদা Widget ফাইল
✅ টিপস:
main.dartফাইল সবসময় ছোট রাখো- সব UI component আলাদা ফাইলে রাখলে মেইনটেইন করা সহজ হয়
- প্রতিটি Widget-এ
constব্যবহার করলে পারফরম্যান্স ভালো হয়