Flutter - lesson 1 | HackIndia Skills

Flutter - lesson 1 | HackIndia Skills | HackIndia

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

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

Create your first Flutter screen

Start simple

Remember this

Create the app

Replace main.dart

Use AI carefully

Common mistake

Check your result

Do this now

Quick check