Functions and arrow syntax in Flutter - Mini App: Build & Ship

Build: Arrow Function Demo

This screen demonstrates how to use functions and arrow syntax in Flutter by showing a button that updates a greeting message when pressed.

Target UI

-------------------------
| Arrow Function Demo    |
|-----------------------|
|                       |
| Greeting: Hello!      |
|                       |
| [Press Me]            |
|                       |
-------------------------

Display a greeting message text starting with 'Hello!'

Add a button labeled 'Press Me'

When the button is pressed, update the greeting to 'Hello, Flutter!' using a function with arrow syntax

Use a StatelessWidget for the main app and a StatefulWidget for the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ArrowFunctionDemo(),
    );
  }
}

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

  @override
  State<ArrowFunctionDemo> createState() => _ArrowFunctionDemoState();
}

class _ArrowFunctionDemoState extends State<ArrowFunctionDemo> {
  String greeting = 'Hello!';

  // TODO: Add a function using arrow syntax to update greeting

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Arrow Function Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Greeting: $greeting', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // TODO: Call the arrow function here
              },
              child: const Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ArrowFunctionDemo(),
    );
  }
}

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

  @override
  State<ArrowFunctionDemo> createState() => _ArrowFunctionDemoState();
}

class _ArrowFunctionDemoState extends State<ArrowFunctionDemo> {
  String greeting = 'Hello!';

  void updateGreeting() => setState(() => greeting = 'Hello, Flutter!');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Arrow Function Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Greeting: $greeting', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: updateGreeting,
              child: const Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

We created a function updateGreeting using arrow syntax. It calls setState with an arrow function to update the greeting variable. This triggers the UI to rebuild and show the new greeting. The button's onPressed directly calls this function, keeping the code clean and simple.

Final Result

Completed Screen

-------------------------
| Arrow Function Demo    |
|-----------------------|
|                       |
| Greeting: Hello, Flutter! |
|                       |
| [Press Me]            |
|                       |
-------------------------

When the user taps the 'Press Me' button, the greeting text changes from 'Hello!' to 'Hello, Flutter!'

Stretch Goal

Add a second button that resets the greeting back to 'Hello!' using another arrow function.

💡 Hint

Create another arrow function that calls setState to reset the greeting, then add a button that calls it.