[Flutter] 버튼 위젯(TextButton, ElevatedButton, OutlinedButton) 사용법과 예제 코드 그리고 그 외 필수 개념들

🗝️소프트웨어/Flutter

[Flutter] 버튼 위젯(TextButton, ElevatedButton, OutlinedButton) 사용법과 예제 코드 그리고 그 외 필수 개념들

Dev.Op 2023. 10. 2. 01:17

안녕하세요! 오늘은 Flutter에서 자주 사용되는 버튼 위젯인 TextButton, ElevatedButton, OutlinedButton에 대해 알아보겠습니다. 이 글에서는 해당 위젯들의 기본 사용법과 예제 코드를 제공합니다. 또한, 코드 작성 시 주의해야 할 몇 가지 플러터 규칙과 유용한 코드 정리 단축키도 함께 알아봅시다.

Button

- TextButton

TextButton은 간단한 텍스트 버튼을 만들 때 사용됩니다. 아래는 TextButton을 생성하고 그에 대한 예제 코드입니다.

TextButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 동작
    print('TextButton 클릭됨');
  },
  child: Text('TextButton 텍스트'),
)

- ElevatedButton

ElevatedButton은 일반적인 높이를 가진 미리 정의된 버튼 스타일을 사용할 때 유용합니다. 다음은 ElevatedButton의 예제 코드입니다.

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 동작
    print('ElevatedButton 클릭됨');
  },
  child: Text('ElevatedButton 텍스트'),
)

- OutlinedButton

OutlinedButton은 외곽선이 있는 버튼을 만들 때 사용됩니다. 아래는 OutlinedButton의 예제 코드입니다.

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 동작
    print('OutlinedButton 클릭됨');
  },
  child: Text('OutlinedButton 텍스트'),
)

사용한 예는 다음 아래 코드를 통해서 확인 가능합니다.

파일 : main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
          // appBar 색상 변경
          appBarTheme: AppBarTheme(
            backgroundColor: Colors.blue, // appBar 전체 색상 파란색
            titleTextStyle: TextStyle(
              color: Colors.black,
              fontSize: 25.0, // 폰트 사이즈 기본 사이즈의 2.5배
            ), // title 텍스트 색상 검정색
          )),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$count',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 100,
                )),
            Text('$count',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 70,
                )),
            ElevatedButton(
              onPressed: () {
                print('ElevatedButton');
              },
              child: Text('ElevatedButton'),
            ),
            TextButton(
              onPressed: () {
                print('TextButton');
              },
              child: Text('TextButton'),
            ),
            OutlinedButton(
              onPressed: () {
                print('OutlinedButton');
              },
              child: Text('TextButton'),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 화면 갱신
            setState(() {
              count++;
            });
          },
          child: Icon(Icons.add_box_outlined)),
    );
  }
}