[Flutter] Text,Icon,Button 위젯이란?

김근재·2024년 3월 27일

[Flutter] 시리즈 

목록 보기
4/10
post-thumbnail

Text 위젯이란

말 그대로 Text를 쓸 수 있는 위젯입니다.

import 'package:flutter/material.dart';

class TextExample extends StatefulWidget {
  @override
  _TextExampleState createState() => _TextExampleState();
}

class _TextExampleState extends State<TextExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Text('Text 위젯입니다')
        ],
      ),
    );
  }
}

Icon 위젯이란?

말 그대로 Icon을 사용할 수 있는 위젯이다.

icon: 표시할 아이콘을 지정.
size: 아이콘의 크기를 지정.
color: 아이콘의 색상을 지정.
semanticLabel: 아이콘을 음성으로 설명할 때 사용되는 레이블.
textDirection: 아이콘의 텍스트 방향을 지정.
key: 위젯의 고유 식별자를 지정.

Button 위젯이란?

말 그대로 Button을 사용할 수 있는 위젯이다.

TextButton: 단순한 텍스트 기반 버튼.
ElevatedButton: 표면 위에 떠 있는것처럼 보이는 버튼.
OutlinedButton: 테두리가 있는 버튼.
IconButton: 아이콘이 포함된 버튼.
FloatingActionButton: 화면의 특정 위치에 떠있는 부동 버튼.

Button 속성

child: 버튼 내에 표시되는 위젯. 보통 텍스트 위젯, 아이콘 등을 포함한다.
onPressed: 버튼이 눌렸을 때 실행되는 동작을 정의하는 콜백 함수.
onLongPress: 버튼이 길게 눌렸을 때 실행되는 동작을 정의하는 콜백 함수.
style: 버튼의 스타일을 지정하는 ButtonStyle 객체 설정. 이 객체는 버튼의 배경 색상, 글꼴 스타일, 모서리 모양 등을 정의할 수 있다.
focusNode: 버튼의 포커스 노드를 지정. 키보드 포커스를 조정할 때 사용.
autofocus: 페이지가 로드될 때 자동으로 버튼에 포커스를 설정할지 여부를 지정.
clipBehavior: 버튼의 자식 위젯이 버튼의 경계를 벗어날 때 자르기 동작을 지정.

profile
새로운 도전에 끊임없이 도전하는 개발자

0개의 댓글