Flutter Complete Guide with MCQs
# Flutter In-Depth Notes
## 1. Introduction to Flutter
- Flutter: Open-source UI toolkit by Google.
- Platform Support: Android, iOS, Web, Windows, macOS, Linux.
- Programming Language: Dart (supports OOP, sound null safety).
- Use Case: Mobile apps, web apps, desktop apps.
- Rendering Engine: Skia – renders widgets on a canvas.
- Hot Reload: See UI changes instantly without app restart.
## 2. Flutter App Structure
- `main.dart`: Entry point of Flutter app.
- `MaterialApp`: Root widget that holds navigation, theme, and routing.
- Common Folder Structure:
- `models/`: Dart data classes.
- `screens/`: Page-wise UI components.
- `widgets/`: Reusable UI elements.
- `services/`: API or DB interaction logic.
- `providers/`: State management logic.
- `utils/`: Helper functions, constants, validators.
## 3. Widgets Overview
### StatelessWidget:
- Static UI, no internal state.
```dart
class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hi!');
}
}
```
### StatefulWidget:
- Manages dynamic state and UI changes.
```dart
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int count = 0;
void increment() => setState(() => count++);
}
```
- Lifecycle Methods: initState(), build(), didUpdateWidget(), dispose()
## 4. Navigation in Flutter
- `Navigator.push()`, `Navigator.pop()` for stack-based navigation.
- Named routes with `Navigator.pushNamed()`.
- Advanced routing: `go_router`, `auto_route`, `GetX`.
## 5. State Management
- `setState()`: Local widget state.
- Provider: Simple global state management.
- Riverpod: Modern and testable version of Provider.
- BLoC: Stream-based state separation.
- GetX: Lightweight, all-in-one solution.
## 6. Firebase Authentication
- Packages: `firebase_core`, `firebase_auth`
- Initialization:
```dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
```
- Login/Signup: `createUserWithEmailAndPassword`, `signInWithEmailAndPassword`
- Logout: `signOut()`
- Auth State Check: `authStateChanges()` stream.
## 7. Shared Preferences
- Lightweight local storage for small key-value pairs.
```dart
final prefs = await SharedPreferences.getInstance();
prefs.setBool('isLoggedIn', true);
```
## 8. HTTP & API Integration
- Package: `http`
- Making requests:
```dart
final response = await http.get(Uri.parse('https://api.com/data'));
```
- Parse JSON: `jsonDecode(response.body)`
- Use `try-catch` for error handling.
## 9. Forms & Validation
- Use `Form`, `TextFormField`, and `GlobalKey<FormState>`.
```dart
Form(
key: _formKey,
child: TextFormField(
validator: (value) => value!.isEmpty ? 'Required' : null,
),
);
```
## 10. Project Ideas for Practice
- Firebase-based login/signup
- Course listing app with API
- CRUD operations with Firebase or mock API
- Quiz app with result summary
- Theme toggling using Provider + SharedPreferences
## 11. Theming
- Define light and dark themes in `MaterialApp`
```dart
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system,
```
## 12. Quiz Logic
- Store MCQs in JSON/API.
- Track user’s selection and calculate score.
- Save data locally or remotely.
## 13. Lists and Grids
- `ListView.builder()` and `GridView.count()` to display items.
## 14. Custom Reusable Widgets
```dart
class AppButton extends StatelessWidget {
final String label;
final VoidCallback onTap;
AppButton({required this.label, required this.onTap});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onTap,
child: Text(label),
);
}
}
```
## 15. Error Handling
- Use `try-catch` for async operations.
- Show errors using `ScaffoldMessenger.of(context).showSnackBar()`.
## 16. Testing
- Use `flutter_test`, `mockito`
- Widget testing example:
```dart
testWidgets('Login screen has text', (tester) async {
await tester.pumpWidget(MyApp());
expect(find.text('Login'), findsOneWidget);
});
```
## 17. Clean Architecture
- data/: API and DB code
- domain/: business logic and models
- presentation/: UI code
- Use MVVM or layered structure
## 18. Best Practices
- Use const constructors.
- Use constants file for colors, strings.
- Avoid large widgets → break into smaller components.
- Use linter, formatters, and follow Dart style guide.
- Dispose controllers (TextEditingController, ScrollController).
