Flutter 버튼과 텍스트 기본 사용법

카테고리: Flutter 기초 · 작성일: 2026-04-09

Flutter 앱을 만들기 시작하면 가장 먼저 자주 쓰게 되는 요소가 바로 텍스트(Text)와 버튼(Button)입니다. 화면에 글자를 보여주고, 버튼을 눌렀을 때 동작하게 만드는 것만 익혀도 앱다운 화면을 꽤 빠르게 만들 수 있습니다.

특히 초보자는 “코드는 썼는데 화면에 아무 반응이 없다”, “버튼은 보이는데 눌러도 아무 일도 안 생긴다”,
“글씨 크기나 색상을 어디서 바꾸는지 모르겠다” 같은 문제를 자주 겪습니다.

이 글에서는 Flutter에서 가장 기본이 되는 Text 위젯, ElevatedButton / TextButton / OutlinedButton의 차이,
버튼 눌렀을 때 실행되는 onPressed, 그리고 텍스트와 버튼을 함께 배치하는 방법까지 초보자도 바로 이해할 수 있도록 쉽게
정리해 보겠습니다.

왜 텍스트와 버튼이 중요한가요?

거의 모든 앱 화면에는 글자와 버튼이 들어갑니다. 예를 들어:

• 로그인 화면의 “로그인” 버튼
• 설정 화면의 안내 문구
• 게임 화면의 “시작하기” 버튼
• 메모 앱의 제목과 저장 버튼
• 쇼핑 앱의 “구매하기” 버튼

즉, Text와 Button을 잘 다룰 수 있다는 것은 Flutter 화면의 핵심을 이해하기 시작했다는 뜻입니다.

1. Text 위젯 기본 사용법

Flutter에서 글자를 화면에 표시할 때는 Text 위젯을 사용합니다.

가장 기본 형태

Text('안녕하세요')

이 한 줄만 있어도 화면에 글자가 표시됩니다. 예를 들어 body 안에 넣으면 다음처럼 사용할 수 있습니다.

body: Center(
  child: Text('안녕하세요'),
),

여기서 Center는 화면 중앙에 배치해 주는 역할을 합니다.

2. 글자 크기, 색상, 굵기 바꾸기

Text 위젯은 style 속성을 사용해 글씨 모양을 자유롭게 바꿀 수 있습니다.

Text(
  '플러터 공부 중',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

자주 쓰는 스타일 옵션

• fontSize → 글자 크기
• fontWeight → 글자 굵기
• color → 글자 색상
• letterSpacing → 글자 간격
• height → 줄 간격

앱이 너무 밋밋해 보인다면, 텍스트 스타일만 조금 손봐도 훨씬 보기 좋아집니다.

3. 텍스트 정렬과 줄바꿈

글자가 길어지면 정렬과 줄바꿈도 중요해집니다.

Text(
  '이 문장은 가운데 정렬로 표시됩니다.',
  textAlign: TextAlign.center,
)

자주 쓰는 정렬 방식

• TextAlign.left → 왼쪽 정렬
• TextAlign.center → 가운데 정렬
• TextAlign.right → 오른쪽 정렬

텍스트가 너무 길 때는 자동 줄바꿈이 되지만, 특정 줄 수만 보이게 제한하는 것도 가능합니다.

Text(
  '아주 긴 문장입니다. 화면에 너무 길게 나오지 않도록 제한할 수 있습니다.',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

위 코드는 글자가 2줄을 넘으면 뒤를 ... 으로 표시합니다.

4. 버튼 기본 개념 이해하기

Flutter 버튼은 단순히 “보이는 상자”가 아니라, 눌렀을 때 어떤 행동을 실행하는 위젯입니다.

가장 중요한 핵심은 이것입니다.

• 버튼 모양을 정한다
• 버튼 안에 들어갈 글자를 정한다
• 눌렀을 때 실행할 코드를 정한다

Flutter에서 가장 많이 쓰는 기본 버튼은 아래 3가지입니다.

• ElevatedButton → 가장 일반적인 기본 버튼
• TextButton → 배경 없는 가벼운 버튼
• OutlinedButton → 테두리 있는 버튼

5. ElevatedButton 사용법

가장 많이 쓰는 기본 버튼은 ElevatedButton입니다.

ElevatedButton(
  onPressed: () {},
  child: Text('눌러보기'),
)

구조를 쉽게 보면 이렇습니다.

• onPressed → 눌렀을 때 실행할 내용
• child → 버튼 안에 들어갈 글자나 아이콘

지금은 () {} 안이 비어 있으므로, 눌러도 화면상 큰 변화는 없지만 버튼 자체는 정상입니다.

6. TextButton 사용법

TextButton은 배경 없이 가볍게 보이는 버튼입니다.

TextButton(
  onPressed: () {},
  child: Text('자세히 보기'),
)

주로 아래 같은 곳에 자주 쓰입니다.

• “취소” 버튼
• “더 보기” 버튼
• 링크처럼 보이는 동작 버튼

7. OutlinedButton 사용법

OutlinedButton은 테두리가 있는 버튼입니다.

OutlinedButton(
  onPressed: () {},
  child: Text('테두리 버튼'),
)

시각적으로 너무 강하지 않으면서도 버튼 느낌은 확실히 주고 싶을 때 많이 사용합니다.

8. 버튼을 눌렀을 때 동작하게 만들기

버튼이 진짜 “작동”하려면 onPressed 안에 실행 코드를 넣어야 합니다.

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸습니다');
  },
  child: Text('눌러보기'),
)

위 코드는 버튼을 누르면 디버그 콘솔에 버튼이 눌렸습니다 라고 출력됩니다.

9. 버튼 누르면 메시지 띄우기

콘솔 출력보다 더 눈에 보이게 테스트하려면 버튼을 눌렀을 때 SnackBar를 띄우는 방법이 좋습니다.

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('버튼이 눌렸습니다!'),
      ),
    );
  },
  child: Text('메시지 띄우기'),
)

이렇게 하면 버튼을 누를 때 화면 아래쪽에 짧은 안내 메시지가 나타납니다.

앱 사용자에게 “저장되었습니다”, “복사되었습니다”, “삭제되었습니다” 같은 짧은 피드백을 보여줄 때 자주 사용합니다.

10. 버튼을 누르면 텍스트 바꾸기

이제부터는 조금 더 “앱다운” 동작을 만들어 보겠습니다. 버튼을 누르면 글자가 바뀌게 할 수 있습니다.

이 기능을 만들려면 StatefulWidget이 필요합니다.

예제

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: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String message = '버튼을 눌러보세요';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('버튼과 텍스트 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              message,
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  message = '버튼이 눌렸습니다!';
                });
              },
              child: const Text('눌러보기'),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드에서 중요한 부분

• String message → 화면에 보여줄 글자 저장
• setState() → 화면을 다시 그리게 함
• 버튼을 누르면 message 값이 바뀜

이 원리를 이해하면 버튼 클릭으로 점수 증가, 카운트 변경, 상태 변경, 메뉴 전환 같은 다양한 기능을 만들 수 있습니다.

11. 버튼 색상, 크기, 모양 바꾸기

버튼 디자인은 style을 통해 조절할 수 있습니다.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 28, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(14),
    ),
  ),
  child: Text('예쁜 버튼'),
)

자주 조절하는 요소

• padding → 버튼 크기 여백
• shape → 모서리 둥글기
• minimumSize → 최소 크기

버튼을 너무 작게 만들면 누르기 불편하므로, 모바일에서는 여백을 충분히 주는 것이 좋습니다.

12. 텍스트와 버튼 함께 배치하기

앱에서는 보통 글자 하나, 버튼 하나만 단독으로 쓰기보다 여러 요소를 함께 배치합니다.

이때 자주 사용하는 것이 Column, Row, SizedBox입니다.

세로 배치 예제

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      '환영합니다',
      style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 12),
    Text('버튼을 눌러 시작해보세요'),
    SizedBox(height: 24),
    ElevatedButton(
      onPressed: () {},
      child: Text('시작하기'),
    ),
  ],
)

위 코드는 아래처럼 보이는 구조입니다.

• 큰 제목
• 작은 설명
• 버튼

실제 앱 첫 화면에서 가장 자주 쓰는 패턴 중 하나입니다.

13. 초보자가 자주 하는 실수

실수 1. const를 붙여야 할 곳과 아닌 곳을 헷갈림

Flutter에서는 변경되지 않는 위젯에 const를 붙일 수 있습니다.

const Text('고정 문구')

하지만 값이 바뀌는 텍스트에는 const를 쓰면 안 됩니다.

Text(message)

실수 2. setState를 안 써서 화면이 안 바뀜

값만 바꾸고 setState()를 호출하지 않으면 화면은 그대로일 수 있습니다.

실수 3. 버튼을 build 밖에 잘못 배치함

위젯은 보통 build() 안의 트리 구조 안에 있어야 합니다. 위치가 꼬이면 빨간 오류가 뜰 수 있습니다.

실수 4. 쉼표와 괄호를 빠뜨림

Flutter는 괄호와 쉼표 구조가 중요해서 하나만 빠져도 오류가 크게 날 수 있습니다.

14. 바로 연습해볼 미니 예제

아래는 Flutter 초보자가 가장 연습하기 좋은 구조입니다. 버튼을 누를 때마다 숫자가 1씩 올라가는 간단한 예제입니다.

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: CounterPage(),
    );
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  void increaseCount() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('카운터 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '현재 숫자',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 10),
            Text(
              '$count',
              style: TextStyle(
                fontSize: 42,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: increaseCount,
              child: Text('숫자 올리기'),
            ),
          ],
        ),
      ),
    );
  }
}

이 예제를 이해하면 아래 같은 기능으로 확장하기 쉬워집니다.

• 점수 올리기 게임
• 좋아요 수 증가
• 클릭 횟수 측정
• 할 일 완료 수 카운트

정리: 이것만 익혀도 앱다운 화면이 만들어집니다

Flutter 버튼과 텍스트를 처음 배울 때는 복잡한 UI보다 아래 5가지를 먼저 확실히 익히는 것이 좋습니다.

1. Text()로 글자 띄우기
2. style로 글자 꾸미기
3. ElevatedButton() 만들기
4. onPressed로 동작 연결하기
5. setState()로 화면 바꾸기

이 다섯 가지만 익혀도 단순한 예제가 아니라 “진짜 앱처럼 보이는 화면”을 만들기 시작할 수 있습니다.