Your First Button

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 1 of 34.

Until now your apps only showed things. This section makes them answer back, starting with a button.

ElevatedButton(
  onPressed: () {},
  child: Text('Start'),
)

child: is what the button shows, usually a Text. onPressed: is what happens when someone taps it.

() {} is a function with no name: a small piece of code the button keeps and runs on every tap. The code goes between the curly braces. This one is empty, so a tap does nothing yet, but the button is ready to be pressed.

With onPressed: null the button is greyed out and cannot be pressed. null means "no value": no code to run.

Challenge

Easy

The app shows the word Start. Turn it into an ElevatedButton that can be pressed, with Start as its child. An empty function is enough for onPressed.

Try it yourself

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,
      home: Scaffold(
        body: Center(
          child: Text('Start'),
        ),
      ),
    );
  }
}