Flutter - lesson 1 | HackIndia Skills

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.

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

Tip

Use AI carefully

You can ask an AI tool to suggest a cleaner first screen. Give it your app idea and ask for only lib/main.dart code.

Check three things before pasting: it imports material.dart, it has void main(), and it uses widgets you can roughly explain. Do not accept a huge file you cannot read.

Common mistake

Do not edit random Android files to change the first screen. For now, most of your UI work happens in lib/main.dart.

Also avoid adding API calls, storage, login, or navigation today. Those come later. A working first screen is enough proof for lesson 1.

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