Flutter and Dart: your first app

flutter doctor
flutter create service_card
cd service_card
flutter run -d chrome

/// Service level: an enum is a fixed set of values.
enum ServiceLevel { standard, premium }

class Service {
  const Service({
    required this.title,
    required this.durationMinutes,
    this.description,
    this.level = ServiceLevel.standard,
  });

  final String title;
  final int durationMinutes;
  final String? description; // may be absent — type String?
  final ServiceLevel level;

  // A getter is a computed property, called without parentheses.
  String get durationLabel => '$durationMinutes min';

  // ?? supplies a fallback value when the left side is null.
  String get descriptionOrPlaceholder =>
      description ?? 'Description coming soon';

  bool get isPremium => level == ServiceLevel.premium;
}

/// Simulates a server request: returns the service list after 300 ms.
Future<List<Service>> fetchServices() async {
  await Future<void>.delayed(const Duration(milliseconds: 300));
  return const [
    Service(
      title: 'Facial cleansing',
      durationMinutes: 60,
      description: 'Ultrasonic cleansing and a mask for your skin type.',
      level: ServiceLevel.premium,
    ),
    Service(title: 'Back massage', durationMinutes: 45),
  ];
}

// A console script: print is fine here, so we disable the lint rule.
// ignore_for_file: avoid_print

import 'package:service_card/models/service.dart';

// A named parameter in curly braces; String? means it can be null.
String greet(String name, {String? city}) {
  if (city == null) return 'Hello, $name!';
  // After the check above, Dart knows city is a String, not String?.
  return 'Hello, $name from ${city.toUpperCase()}!';
}

Future<void> main() async {
  print(greet('Aruzhan'));
  print(greet('Aruzhan', city: 'Almaty'));

  final services = await fetchServices(); // waits without blocking
  for (final s in services) {
    print('${s.title} — ${s.durationLabel}. ${s.descriptionOrPlaceholder}');
  }

  final premiumCount = services.where((s) => s.isPremium).length;
  print('Premium services: $premiumCount');
}

$ dart run bin/basics.dart
Hello, Aruzhan!
Hello, Aruzhan from ALMATY!
Facial cleansing — 60 min. Ultrasonic cleansing and a mask for your skin type.
Back massage — 45 min. Description coming soon
Premium services: 1

import 'package:flutter/material.dart';

import 'service_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Service card',
      // The whole Material 3 palette is generated from one seed color.
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const ServiceScreen(),
    );
  }
}

import 'package:flutter/material.dart';

import 'models/service.dart';

const demoService = Service(
  title: 'Facial cleansing',
  durationMinutes: 60,
  description: 'Ultrasonic cleansing and a mask for your skin type.',
  level: ServiceLevel.premium,
);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Service')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: const [ServiceCard(service: demoService)],
      ),
    );
  }
}

class ServiceCard extends StatelessWidget {
  const ServiceCard({super.key, required this.service});

  final Service service;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;

    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                // Expanded gives the title all the free space in the row.
                Expanded(
                  child: Text(service.title, style: textTheme.titleLarge),
                ),
                if (service.isPremium) const Chip(label: Text('Premium')),
              ],
            ),
            const SizedBox(height: 8),
            Text(service.descriptionOrPlaceholder, style: textTheme.bodyMedium),
            const SizedBox(height: 16),
            Row(
              children: [
                const Icon(Icons.schedule, size: 20),
                const SizedBox(width: 4),
                // Expanded rather than Spacer: on a narrow screen the text shrinks
                // and the button stays at the right edge.
                Expanded(child: Text(service.durationLabel)),
                const BookButton(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<BookButton> createState() => _BookButtonState();
}

class _BookButtonState extends State<BookButton> {
  bool _booked = false;

  @override
  Widget build(BuildContext context) {
    if (_booked) {
      return OutlinedButton.icon(
        onPressed: () => setState(() => _booked = false),
        icon: const Icon(Icons.check),
        label: const Text('Booked'),
      );
    }
    return FilledButton(
      onPressed: () => setState(() => _booked = true),
      child: const Text('Book now'),
    );
  }
}

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

import 'package:service_card/main.dart';
import 'package:service_card/models/service.dart';
import 'package:service_card/service_screen.dart';

void main() {
  testWidgets('card shows the service, button changes state', (tester) async {
    await tester.pumpWidget(const ServiceApp());

    expect(find.text('Facial cleansing'), findsOneWidget);
    expect(find.text('60 min'), findsOneWidget);
    expect(find.text('Premium'), findsOneWidget);

    await tester.tap(find.text('Book now'));
    await tester.pump(); // rebuild after setState

    expect(find.text('Booked'), findsOneWidget);
    expect(find.text('Book now'), findsNothing);
  });

  testWidgets('a long title on a narrow screen does not overflow', (
    tester,
  ) async {
    tester.view.physicalSize = const Size(320, 640);
    tester.view.devicePixelRatio = 1.0;
    addTearDown(tester.view.reset);

    const service = Service(
      title: 'A very long service title that does not fit on one line',
      durationMinutes: 90,
      level: ServiceLevel.premium,
    );
    await tester.pumpWidget(
      const MaterialApp(
        home: Scaffold(body: ServiceCard(service: service)),
      ),
    );

    expect(tester.takeException(), isNull); // no overflow error
    expect(find.text('Description coming soon'), findsOneWidget);
  });
}

$ flutter analyze
Analyzing service_card...
No issues found! (ran in 9.7s)

$ flutter test
00:00 +0: card shows the service, button changes state
00:00 +1: a long title on a narrow screen does not overflow
00:00 +2: All tests passed!