ফ্লাটার

Flutter গুগলের তৈরি একটি ফ্রেমওয়ার্ক যার মাধ্যমে android,iOS app এবং ওয়েবসাইট শুধুমাত্র একটি কোডবেস ব্যবহার করে তৈরি করা যায়। Flutter প্রতিটি প্ল্যাটফর্মের জন্য নেটিভলি কম্পাইল্ড হওয়াতে অন্যান্য ফ্রেমওয়ার্ক থেকে অনেক দ্রুত কাজ করে।

কন্ট্রিবিউটর

শেয়ার করুন

প্রিন্ট করুন

ফ্লাটার সিএলআই টুলস (Flutter CLI tools)

কোন ভার্সন ইন্সটল দেওয়া আছে তা জানতে
```
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
```

FVM (Flutter Version Management)

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
```

ফ্লাটারের কমন কিছু Error এবং সেগুলার Fix

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 আপডেট করুন।

কিছু ইম্পরট্যান্ট ফ্লাটার শীট

এটা এমন একটা উইজেট যেটা বিন্যাস্ত করা যায়না
```
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
```

জেশ্চার ডিটেক্ট করা জন্য

ট্যাপ করে
```
onTap
```
ট্যাপ করে উপরে নিলে
```
onTapUp
```
ট্যাপ করে নিচে নিলে
```
onTapDown
```
ট্যাপ করে ধরে রাখলে
```
onLongPress
```
দুবার ট্যাপ করলে
```
onDoubleTap
```
সমতল ভাবে টেনে ধরলে
```
onHorizontalDragStart
```
খাড়া ভাবে টেনে ধরলে
```
onVerticalDragDown
```
‍নির্দিষ্ট জায়গায় ড্রাগাবল ইউজ
```
onPanDown
```
স্কেলের উপর ডিপেন্ড করে
```
onScaleStart
```

RefreshIndicator - রিফ্রেশ ইন্ডিকেটর (পুল টু রিফ্রেশ)

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(),
    ),
   ],
  ),
 ),

Riverpod (রিভারপড)

রিভারপড কি?

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

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

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

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

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();
});