কোন ভার্সন ইন্সটল দেওয়া আছে তা জানতে

flutter --version

নতুন Flutter প্রোজেক্ট বানাতে

flutter create <আপনার_প্রোজেক্টের_নাম>

যেসব ডিভাইস আপনার পিসির সাথে কানেক্টেড আছে তা জানতে

flutter devices

ওয়েব সাপোর্ট সহ নতুন প্রোজেক্ট বানাতে

flutter channel beta
 flutter upgrade
 flutter config --enable-web

বর্তমানে কোন চ্যানেলে আছেন সেটা দেখতে

flutter channel

চ্যানেল পরিবর্তন করতেে

flutter channel dev/master/stable/beta

ঠিকঠাক মত ইন্সটল হয়েছে কিনা জানতে

flutter doctor

ঠিকঠাক মত ইন্সটল হয়েছে কিনা আরো এডভান্স জানতে

flutter doctor -v

অর্গানাইজেশন/প্রতিষ্ঠানের নাম সেট করতে

flutter create --org com.yourorg your_project

ট্যাপ করে

onTap

ট্যাপ করে উপরে নিলে

onTapUp

ট্যাপ করে নিচে নিলে

onTapDown

ট্যাপ করে ধরে রাখলে

onLongPress

দুবার ট্যাপ করলে

onDoubleTap

সমতল ভাবে টেনে ধরলে

onHorizontalDragStart

খাড়া ভাবে টেনে ধরলে

onVerticalDragDown

‍নির্দিষ্ট জায়গায় ড্রাগাবল ইউজ

onPanDown

স্কেলের উপর ডিপেন্ড করে

onScaleStart

FVM কি?

FVM (Flutter Version Management) হলো একটি ভার্শন ম্যানেজমেন্ট টুল, যা দিয়ে খুব সহজেই একই পিসিতে Flutter এর বিভিন্ন ভার্শন ব্যবহার করতে পারবেন।

MacOS এ FVM ইনস্টল করুন

brew tap leoafarias/fvm
brew install fvm

Windows এ FVM ইনস্টল করুন

choco install fvm

Linux এ FVM ইনস্টল করুন

brew tap leoafarias/fvm
brew install fvm

FVM অ্যাক্টিভেট করতে

dart pub global activate fvm

Custom Path কনফিগ করার জন্য

fvm config --cache-path <CACHE_PATH>

অটোমেটিক্যালি SDK এর path সুইচ করতে চাইলে .vscode/settings.json এ যেয়ে এড করুন

{
  "dart.flutterSdkPath": ".fvm/flutter_sdk",
  "search.exclude": {
    "**/.fvm": true
  },
  "files.watcherExclude": {
    "**/.fvm": true
  }
}

ভার্শন ইনস্টল করুন

fvm install <version>

প্রজেক্টে একটি ভার্শন ব্যবহার করুন

fvm use <version>

প্রজেক্টের সকল ভার্শন দেখুন

fvm list

ডকুমেন্টেশন দেখুন

fvm --help

fvm use কমান্ড দেওয়ার পর, ভার্সন চেঞ্জ না হলে

সবার নিচের বার থেকে Dart sdk রিলোড করুন

FVM ব্যবহারের সময়, ফ্লাটারের ব্যাসিক কমান্ডগুলোর আগে fvm যোগ করে নিতে হবে। যেমন:

”fvm flutter pub get”, “fvm flutter run”

অফিসিয়াল সাইট

https://fvm.app

RefreshIndicator কি?

RefreshIndicator একটি Flutter উইজেট, যা দিয়ে ফ্লাটার এপে খুব সহজেই পুল টু রিফ্রেশ ফাংশনালিটি তৈরি করা যায়।

ব্যবহার করার নিয়ম

RefreshIndicator(
  onRefresh: () async {
    // আপনার রিফ্রেশ লজিক লিখুন
 },

onRefresh প্যারামিটার:

onRefresh একটি required কলব্যাক ফাংশন, যা একটি ভয়েড ফিউচার `` Future<void> `` রিটার্ন করে। পেইজ রিফ্রেশ করার জন্য, এর ভিতরেই আপনার লজিক কল করতে হবে।

RefreshIndicator এড করার পরও কাজ করছে না?

RefreshIndicator ব্যবহারের সময়, ৪/৫ টি ইউজকেস অবশ্যই মাথায় রাখতে হবে

কেস #১. যেকোনো লিস্টের উপর ব্যবহার করা

RefreshIndicator শুধুমাত্র যেকোনো লিস্ট টাইপের উইজেটের উপরই ব্যবহার করা যাবে। যেমনঃ ListView, GridView, SingleChildScrollView, CustomScrollView ইত্যাদি।

কেস #২. লিস্টের উপর ব্যবহার করার পরও, যদি RefreshIndicator কাজ না করে

ওই লিস্ট টাইপ উইজেটের physics প্যারামিটারে, AlwaysScrollableScrollPhysics ইউজ করতে হবে। 

 physics: AlwaysScrollableScrollPhysics(),

কেস #৩. আপনি যদি অন্য কোনো ScrollPhysics ব্যবহার করতে চান

তাহলে সেই ScrollPhysics এর parent প্যারামিটারে, AlwaysScrollableScrollPhysics অ্যাড করতে হবে।

 physics: const BouncingScrollPhysics(
  parent: AlwaysScrollableScrollPhysics()
 ),

কেস #৪. shrinkWrap প্যারামিটার ব্যবহার করলে

RefreshIndicator এর নিচে থাকা, লিস্ট টাইপ উইজেটের shrinkWrap প্যারামিটারটি অবশ্যই false থাকতে হবে। 

 shrinkWrap: false,

কেস #৫. আপনি যদি লিস্টভিউ ছাড়া, অন্য কোনো কাস্টম উইজেট ব্যবহার করতে চান

আপনাকে Stack উইজেট ব্যবহার করতে হবে। এবং সেই Stack এর ভিতরে দুইটি উইজেট থাকবে। একটি হবে আপনার কাস্টম উইজেট, অন্যটি ListView. 

 RefreshIndicator(
  onRefresh: () async { 
   print('refreshing'); 
  },
  child: Stack(
   children: [
    YourWidget(),
    ListView(
     physics: const AlwaysScrollableScrollPhysics(),
    ),
   ],
  ),
 ),

A RenderFlex overflowed by 0.02 pixels on the bottom.

স্ক্রিনের হাইটের চেয়ে এলিমেন্টগুলার হাইট বড় হয়ে গেছে। যার কারনে overflow হচ্ছে। প্যারেন্ট উইজেটে Expanded ব্যবহার করুন অথবা ফিক্সড হাইট দিয়ে SingleChildScrollView ব্যবহার করুন।

BoxConstraints forces an infinite width.

Expanded উইজেটটি Row বা Column এর ভিতরে আছে কিনা তা চেক করুন।

setState() or markNeedsBuild() called during widget creation.

initState এ setState ব্যবহার করা যাবে না। এটি ব্যবহার করতে হলে একটি ডিলে মেথড ব্যবহার করতে হবে।

WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

renderBox was not laid out: RenderFlex object was given an infinite height during layout.

SingleChildScrollView টি একটি Container বা অন্য কোন ফিক্সড হাইটের উইজেটের ভিতরে ইউজ করতে হবে।

Don't use 'BuildContext's across async gaps. Try rewriting the code to not reference the 'BuildContext'.

StatelessWidget এ (context.mounted) এবং StatefulWidget এ (mounted) দিয়ে চেক করুন, উইজেটটি ফ্লাটারের উইজেট ট্রি'তে মাউন্ট হয়েছে কিনা।

Duplicate GlobalKey detected in widget tree.

#১. GlobalKey অবশ্যই ইউনিক হতে হবে। একই ক্লাসের দুইটি উইজেটে একই GlobalKey ব্যবহার করা যাবে না।
#২. প্রয়োজনে ValueKey অথবা ObjectKey ব্যবহার করতে হবে।

The argument type 'String?' can't be assigned to the parameter type 'String'

ডাটা টাইপ চেঞ্জ হওয়ার কারনে এই এরর আসছে। null-aware operators('?' / '??') ব্যবহার করুন।

Execution failed for task ':app:processDebugResources'.

#১. কনসোলে, flutter clean রান করে, পরে flutter pub get রান করুন। 
#২. এনড্রয়েড গ্রেডেল ফাইলে (android/app/build.gradle) সব ঠিক আছে কিনা চেক করুন।

MissingPluginException(No implementation found for method x on channel y)

flutter pub get দিয়ে pubspec.yaml আপডেট করুন।

রিভারপড কি?

রিভারপড, ফ্লাটারের একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি।

কেন রিভারপড ব্যবহার করবেন?

রিভারপড দিয়ে এ্যাপের নেটওয়ার্ক রিকোয়েস্ট ও ইরর হ্যান্ডেলের মতো কমপ্লেক্স কাজগুলো খুব সহজেই করে ফেলা যায়। এমনকি ২/১ লাইন এক্সট্রা কোড লিখেই, এ্যাপে টেম্পোরারি ক্যাশিং ফাংশনালিটি ইমপ্লিমেন্ট করতে পারবেন।

কিভাবে রিভারপড ইনস্টল করবেন?

pubspec.yaml ফাইলে নিচের ডিপেন্ডেন্সিগুলো অ্যাড করুন।

flutter_riverpod: ^2.4.4
riverpod_annotation: ^2.2.1

কিভাবে রিভারপড ব্যবহার করবেন?

রিভারপডে মূলত ছয়টি প্রোভাইডার আছে। বিভিন্ন ইউজকেসের উপর ডিপেন্ড করে, এ প্রোভাইডারগুলো ব্যবহার করেই আপনি এ্যাপের স্টেট ম্যানেজ করতে পারবেন। এই প্রোভাইডারগুলো হলো: 

1. Provider
2. StateProvider
3. FutureProvider
4. StreamProvider
5. NotifierProvider
6. StateNotifierProvider

ProviderScope (প্রোভাইডার স্কোপ)

প্রোভাইডারগুলো কাজ করার জন্য, অবশ্যই এ্যাপের root এ ProviderScope এড করতে হবে। 

void main() {
  runApp(
    ProviderScope(child: MyApp()),
  );
}

Provider (প্রোভাইডার)

এটি একটি বেসিক ইমিউটেবল প্রোভাইডার, যা এ্যাপের অন্য যে কোনো জায়গায় ডেটা অ্যাক্সেস করার জন্য ব্যবহৃত হয়। 

final intProvider = Provider<int>((ref) => 42);

StateProvider (স্টেট প্রোভাইডার)

এটিও Provider এর মতো, তবে এটি মিউটেবল। আপনি প্রয়োজনে এর স্টেট চেঞ্জ করতে পারবেন। 

final counterProvider = StateProvider<int>((ref) => 0); 

স্টেট চেঞ্জ করার জন্য,
ref.read(counterProvider).state = 1;

FutureProvider (ফিউচার প্রোভাইডার)

এটি ফিউচার ডেটা রিটার্ন করে। নেটওয়ার্ক কলে নরমাল ডেটা ফেচিংএর সময় FutureProvider ব্যবহার করা যায়। 

final myFutureProvider  = FutureProvider<String>((ref) async {
  // Perform an asynchronous operation
  return fetchData();
});

StreamProvider (স্ট্রিম প্রোভাইডার)

এটিও FutureProvider এর মতোই, তবে স্ট্রিম ডেটা রিটার্ন করে। রিয়েল টাইম আপডেট বা সকেটের কাজে StreamProvider ব্যবহার করা যায়। 

final myStreamProvider = StreamProvider<String>((ref) {
  // Start listening to a stream
  return someStream();
});

NotifierProvider (নোটিফায়ার প্রোভাইডার)

Notifier ক্লাসের একটা instance তৈরি করার জন্য NotifierProvider ব্যবহার হয়। Notifier দিয়ে আপনি কমপ্লেক্স স্টেট লজিক ম্যানেজ করতে পারবেন। 

final myNotifierProvider = NotifierProvider<MyNotifier, String>((ref){
  return MyNotifier();
});

StateNotifierProvider (স্টেট নোটিফায়ার প্রোভাইডার)

এটিও NotifierProvider এর মতোই, তবে মিউটেবল স্টেট ম্যানেজ করার জন্য ব্যবহার করা হয়। এটি StateNotifier ক্লাসের একটা instance তৈরি করে। 

final myStateNotifierProvider = StateNotifierProvider<MyStateNotifier, String>((ref) {
  return MyStateNotifier();
});

এটা এমন একটা উইজেট যেটা বিন্যাস্ত করা যায়না

StatelessWidget

এটা এমন একটা উইজেট যেটা বিন্যাস্ত করা যায়

StatefulWidget

চাইল্ডকে মাঝ বরাবর নিয়ে আসবে

Center

উইজেটের চাইল্ডকে কলাম ভিউ করবে

Column

উইজেটের চাইল্ডকে রো ভিউ করবে

Row

উইজেটের চাইল্ডকে লিস্ট ভিউ করবে

ListView

উইজেটের চাইল্ডকে গির্ড ভিউ করবে

GridView

‍প্লাগিন ইন্সটাল করতে

Plugins

প্যাকেজ ইন্সটাল করতে

Packages

স্টেটলেস উইজেটের জন্য

Container

ইমেজ ইউজ করতে

Image

টেক্সট ইউজ করতে

Text

ম্যাটেরিয়াল ডিজাইন লে-আউট দেওয়ার জন্য

Scaffold

অ্যাপের টাইটেল

AppBar

স্পেস নিতে

SizedBox

জেশ্চার অপশন

GestureDetector

আইকন ইউজ করতে

Icon

পেজ ভিউ এর জন্য

PageView

লেআউট বিল্ড করতে

LayoutBuilder

চাইল্ড উইজেটের ভবিষ্যৎ বিল্ড

FutureBuilder

স্ট্রিম বিল্ডার

StreamBuilder

পুল-টু-রিফ্রেশ করতে

RefreshIndicator

বটোম শিট দেখাতে

BottomSheet

কার্ড দেখাতে

Card

চেকবক্স দেখাতে

Checkbox

চিপস দেখাতে

Chip

ড্রয়ার দেখাতে

Drawer

স্লাইডার দেখাতে

Slider

স্নাকবার দেখাতে

Snackbar

সুইচ দেখাতে

Switch

ট্যাব বার দেখাতে

TabBar

টেবল দেখাতে

Table