텍스트 버튼과 아웃라인 버튼

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

Flutter에는 onPressed:와 child:를 사용해 같은 방식으로 작동하는 버튼이 세 가지 있습니다. 버튼은 시각적으로 얼마나 두드러지는지가 다릅니다.

ElevatedButton: 색으로 채워져 있습니다. 저장처럼 주요 동작에 사용하세요.
OutlinedButton: 테두리가 있고 채워져 있지 않습니다. 미리보기처럼 두 번째 선택지에 사용하세요.
TextButton: 텍스트만 표시됩니다. 가장 눈에 띄지 않으며 취소와 같은 동작에 사용합니다.

OutlinedButton(onPressed: () {}, child: Text('Preview'))
TextButton(onPressed: () {}, child: Text('Cancel'))

눈에 띄는 버튼 하나와 그 주변의 덜 두드러지는 버튼들로 구성된 화면은 사람들에게 무엇을 먼저 눌러야 하는지 알려 줍니다. 버튼의 종류를 바꾸려면 이름만 바꾸세요.

챌린지

쉬움

세 버튼 모두 ElevatedButton입니다. Save는 그대로 두고, Preview는 OutlinedButton으로, Cancel은 TextButton으로 만드세요.

직접 해보기

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: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Save')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Preview')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Cancel')),
            ],
          ),
        ),
      ),
    );
  }
}