All the reading

Flutter

7 lessons, about 30 minutes. The check's questions come from these.

Building first screens

1. Create your first Flutter screen

5 min

Start simple

Your first goal is not a full app. It is one clean screen that opens on Android and looks like something you chose, not the default counter app.

Flutter builds UI with widgets. Text is a widget. Padding is a widget. A Column is a widget. You combine small widgets to make a screen.

Key point

Remember this

A Flutter screen is a tree of widgets. Your main job is to write a build() method that describes what should appear on the screen.

Some widgets take one child. Others take many children. Center has child. Column has children.

Your to-do

Create the app

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open a terminal in the folder where you keep college or hackathon projects.
Run flutter doctor and fix only the blocking Android setup issues for now.
Create a new project with flutter create.
Move into the project folder.
Run it on your connected phone or Android Emulator.

0 of 5 done

flutter doctor
flutter create first_flutter_screen
cd first_flutter_screen
flutter devices
flutter run

Example

Replace main.dart

Open lib/main.dart. Replace everything with this screen.

This example is a simple campus food finder landing screen. Change the text to your own app idea, such as notes, hostel complaints, event tracker, or UPI expense log.

2. Use stateless and stateful widgets

4 min

Key point

The core choice

Use StatelessWidget for UI that does not manage changing data. Use StatefulWidget when the widget must remember something that can change while the app runs.

Your widget’s build() method describes the UI. In a stateful widget, the State class holds the changing values and calls setState() when they change.

Think in widgets

In Flutter, almost everything on screen is a widget. Text, buttons, rows, columns, padding, and alignment are all widgets.

You build larger screens by composing smaller widgets. Some widgets take one child. Others take many children.

Your to-do

Pick the type

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Use StatelessWidget for a title card, app logo, static profile header, or reusable button style.
Use StatefulWidget for counters, form inputs, filters, selected tabs, toggles, or anything the user changes.
Keep static layout in small stateless widgets, even inside a stateful screen.
Move only the changing values into State.

0 of 4 done

Moving and fetching data

3. Move between app screens

4 min

Key point

One route idea

In Flutter, a screen is called a route. A route is just a widget that fills the phone screen.

For simple app demos, use Navigator.push() to open a route and Navigator.pop() to go back.

Why this matters

Your project should not feel like one long page. Recruiters expect common flows like home to details, list to item, or login to dashboard.

In this lesson, keep routing simple. Use Navigator for normal screen changes. Save go_router for apps that need deep links, web URLs, or multiple navigation stacks.

Your to-do

Build two screens

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Saving and shipping app

5. Store data on the device

4 min

Key point

Remember this

Use device storage for small data your app should remember after it closes. Good examples are favourites, dark mode, last selected city, or whether onboarding is done.

For bigger data, like many notes, orders, or chat messages, key-value storage is not enough. Use a database later.

What to store

In your demo app, pick one thing the user can change and expect to see again. A college events app can save bookmarked events. A UPI expense tracker can save the selected month. A jobs app can save saved internships.

This lesson uses shared_preferences, a common Flutter plugin for simple key-value data. Flutter’s own guide shows it for settings like dark mode.

Your to-do

Add persistence

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

10 questions, 7 to pass.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Campus Bites',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Campus Bites'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text(
                'Find affordable food near campus',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 12),
              Text(
                'Track canteen items, prices, and favourites in one place.',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 24),
              Text('Today\'s plan'),
              SizedBox(height: 8),
              Text('1. Browse nearby stalls'),
              Text('2. Compare prices in rupees'),
              Text('3. Save your favourite meals'),
            ],
          ),
        ),
      ),
    );
  }
}

Check your result

Run the app again after saving. If Flutter is already running, press r in the terminal for hot reload. If that does not work, stop and run flutter run again.

Your screen should show your app name, one clear headline, and a short list of what the app will do. This is the seed of your final public repo.

flutter run

Example

Small counter screen

This screen remembers one number. The button changes the number, so it needs StatefulWidget and setState().

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: DemoCounterScreen()));
}

class DemoCounterScreen extends StatefulWidget {
  const DemoCounterScreen({super.key});

  @override
  State<DemoCounterScreen> createState() => _DemoCounterScreenState();
}

class _DemoCounterScreenState extends State<DemoCounterScreen> {
  int likes = 0;

  void addLike() {
    setState(() {
      likes = likes + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Campus Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('Project likes'),
            Text('$likes', style: const TextStyle(fontSize: 40)),
            ElevatedButton(
              onPressed: addLike,
              child: const Text('Add like'),
            ),
          ],
        ),
      ),
    );
  }
}

Example

Static widget example

This card has no changing value inside it. It only displays what it receives, so it should be stateless.

class ProjectCard extends StatelessWidget {
  const ProjectCard({
    super.key,
    required this.name,
    required this.tagline,
  });

  final String name;
  final String tagline;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(name, style: const TextStyle(fontSize: 20)),
            Text(tagline),
          ],
        ),
      ),
    );
  }
}

Example

Working example

Replace your lib/main.dart with this small app. It opens a details screen and sends one string to it.

This pattern is enough for a product page, event page, hostel listing, or internship details page.

import 'package:flutter/material.dart';

void main() {
  runApp(const DemoApp());
}

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    const eventName = 'College Tech Fest';

    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: const Text('View event details'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const DetailScreen(title: eventName),
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String title;

  const DetailScreen({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            const Text('Registration closes this Friday.'),
            const SizedBox(height: 24),
            ElevatedButton(
              child: const Text('Back to home'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

4. Fetch API data safely

5 min

Key point

One safe pattern

Create the request once, store it in a Future, and let FutureBuilder draw the UI states.

Do not call the API directly inside build(). Flutter can rebuild often, and that can repeat the same request.

Your to-do

Add networking

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Run flutter pub add http in your project folder.
Add Android internet permission in android/app/src/main/AndroidManifest.xml.
Create a small model class for the JSON you need.
Write one fetch function that returns a Future.
Use FutureBuilder to show loading, data, or error.

0 of 5 done

flutter pub add http

Example

Android permission

Your app needs permission before it can fetch data on Android. Put this inside the manifest, above the application tag.

If an older tutorial says the default template already has this, do not rely on it.

<uses-permission android:name="android.permission.INTERNET" />

Example

Fetch one item

This example uses JSONPlaceholder because it is public and simple. Replace it later with an API related to your demo app, like events, jobs, products, or tasks.

Keep parsing strict. If the response is not OK, throw an error so the UI can show a useful state.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Album {
  final int id;
  final String title;

  Album({required this.id, required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

Future<Album> fetchAlbum() async {
  final uri = Uri.parse('https://jsonplaceholder.typicode.com/albums/1');
  final response = await http.get(uri);

  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  }

  throw Exception('Failed to load album');
}

Example

Show API states

Make the Future in initState(). Then build only reads that Future.

This gives your recruiter a clean demo: spinner while loading, text when data arrives, and a visible error if something breaks.

class ApiDemoScreen extends StatefulWidget {
  const ApiDemoScreen({super.key});

  @override
  State<ApiDemoScreen> createState() => _ApiDemoScreenState();
}

class _ApiDemoScreenState extends State<ApiDemoScreen> {
  late Future<Album> albumFuture;

  @override
  void initState() {
    super.initState();
    albumFuture = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('API Demo')),
      body: Center(
        child: FutureBuilder<Album>(
          future: albumFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }

            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }

            if (snapshot.hasData) {
              return Padding(
                padding: const EdgeInsets.all(16),
                child: Text(snapshot.data!.title),
              );
            }

            return const Text('No data found');
          },
        ),
      ),
    );
  }
}

Common mistake

Do not write future: fetchAlbum() inside FutureBuilder. It looks short, but it can run again when the widget rebuilds.

Also avoid hiding errors with empty screens. During hackathon demos, a clear error message is better than a blank app.

Tip

Use AI carefully

You can ask ChatGPT or Gemini to create a model class from sample JSON. Paste only public sample data, not private API keys.

Check the AI output for three things: correct field types, null values from the API, and whether it throws a clear error when the request fails.

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Add the http package to your Flutter app.
Add Android internet permission to the manifest.
Create one screen that fetches and displays API data.
Show loading, success, and error states with FutureBuilder.
Run the app and commit the working API screen to your repo.

0 of 5 done

Example

Save a favourite

This example stores one saved item id. Use it inside a StatefulWidget screen. Replace item42 with your API item id.

The important part is the flow: load once, show current value, save when the user taps.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class FavouriteButton extends StatefulWidget {
  const FavouriteButton({super.key});

  @override
  State<FavouriteButton> createState() => _FavouriteButtonState();
}

class _FavouriteButtonState extends State<FavouriteButton> {
  static const String savedKey = 'saved_item_id';
  static const String itemId = 'item42';

  bool isSaved = false;

  @override
  void initState() {
    super.initState();
    loadSavedState();
  }

  Future<void> loadSavedState() async {
    final prefs = await SharedPreferences.getInstance();
    final savedId = prefs.getString(savedKey);

    setState(() {
      isSaved = savedId == itemId;
    });
  }

  Future<void> toggleSaved() async {
    final prefs = await SharedPreferences.getInstance();

    if (isSaved) {
      await prefs.remove(savedKey);
    } else {
      await prefs.setString(savedKey, itemId);
    }

    setState(() {
      isSaved = !isSaved;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: toggleSaved,
      child: Text(isSaved ? 'Saved' : 'Save'),
    );
  }
}

6. Prepare a phone demo build

4 min

Key point

One goal

A demo build is not the final Play Store release. It is a phone-ready APK that a judge, friend, or recruiter can install and see working.

For this track, your proof is simple: the app runs on Android, your main flows work, and your repo shows how you tested it.

APK or app bundle

Flutter docs say app bundles are preferred for Google Play. But APKs are still useful for direct install demos, especially at a hackathon or for a college project review.

So you will build an APK. Later, if you publish to Play Store, you can learn app bundles and signing in detail.

Your to-do

Check your setup

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open your Flutter project folder in a terminal.
Run Flutter tooling checks before building.
Connect your Android phone by USB, or start an Android Emulator from Android Studio.
List available devices and confirm your phone or emulator appears.
Run the app once in debug mode and click through your main screens.

0 of 5 done

flutter doctor
flutter devices
flutter run

Common mistake

Plugin is not enough

Installing only the Flutter plugin in Android Studio does not complete setup. You still need the Flutter SDK installed, and its bin directory must be on your PATH.

If flutter doctor cannot find tools, fix that before changing your app code. A broken setup is not a Flutter UI bug.

Your to-do

Build the APK

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Stop the debug app if it is running.
Build release APKs for Android devices.
Wait for the build to finish without errors.
Find the APK path printed by Flutter in the terminal.
Keep that path for your README or demo notes.

0 of 5 done

flutter build apk --split-per-abi

Example

Install and test

With your phone connected by USB, Flutter can install the built APK on the device. Run this from the project folder.

Then open the app on the phone like a normal app. Test the screens you already built: navigation, API data, saved data, and empty or error states if your app has them.

flutter install

Tip

Save proof now

Do not wait until submission night. Take proof while your setup works.

Good proof can be a short screen recording, a photo of the app on your phone, or a terminal screenshot showing the successful build. In the next lesson, you will add this evidence to your public repo.

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Run flutter doctor and fix any missing Android setup.
Run flutter devices and confirm one Android device appears.
Run flutter build apk --split-per-abi from your project folder.
Install the app with flutter install on your phone or emulator.
Save one screenshot or screen recording as build proof.

0 of 5 done

7. Submit your public repo

4 min

Key point

One clear proof

Your repo should prove three things fast: the code runs, the app was tested, and the demo can be understood in two minutes.

A recruiter or judge should not need to message you for setup steps.

Your to-do

Before you push

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Run flutter analyze from the project folder.
Run flutter test if your project has tests.
Run flutter devices to confirm your emulator or Android phone is visible.
Run the app once on the same device you mention in the README.
Remove local secrets, unused files, and random test screenshots.

0 of 5 done

Example

README starter

Create or update README.md at the root of your repo. Keep it honest. If a feature is pending, say so.

# Campus Food Finder

A Flutter Android app that shows nearby budget food spots for college students.

## Features
- Home screen with food places from an API
- Detail screen for each place
- Saved places stored on the device
- Android demo build tested on a phone/emulator

## Tech stack
- Flutter
- Dart
- HTTP API
- Local device storage

## Setup
1. Install Flutter on the stable channel.
2. Clone this repo.
3. Run:
   flutter pub get
   flutter run

## Demo steps
1. Open the app.
2. Wait for the food list to load.
3. Tap any item to open details.
4. Save one place.
5. Restart the app and check that the saved place remains.

## Build and test evidence
- Tested on: Android emulator or phone model name
- Command used for APK: flutter build apk --split-per-abi
- Install check: flutter install

## Screenshots
Add 2 to 4 screenshots here: home, detail, saved screen, phone install.

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to improve your README. Paste your real feature list and ask for a short setup guide.

Check every command it returns. Do not keep fake features, fake APIs, or tools you did not use.

Common mistake

Common repo mistakes

Do not submit only an APK. The task is a public repository with runnable source code and proof that it was built and tested.

Do not leave the README as the default Flutter text. That tells the reviewer you did not package the project properly.

Your to-do

What to include

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Include the full Flutter project source, including pubspec.yaml and lib folder.
Include a README with setup, run, demo, and testing notes.
Include screenshots or a short screen recording link if your platform allows it.
Mention the Android device or emulator used for testing.
Add the APK build command you used, not just the final file.

0 of 5 done

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open your project folder and run flutter analyze.
Update README.md using the starter structure above.
Add 2 to 4 screenshots from your phone or emulator.
Push the latest code to a public repo.
Open the repo in an incognito window and check that the README makes sense.

0 of 5 done

Flutter

1. Create your first Flutter screen

Start simple

Remember this

Create the app

Replace main.dart

2. Use stateless and stateful widgets

The core choice

Think in widgets

Pick the type

3. Move between app screens

One route idea

Why this matters

Build two screens

5. Store data on the device

Remember this

What to store

Add persistence

Use AI carefully

Common mistake

Check your result

Do this now

Small counter screen

Split static parts

Common beginner mistake

Static widget example

Do this now

Working example

Use phone back too

Common routing mistake

Do this now

4. Fetch API data safely

One safe pattern

Add networking

Android permission

Fetch one item

Show API states

Common mistake

Use AI carefully

Do this now

Save a favourite

Avoid this

Make it testable

Do this now

6. Prepare a phone demo build

One goal

APK or app bundle

Check your setup

Plugin is not enough

Build the APK

Install and test

Save proof now

Do this now

7. Submit your public repo

One clear proof

Before you push

README starter

Use AI carefully

Common repo mistakes

What to include

Do this now