-
Notifications
You must be signed in to change notification settings - Fork 1
Flutter Guide
Welcome to the Flutter Basics wiki page! This guide is intended to help our CMPE352 project members quickly become familiar with Flutter. It covers essential concepts, tools, and best practices for creating cross-platform applications using Flutter.
Flutter is Google’s open-source UI toolkit that enables developers to build natively compiled applications for mobile (iOS and Android), web, and desktop from a single codebase. Flutter uses the Dart programming language and offers a reactive-style framework based on widgets.
- Single Codebase: Write once, run everywhere.
- Hot Reload: Instantly view code changes.
- Rich UI: Customizable widgets and pixel-perfect designs.
- Fast Development: Streamlined tools and performance.
- Strong Community: Backed by Google with vast documentation and support.
A typical Flutter project has the following structure:
my_flutter_app/
├── android/ # Android native files
├── ios/ # iOS native files
├── lib/ # Dart source files (main code here)
│ └── main.dart # Entry point of the app
├── test/ # Unit and widget tests
├── pubspec.yaml # Project metadata and dependencies
└── build/ # Generated files (after build)
Follow the guide at [Flutter Installation Docs](https://docs.flutter.dev/get-started/install) based on your OS.
Run this in your terminal:
flutter doctor
This checks if all required dependencies are installed.
flutter create my_flutter_app
cd my_flutter_app
flutter run
You can now see the default Flutter counter app running!
Widgets are the building blocks of a Flutter app.
- StatelessWidget: No mutable state.
- StatefulWidget: Maintains dynamic state (e.g., counter app).
Example:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello Flutter!');
}
}
- Material: Android-style UI components.
- Cupertino: iOS-style UI components.
You can mix and match based on platform:
Platform.isIOS ? CupertinoButton(...) : ElevatedButton(...);
Flutter layouts are built using nested widgets:
- Column, Row, Stack, Expanded, Container
- Everything is flexible and composable
Use Flutter’s built-in navigation system:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewPage()),
);
Common approaches:
- setState (basic)
- Provider (recommended)
- Riverpod, Bloc, Redux (advanced)
- Hot Reload: Injects updated code into running app (UI and logic changes).
- Hot Restart: Rebuilds entire app from scratch (clears app state).
Flutter uses pubspec.yaml
to manage dependencies.
Example:
dependencies:
flutter:
sdk: flutter
http: ^0.14.0
Then run:
flutter pub get
Flutter supports:
- Unit tests (
test/
folder) - Widget tests
- Integration tests (with
integration_test
package)
Flutter supports:
- Android
- iOS
- Web
- macOS / Windows / Linux (via
flutter config
)
To build for different platforms:
flutter run -d chrome # For web
flutter run -d android # Android device/emulator
flutter run -d ios # iOS Simulator
Customize global themes:
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: GoogleFonts.latoTextTheme(),
),
)
- [Flutter Official Docs](https://docs.flutter.dev/)
- [Flutter YouTube Channel](https://www.youtube.com/flutterdev)
- [Dart Language Tour](https://dart.dev/guides/language/language-tour)
- [Awesome Flutter (GitHub)](https://github.com/Solido/awesome-flutter)
- Flutter is powerful, fast, and developer-friendly.
- You only need Dart to create native-quality apps across platforms.
- Use this guide to explore, practice, and contribute confidently.
💬 Have questions? Drop them in the team chat or create an issue tagged flutter-help
.
Happy coding! 🚀
- Celil Özkan (Backend)
- Cem Sarpkaya (Backend)
- Özgür Savaşçıoğlu (Backend)
- Ahmet Hacıoğlu (Frontend)
- Ahmet Selçuk Ersoy (Frontend)
- Bahadır Demirel (Frontend)
- Muhammed Ekinci (Frontend)
- Ali Gökçek (Mobile)
- Seyit Mustafa Demir (Mobile)
- Meeting Agenda 1
- Meeting Agenda 2
- Meeting Agenda 3
- Meeting Agenda 4
- Meeting Agenda 5
- Meeting Agenda 6
- Meeting Notes 1 (16.02.2025)
- Meeting Notes 2 (24.02.2025)
- Meeting Notes 3 (27.02.2025)
- Meeting Notes 4 (04.03.2025)
- Meeting Notes 5 (06.03.2025)
- Meeting Notes 6 (13.03.2025)
- Meeting Notes 7 (17.03.2025)
- Meeting Notes 8 (21.04.2025)
- Meeting Notes 9 (28.04.2025)
- Meeting Notes 10 (01.05.2025)
- Meeting Notes 11 (06.05.2025)
- Lecture Notes 1 (13.02.2025)
- Lecture Notes 2 (20.02.2025)
- Lecture Notes 3 (27.02.2025)
- Lecture Notes 4 (06.03.2025)
- Lecture Notes 5 (13.03.2025)
Click to Expand ⬇️
- Scenario 1 - User Register
- Scenario 2 - Dietitian Register
- Scenario 3 - User Login
- Scenario 4 - User Deletion
- Scenario 5 - Upload & Edit Recipe
- Scenario 6 - Single Meal Planning
- Scenario 7 - Grocery Price Comparison
- Scenario 8 - Community Forum
- Scenario 9 - Recipe Discovery & Filter
- Scenario 10 - Local Food Discovery
- Scenario 11 - Nutritional Guidance Interaction
- Scenario 12 - Market Inventory Management
- Scenario 13 - Profile Management and Preference Settings
- Scenario 14 - Rate and Comment the Recipe by User
- Scenario 15 - Bookmark a Meal and Access it in Profile Page
- Scenario 16 - Adding Nutrition Tips to a Dietitian Profile
- Scenario 17 - User Forget Password
- Scenario 18 ‐ User Follows Unfollows Users
- Scenario 19 - Allergen Alert and Meal Plan Adjustment
- Scenario 20 - Dietitian Rating of a Recipe