첫 번째 버튼

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 1번째.

지금까지는 앱이 무언가를 보여 주기만 했습니다. 이 섹션에서는 버튼부터 시작해 앱이 반응하도록 만들어 보겠습니다.

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