Skip to content

Flutter Guide

Ali GÖKÇEK edited this page Apr 24, 2025 · 1 revision

🐦 Flutter Basics – Quick Start 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.


📱 What is 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.


🧠 Why Flutter?

  • 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.

📁 Project Structure Overview

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)

🛠️ Setting Up Flutter

Step 1: Install Flutter SDK

Follow the guide at [Flutter Installation Docs](https://docs.flutter.dev/get-started/install) based on your OS.

Step 2: Verify Installation

Run this in your terminal:

flutter doctor

This checks if all required dependencies are installed.

Step 3: Create a New Project

flutter create my_flutter_app
cd my_flutter_app
flutter run

You can now see the default Flutter counter app running!


📚 Key Concepts in Flutter

1. Widgets

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!');
  }
}

2. Material vs Cupertino

  • Material: Android-style UI components.
  • Cupertino: iOS-style UI components.

You can mix and match based on platform:

Platform.isIOS ? CupertinoButton(...) : ElevatedButton(...);

3. Layouts

Flutter layouts are built using nested widgets:

  • Column, Row, Stack, Expanded, Container
  • Everything is flexible and composable

4. Navigation

Use Flutter’s built-in navigation system:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

5. State Management

Common approaches:

  • setState (basic)
  • Provider (recommended)
  • Riverpod, Bloc, Redux (advanced)

✨ Hot Reload vs Hot Restart

  • Hot Reload: Injects updated code into running app (UI and logic changes).
  • Hot Restart: Rebuilds entire app from scratch (clears app state).

🔌 Adding Packages

Flutter uses pubspec.yaml to manage dependencies. Example:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

Then run:

flutter pub get

🧪 Testing in Flutter

Flutter supports:

  • Unit tests (test/ folder)
  • Widget tests
  • Integration tests (with integration_test package)

🌐 Build Targets

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

🎨 Theming & Styling

Customize global themes:

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: GoogleFonts.latoTextTheme(),
  ),
)

📘 Recommended Learning Resources


✅ Summary

  • 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! 🚀

👥 Team Members

📌 Milestone Report

💬 Communication Plan

📋 Meeting Agendas

📅 Meeting Notes

📂 Backend Subgroup Meeting Notes

📂 Frontend Subgroup Meeting Notes

📂 Mobile Subgroup Meeting Notes

📚 Lecture Notes

🛠️ Team Best Practices

✍️ Guidance

❗ Issues

🚀 Project

🧱 Diagrams

👩‍💼 User Scenarios

Click to Expand ⬇️

🗂️ Templates

Clone this wiki locally