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

안녕하세요! 오늘은 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)),
    );
  }
}

 

 

코드 정리 단축키

- 'Command' + 'Alt' + 'l'

 

 

플러터 규칙 

- 하나의 화면은 하나의 파일에 만들어야 한다.

- 변수는 항상 소문자로 시작해야한다.(변수, 메서드, 함수)

- 클래스는 항상 대문자로 시작한다.

 

[파일명 네이밍 규칙] 플러터 새로운 파일 만들때 규칙

- CamelCase로 작성되었던 부분의 명칭을 snake_case로 바꿔서 저장해야함!!

 

import 편하게 하기

- 빨간색 밑줄 있는 부분에서 option + enter 키 눌러서 불러오고, 절대 경로 사용하기

 

네이밍 일괄 변경

- 'Shift' + 'f6' 버튼으로 한번에 수정이 가능하고

- 우클릭하여 Refactor에서 수정이 가능하다.

- 한번 수정하면 모든 코드, 모든 파일에서 동일하게 수정되는 엄청난 기능이다!!

 

현재 사용하고 있는 변수가 다른 파일에서 어떤 식으로 사용되고 있는지 보는 법

- 'Command' + 'b'

 

최근에 사용했던 파일 열기

- 'Command' + 'e'

 

pubspec.yaml 파일을 수정했을때

- 우측 상단 'Pub get' 꼭 눌러주기

- 환경 세팅한 이후에 세팅을 반영해주기 위해서는 버튼을 눌러줘야 한다

 

이미지 표현하기

- image.network 방식

- 파일을 저장해서 불러오는 방식 - yaml 파일의 값을 수정해줘야 하는 번거로움이 존재함

Container

- 색깔과 크기를 가질 수 있음

- 자식(child)는 부모 속성을 따라가는 성향이 있음

이렇게 실행하면 아래와 같이 자식의 그림 사이즈가 120 120이 된 것을 확인 할 수 있다. 100 100 사이즈가 아니라.

- 보통 이런 경우에 padding 으로 감싸는 코드를 작성을 많이 하게 되는데

 

코드는 아래와 같이 작성할 수 있고, 이때 화면은 다음과 같이 보여지게 된다.

 

 

사진 아래