Flutter - lesson 2 | HackIndia Skills

Flutter - lesson 2 | HackIndia Skills | HackIndia

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

Use stateless and stateful widgets

The core choice

Think in widgets

Pick the type

Small counter screen

Split static parts

Common beginner mistake

Static widget example

Do this now

Quick check