はじめてのボタン

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 1/34。

これまで、あなたのアプリは表示するだけでした。このセクションでは、ボタンから始めて、アプリが応答するようにします。

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

child: はボタンに表示するものです。通常は Text です。onPressed: は、誰かがボタンをタップしたときに起こることです。

() {} は名前のない関数です。ボタンが保持し、タップされるたびに実行する小さなコードです。コードは波括弧の間に書きます。これは空なので、タップしてもまだ何も起こりませんが、ボタンは押せる状態です。

onPressed: null にすると、ボタンは灰色になり、押せなくなります。null は「値なし」という意味です。実行するコードがありません。

チャレンジ

簡単

アプリには単語 Start が表示されています。これを押せる ElevatedButton にして、その子として Start を設定してください。onPressed には空の関数で十分です。

自分で試してみよう

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