Day 01 Foundations

Day 1

Day 1

~1 hour Intermediate Hands-on Precision AI Academy

Today's Objective

By the end of this lesson you will understand widgets and layouts deeply enough to apply it immediately in real projects.

bash.txt
BASH
# Install Flutter SDK from flutter.dev
flutter doctor          # check setup
flutter create my_app
cd my_app
flutter run
dart.txt
DART
// lib/main.dart
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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Hello Flutter',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            Row(
              children: [
                _chip('Dart'),
                const SizedBox(width: 8),
                _chip('Material 3'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _chip(String label) => Chip(label: Text(label));
}
Tip: Hot reload (r in terminal) applies changes in under a second without losing state.

Exercise: Build a Profile Card

  1. Create a Card widget with a CircleAvatar and Text
  2. Use Column for vertical layout, Row for horizontal
  3. Add an ElevatedButton at the bottom
  4. Style with Theme.of(context).textTheme
  5. Run on simulator with flutter run

Day 1 Summary