예제로 배우는 Dart & Flutter 시작하기 ⑨ - 기본 위젯(Text, 버튼, 입력폼) 마스터하기

예제로 배우는 Dart & Flutter 시작하기 ⑨ - 기본 위젯(Text, 버튼, 입력폼) 마스터하기

Flutter의 강력함은 다양한 위젯을 조합해 어떤 UI도 쉽게 만들 수 있다는 점입니다.
이번 글에서는 가장 기본적이고 자주 쓰이는 Text, 버튼, TextField, 아이콘 등 Flutter의 주요 기본 위젯들을 실습을 통해 익혀보겠습니다.

---

📌 1. Text 위젯 – 텍스트 표시하기

Text(
  '안녕하세요, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

• fontSize: 글자 크기
• fontWeight: 글자 굵기 (bold, normal, w300, …)
• color: 텍스트 색상

---

📌 2. ElevatedButton – 기본 버튼

반응형

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸어요!');
  },
  child: Text('클릭'),
)

• onPressed에 콜백을 넣으면 버튼 클릭 시 실행됨
• child에는 버튼 안에 들어갈 위젯(Text, Icon 등)

✅ 스타일 지정

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
  ),
  child: Text('확인'),
)

---

📌 3. TextButton & OutlinedButton

TextButton(
  onPressed: () {},
  child: Text('텍스트 버튼'),
)

OutlinedButton(
  onPressed: () {},
  child: Text('아웃라인 버튼'),
)

• TextButton: 배경 없이 텍스트만 있는 버튼
• OutlinedButton: 테두리만 있는 버튼

---

📌 4. TextField – 사용자 입력 받기

TextField(
  decoration: InputDecoration(
    labelText: '이름 입력',
    border: OutlineInputBorder(),
  ),
)

• labelText: 입력창 위에 표시되는 라벨
• border: 테두리 모양 설정 (예: OutlineInputBorder)

---

✅ 입력값 가져오기 (컨트롤러 사용)

final _controller = TextEditingController();

TextField(
  controller: _controller,
  decoration: InputDecoration(labelText: '이메일'),
),

ElevatedButton(
  onPressed: () {
    print('입력된 이메일: ${_controller.text}');
  },
  child: Text('제출'),
)

TextEditingController를 사용해 입력값을 제어하고 읽을 수 있습니다.

---

📌 5. Icon 위젯 – 아이콘 추가하기

Icon(Icons.favorite, color: Colors.red, size: 32)

• Icons 클래스에 다양한 아이콘이 내장되어 있음
• color, size 등으로 커스터마이징 가능

✅ 아이콘이 포함된 버튼 만들기

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    print('아이콘 버튼 클릭됨');
  },
)

---

📌 6. Row와 Column – 위젯 배치하기

✅ 가로 정렬: Row

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    SizedBox(width: 10),
    Text('별점'),
  ],
)

✅ 세로 정렬: Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('이름'),
    TextField(),
    SizedBox(height: 20),
    ElevatedButton(onPressed: () {}, child: Text('등록')),
  ],
)

---

📌 7. 실습 예제: 간단한 로그인 화면 만들기

class SimpleLogin extends StatelessWidget {
  final TextEditingController idController = TextEditingController();
  final TextEditingController pwController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('로그인')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: idController,
              decoration: InputDecoration(labelText: '아이디'),
            ),
            SizedBox(height: 10),
            TextField(
              controller: pwController,
              obscureText: true,
              decoration: InputDecoration(labelText: '비밀번호'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                print('ID: ${idController.text}');
                print('PW: ${pwController.text}');
              },
              child: Text('로그인'),
            )
          ],
        ),
      ),
    );
  }
}

---

📌 8. 이번 글에서 배운 내용

• Flutter의 기본 위젯 Text, ElevatedButton, TextField, Icon 활용법
• 사용자 입력 처리 및 컨트롤러 사용법
• Row와 Column으로 레이아웃 구성하는 방법
• 간단한 로그인 UI 실습

---

📌 9. 다음 글 예고

다음 글에서는 Flutter에서 페이지 간 이동(Navigation) 과 화면 전환 방법을 배우며, 앱의 구조를 더 체계적으로 만들어봅니다.

• 다음 글 제목:
  『예제로 배우는 Dart & Flutter 시작하기 ⑩ - 화면 전환과 라우팅 완전 이해하기』

---

 

Flutter 위젯 예제,Flutter TextField 입력폼,Flutter 버튼 사용법,Dart Flutter Text 위젯,Flutter 로그인 화면,Flutter IconButton 사용법,Flutter Row Column 정렬,Flutter UI 구성,Flutter ElevatedButton 스타일,Flutter 위젯 실습