flutter 기초 정리

jaybon·2023년 3월 7일
3

플러터 flutter

목록 보기
10/16

abstract class

Flutter의 추상 클래스는 직접 인스턴스화할 수 없지만 서브클래싱(상속받은 클래스에서 구체화)해야 하는 클래스이다.
추상 클래스는 다른 클래스가 따라야 할 청사진 역할을 한다.
여러 클래스에서 사용할 수 있는 공통 메서드 및 속성 집합을 제공하여 일관성을 보장하고 코드의 중복성을 줄인다.

추상 클래스는 상속받는 클래스의 종류를 특정한다.

ex)

  • 인간과 호랑이는 동물이라는 공통 추상클래스를 가진다.
  • 프로브와 질럿은 프로토스 지상 유닛이라는 공통 추상클래스를 가진다.

extends를 사용해서 상속받는다.

상속은 단 하나만 받을 수 있다.

class Probe extends ProtossGroundUnit {}

암시적 인터페이스

플러터는 interface 예약어가 없으므로, class 또는 abstract class로 암시적인 인터페이스를 만들어서 사용한다.

인터페이스는 구현하는 클래스의 기능을 특정한다.

ex)

  • 인간은 눈, 입, 팔, 다리 등등의 인터페이스를 가지고 있다.
  • TV리모콘은 채널변경버튼, 음량변경버튼 등등의 인터페이스를 가지고 있다.

클래스 또는 추상 클래스는 인터페이스를 반드시 구현해야한다.

implements를 사용해서 구현한다.

인터페이스는 여러가지를 받을 수 있다.

class Human implements Eye, Mouth, Arm, Leg {}

mixin

플러터에서는 클래스는 단 하나의 클래스를 상속 받을 수 있지만, 부가적인 클래스의 속성을 믹스인(짬뽕)할 수 있다.

짬뽕하다 = 섞다

믹스인은 짬뽕되는 클래스의 부가적인 종류를 특정한다.

ex)

  • 늑대인간은 인간이면서 늑대다.
  • 테슬라자동차는 자동차이면서 인공지능이며 로봇이다.

with를 이용해서 믹스인한다.

믹스인은 여러가지를 받을 수 있다.

class TeslaCar extends Car with AI, Robot {}

yaml 또는 yml

  • YAML(YAML Ain't Markup Language)은 소프트웨어 애플리케이션의 구성 파일에 일반적으로 사용되는 사람이 읽을 수 있는 데이터 직렬화 언어.
  • YAML 파일을 작성할 때 파일이 잘 구조화되고 쉽게 읽고 유지 관리할 수 있도록 몇 가지 규칙을 따르는 것이 중요.

규칙

  • 들여쓰기 사용: YAML 파일은 들여쓰기를 사용하여 중첩 구조를 정의한다. 두 개의 공백을 사용하여 각 수준의 들여쓰기를 파일 전체에서 일관성 있게 들여쓴다.
  • 적절한 구문 사용: YAML에는 데이터 유형을 정의하기 위한 특정 구문이 있다.
    키-값 쌍을 정의하려면 "key: value" 형식을 사용
    목록 항목을 나타내려면 "-" 형식을 사용
    여러 줄 문자열은 "\n" 형식을 사용
  • 문자열에 따옴표 사용: 특히 문자열 값에 공백이나 콜론과 같은 특수 문자가 포함된 경우 따옴표(작은따옴표 또는 큰따옴표)를 사용한다.
  • 탭 사용 금지: YAML은 들여쓰기에 탭을 허용하지 않으므로 탭 대신 공백을 사용(vscode, 안스 등에서는 탭을 자동으로 공백처리)
  • 주석 사용: "#"을 사용하여 YAML 파일에 주석을 추가
  • 앵커 및 별칭 사용: 앵커와 별칭을 사용하여 YAML 파일에서 데이터의 반복을 방지

pubspec.yaml

pubspec.yaml은 Flutter 프로젝트에서 프로젝트 메타데이터, 종속성 및 기타 설정을 지정하는 데 사용되는 구성 파일이다. 사람이 읽을 수 있는 데이터 직렬화 언어인 YAML 형식으로 작성되었다.

내용

  • name: 프로젝트의 이름.
  • description: 프로젝트에 대한 간략한 설명.
  • version: 프로젝트의 현재 버전.
  • environment: 프로젝트에 필요한 최소 및 최대 Flutter SDK 버전.
  • dependencies: 프로젝트에서 사용하는 외부 패키지 또는 라이브러리 목록.
  • dev_dependencies: 개발에만 사용되는 외부 패키지 또는 라이브러리 목록.
  • flutter: 앱의 진입점, 자산 및 글꼴과 같은 Flutter 프레임워크에 특정한 구성 옵션.

dependencies 및 dev_dependencies 섹션은 프로젝트가 의존하는 외부 패키지 또는 라이브러리를 나열하므로 특히 중요하다. 이러한 종속성은 프로젝트의 pubspec.lock 파일에 설치하는 Flutter의 패키지 관리자인 pub에서 관리한다.

flutter 섹션에는 앱의 진입점, 자산 및 글꼴과 같은 Flutter 프레임워크에 특정한 구성 옵션이 포함되어 있다. 이 섹션에는 앱의 iOS 및 Android 버전 번호와 같은 플랫폼별 구성 옵션도 포함될 수 있다.

pubspec.lock

파일은 종속성이 설치되거나 업데이트될 때 Flutter의 패키지 관리자인 pub에 의해 생성된다. 설치된 각 패키지의 버전이 특정 버전 번호로 잠겨 있는지 확인하는 생성된 파일이다.

이는 여러 개발자가 동일한 프로젝트에서 작업하는 경우 모든 사람이 동일한 버전의 패키지를 사용하고 있음을 확인하기 때문에 중요하다.

pubspec.lock 파일은 flutter pub get 명령을 사용하여 pubspec.yaml 파일에 종속 항목이 추가되거나 업데이트될 때 자동으로 업데이트된다. 버전 충돌 및 기타 문제가 발생할 수 있으므로 일반적으로 pubspec.lock 파일을 수동으로 수정하지 않는 것이 좋다.

android 빌드 확인 사항

  • 최신 버전의 Android SDK 및 Android Studio를 설치했는지 확인.
  • 프로젝트 보기를 사용하여 Flutter 프로젝트에서 "android" 폴더를 열기.
  • android 디렉터리 아래의 build.gradle 파일에 지정된 Gradle 버전을 확인. 이전 버전인 경우 최신 버전으로 업데이트할 수 있다.
  • app 디렉터리 아래의 build.gradle 파일을 수정하여 minSdkVersion, targetSdkVersion 및 서명 구성과 같은 Android 빌드 설정을 구성한다. 여기에서 종속성과 플러그인을 추가할 수도 있다.
  • Android 매니페스트 파일을 사용자 정의해야 하는 경우 app/src/main 디렉토리에 AndroidManifest.xml 파일을 만들거나 수정할 수 있다.
  • app/src/main/res 디렉토리에 있는 기본 아이콘과 시작 화면 파일을 자신의 것으로 교체하여 앱의 아이콘과 시작 화면을 구성할 수 있다.

ios 빌드 확인 사항

  • Xcode 설치: Xcode는 iOS 및 macOS 애플리케이션 개발을 위한 IDE(통합 개발 환경)이다. Mac App Store에서 무료로 사용할 수 있다. Mac에 최신 버전의 Xcode를 다운로드하여 설치한다.
  • 실제 iOS 기기 또는 에뮬레이터 설정: 실제 iOS 기기 또는 에뮬레이터를 사용하여 앱을 테스트할 수 있다. 물리적 장치의 경우 USB 케이블을 사용하여 iOS 장치를 Mac에 연결하고 Xcode의 사용 가능한 장치 목록에서 장치를 선택한다. 에뮬레이터를 사용하려면 Xcode를 실행하고 Xcode -> 개발자 도구 열기 -> 시뮬레이터를 선택한 다음 사용하려는 장치를 선택한다.
  • iOS용 Flutter 프로젝트 구성: 코드 편집기에서 Flutter 프로젝트를 열고 ios 디렉터리를 연다. 이 디렉토리에 Runner.xcworkspace 파일이 있는지 확인. 그렇지 않은 경우 flutter create . 명령을 실행하여 iOS 파일을 생성한다.
  • 프로젝트의 종속성 구성: 프로젝트의 pubspec.yaml 파일이 최신 상태이고 앱에 필요한 모든 종속성이 포함되어 있는지 확인합니다. 종속성을 업데이트하려면 flutter packages get 명령을 실행.
  • 프로젝트 서명 및 기능 구성: Xcode의 왼쪽 사이드바에서 Runner 프로젝트를 선택하고 General 탭으로 이동한다. 'Signing' 섹션에서 팀을 선택하고 Xcode가 인증서를 관리하도록 한다. '기능' 섹션에서 iCloud 또는 푸시 알림과 같이 앱에 필요한 모든 기능을 활성화한다.
  • iOS 앱 빌드: iOS 앱을 빌드하려면 터미널에서 flutter build ios 명령을 실행. 이렇게 하면 build/ios 디렉토리에 앱의 iOS 빌드가 생성된다.
  • iOS 앱 테스트: iOS 앱을 테스트하려면 Xcode를 사용하여 물리적 장치 또는 에뮬레이터에서 실행. Xcode를 열고 왼쪽 사이드바에서 Runner 프로젝트를 선택한 다음 Run 버튼을 클릭.

runApp()

  • runApp 함수는 Flutter 애플리케이션을 실행하는 데 사용되는 최상위 함수.
  • runApp 함수는 애플리케이션의 루트 위젯인 단일 매개변수를 사용.
  • 이 루트 위젯은 앱의 최상위 위젯이며 앱의 다른 위젯을 만들고 관리하는 역할.

Widget 위젯

  • Flutter에서 위젯은 사용자 인터페이스의 기본 구성 요소
  • 버튼, 텍스트 필드, 이미지 등과 같은 앱의 시각적 및 대화형 요소를 정의하는 데 사용
  • 위젯은 웹 개발에서 HTML 요소와 동일하다고 생각할 수 있다

StatelessWidget

  • StatelessWidget은 일단 생성되면 모양이나 동작을 변경할 수 없는 위젯 유형

사용자 인터페이스의 기본 빌딩 블록이며 시간이 지남에 따라 상태나 변경 사항에 의존하지 않는 재사용 가능한 구성 요소를 만드는 데 사용된다.

항상 같은 텍스트나 이미지를 표시하는 레이블이나 아이콘은 StatelessWidget으로 구현된다.

StatelessWidget은 변경할 수 없기 때문에 StatefulWidget보다 빠르게 생성하고 삭제할 수 있다. 따라서 동적 업데이트나 상태 관리가 필요하지 않은 자주 사용되는 UI 요소를 만드는 데 적합하다.

StatefulWidget보다 더 빠른 성능과 더 효율적인 리소스 사용.

함수형으로 만들 수도 있다.

StatefulWidget

  • StatefulWidget은 사용자 상호작용 또는 기타 이벤트에 대한 응답으로 시간이 지남에 따라 모양이나 동작을 변경할 수 있는 위젯 유형.

변경할 수 없고 일단 생성되면 모양이나 동작을 변경할 수 없는 StatelessWidget과 달리 StatefulWidget은 상태 변경에 따라 동적으로 업데이트될 수 있다.

StatefulWidget은 StatefulWidget 자체와 해당 State 클래스라는 두 가지 기본 클래스로 구성된다.
StatefulWidget은 State 객체 생성을 담당하는 반면, State 클래스는 위젯의 상태를 유지하고 필요에 따라 모양이나 동작을 업데이트하는 일을 담당한다.

위젯 작성시 const

프로그램 작동 시 new 되는 객체가 아니라 정적인 객체일 경우 컴파일 타임에 세팅되면 앱 성능이 좋아지므로 플러터에서 권장.

const 권장이 붙은 위젯에는 const를 사용하고 동적으로 바뀌는 경우에만 const를 삭제하면 된다.

MaterialApp

안드로이드 디자인을 기반으로 앱 작성
(디자인만 적용이라 안드, IOS 둘 다 빌드 가능)

CupertinoApp

애플 디자인을 기반으로 앱 작성
(디자인만 적용이라 안드, IOS 둘 다 빌드 가능)

MaterialApp의 역할

  • MaterialApp은 Flutter 앱의 최상위 위젯
  • 앱이 시작될 때 생성되는 첫 번째 위젯.

앱을 구축하는 데 필수적인 몇 가지 중요한 기능을 제공

  • 내비게이션: MaterialApp은 앱의 화면 사이를 쉽게 이동할 수 있는 내장 내비게이션 시스템을 제공한다.
  • 테마: 머티리얼 디자인에는 디자인 언어를 사용하는 모든 앱에서 일관된 모양과 느낌을 만드는 데 사용되는 사전 정의된 색상, 타이포그래피 및 기타 디자인 요소 세트가 있다. MaterialApp은 테마를 사용하여 이러한 디자인 요소를 앱에 쉽게 적용할 수 있는 방법을 제공한다.
  • 위젯: MaterialApp에는 앱의 사용자 인터페이스를 생성하는 데 사용할 수 있는 사전 제작된 머티리얼 디자인 위젯 세트가 제공된다. 이러한 위젯에는 버튼, 텍스트 필드, 대화 상자 등이 포함된다.
  • 현지화: MaterialApp은 앱의 텍스트 및 기타 콘텐츠를 다른 언어로 현지화하기 위한 내장 지원을 제공한다.

생성자 매개변수

앱 메타데이터

  • title : 앱의 제목.
  • theme : 앱의 색상, 글꼴 및 텍스트를 정의하는 ThemeData.
  • debugShowCheckedModeBanner : 디버그 장식을 설정 및 제거.

네이비게이션

  • initialRoute : 앱의 초기 경로 지정.
  • routes : 앱에서 화면을 이동하기 위한 경로들을 설정.
  • onGenerateRoute : routes에 정의되지 않은 경로로 이동할 때 호출되는 함수.
  • navigatorObservers : 앱의 탐색 상태가 변경될 때 알림을 받는 역할, 분석 및 로깅 목적.

국제화 (앱의 언어)

  • locale : 앱의 기본 로케일을 지정.
  • localizationsDelegates : 다양한 언어 또는 방언에 대한 번역.
  • supportedLocales : 앱이 지원하는 지역을 지정.

기타

  • home : 앱 실행 시 표시되는 위젯. home을 설정하면 initialRoute 매개변수를 재정의한다.
  • navigatorKey : 화면들을 프로그래밍 방식으로 이동하는 데 사용할 수 있는 네비게이터 객체에 대한 엑세스를 제공하는 GlobalKey이다.
  • builder : 새 경로가 네비게이터에 푸시 될 때 마다 호출되는 함수. 사용자 지정 전환 애니메이션 등에 사용한다.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

Scaffold

  • Scaffold는 머티리얼 디자인 앱의 기본 시각적 구조를 제공하는 Flutter의 위젯
  • 앱 사용자 인터페이스의 시각적 요소를 구성하는 데 사용되는 컨테이너 위젯
  • Scaffold 위젯은 AppBar, BottomNavigationBar, Drawer 및 FloatingActionButton과 같은 다른 위젯이 하위 항목으로 추가되어 앱 사용자 인터페이스의 기본 빌딩 블록으로 자주 사용.

Scaffold 위젯의 주요 역할은 앱의 기본 레이아웃 구조를 제공

  • AppBar: Scaffold는 제목, 작업 및 기타 위젯을 화면 상단에 표시하는 데 사용할 수 있는 내장 AppBar 위젯을 제공한다.
  • Drawer: Scaffold는 또한 화면 측면에서 슬라이드 아웃되는 탐색 메뉴를 표시하는 데 사용할 수 있는 내장 서랍 위젯을 제공한다.
  • BottomNavigationBar: Scaffold에는 화면 하단에 내비게이션 바를 표시하는 데 사용할 수 있는 내장 BottomNavigationBar 위젯이 포함되어 있다.
  • FloatingActionButton: Scaffold에는 앱에서 특정 작업을 트리거하는 플로팅 작업 버튼을 표시하는 데 사용할 수 있는 내장 FloatingActionButton 위젯이 포함되어 있다.

생성자 매개변수

앱 바

  • appBar : 스캐폴드 상단에 표준 앱 바를 제공하는 위젯. 앱 바에는 일반적으로 제목, 선택적 작업 및 탐색 아이콘이 포함된다.
  • primary : 스캐폴드에서 앱 바가 기본 위젯으로 간주되어야 하는지 여부를 나타내는 값. 'true'인 경우 상태 표시줄과 겹치지 않도록 앱 바에 상단 패딩이 제공된다.

body

  • body : 스캐폴드의 메인 컨텐츠를 제공하는 위젯. 이것은 일반적으로 ListView, Column 또는 Row 위젯이지만 스캐폴드의 나머지 공간을 차지하는 모든 위젯일 수 있다.

플로팅 작업 버튼

  • floatingActionButton : 스캐폴드 우측 하단에 플로팅 액션 버튼을 제공하는 위젯. 플로팅 작업 버튼은 일반적으로 새 항목 추가 같은 작업에 사용된다.
  • floatingActionButtonLocation : 스캐폴드에서 부동 작업 버튼의 위치를 지정한다. 기본값은 FloatingActionButtonLocation.endFloat이며 스캐폴드의 오른쪽 하단 모서리에 버튼을 배치한다.

Drawer

  • drawer : 스캐폴드의 왼쪽 가장자리에 내비게이션 서랍을 제공하는 위젯.
  • endDrawer : 스캐폴드의 오른쪽 가장자리에 두 번째 탐색 서랍을 제공하는 위젯.

기타

  • backgroundColor : 스캐폴드의 배경색.
  • resizeToAvoidBottomInset : 키보드와 겹치지 않도록 키보드가 표시될 때 스캐폴드가 자체적으로 크기를 조정해야 하는지 여부를 나타내는 값.
  • extendBody : 스캐폴드의 몸체가 앱 바 및 하단 내비게이션 바 아래로 확장되어야 하는지 여부를 나타내는 값.
  • bottomNavigationBar : 스캐폴드 하단에 하단 내비게이션 바를 제공하는 위젯.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: SafeArea(
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

AppBar

Flutter의 AppBar 위젯은 표준 머티리얼 디자인 앱 바를 만드는 데 사용한다. 일반적으로 화면 상단에 나타나며 앱의 제목, 탐색 아이콘 및 작업을 포함한다.

생성자 매개변수

  • key: 위젯에 대한 고유 식별자를 제공하는 Key 객체.
  • leading: 제목 위젯 앞에 표시할 위젯.
  • automaticallyImplyLeading: Navigator가 뒤로 돌아갈 수 있는 경우 AppBar가 뒤로 버튼을 자동으로 추가할지 여부를 결정하는 값.
  • title: 앱의 제목을 표시
  • actions: title 위젯 옆에 표시할 위젯 목록.
  • bottom: title 및 actions 위젯 아래에 표시되는 위젯.
  • elevation: 앱바 아래의 그림자를 제어.
  • shadowColor: AppBar 아래 그림자의 색상.
  • backgroundColor: AppBar의 배경색.
  • brightness: AppBar의 밝기로 텍스트와 아이콘의 색상을 결정.
  • iconTheme: AppBar의 아이콘에 사용할 아이콘 테마.
  • actionsIconTheme: actions 목록의 아이콘에 사용할 아이콘 테마.
  • textTheme: AppBar의 텍스트에 사용할 텍스트 테마.
  • centerTitle: title 위젯을 중앙에 배치할지 여부를 결정하는 값.
  • titleSpacing: title 위젯 주위에 추가할 공간의 양.
  • toolbarHeight: AppBar 도구 모음의 높이.
  • shape: AppBar의 모양.

예시

		AppBar(
          title: Text('My App'),
        )

SafeArea

  • SafeArea는 장치의 상태 표시줄, 노치 또는 기타 시스템 수준 사용자 인터페이스 요소에 의해 차단되지 않는 안전한 영역 내에 앱의 콘텐츠가 표시되도록 패딩을 제공하는 Flutter의 위젯.

SafeArea 위젯은 일반적으로 스캐폴드 또는 컨테이너 위젯과 같은 앱의 기본 콘텐츠에 대한 상위 위젯으로 사용된다.

SafeArea 위젯을 사용하면 그 안에 배치된 모든 하위 위젯이 자동으로 안전 영역 내에 표시되며 앱의 콘텐츠가 항상 표시되고 쉽게 상호 작용할 수 있도록 패딩 또는 기타 레이아웃 조정이 자동으로 수행된다.

생성자 매개변수

자식

  • child : SafeArea로 감싸진 위젯. 이 자식 위젯에는 SafeArea에서 제공하는 패딩이 적용된다.

패딩

  • top
  • bottom
  • left
  • right

최소 패딩

  • minimum : 자식 위젯에 적용할 최소 패딩을 지정하는 EdgeInsets 객체이다. 이는 눈에 보이는 인셋이 없는 기기에서도 콘텐츠가 시스템 UI 요소와 항상 떨어져 있는지 확인하려는 경우에 유용하다.

행동

  • maintainBottomViewPadding : 장치 키보드 또는 앱 위에 나타날 수 있는 다른 보기를 포함할 수 있는 아래쪽 보기 삽입에 대해 패딩을 유지해야 하는지 여부를 나타냄.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: SafeArea(
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

Container

Flutter에서 '컨테이너'는 사용자 정의되고 유연하며 재사용 가능한 레이아웃 구조를 만들 수 있는 강력한 위젯. 컨테이너 위젯은 박스 모양을 사용자 정의하여 디자인하는 기능을 제공.

생성자 매개변수

  • alignment : Container 위젯 내 하위 위젯의 정렬을 지정하는 AlignmentGeometry 객체. 기본값은 'Alignment.center'.
  • padding : Container 위젯 내 하위 위젯 주변의 패딩을 지정.
  • Container 위젯의 배경색을 지정하는 Color 객체.
  • decoration : 테두리, 그라데이션, 그림자 등과 같은 고급 스타일 지정 속성을 지정할 수 있는 Decoration, BoxDecoration 객체.
  • width : Container 위젯의 너비를 지정하는 double 값. 기본값은 'double.infinity'.
  • height : Container 위젯의 높이를 지정하는 double 값입니다. 기본값은 'double.infinity'.
  • child: Container 위젯 내에 표시될 자식 위젯.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(16.0),
          color: Colors.blue,
          width: 200.0,
          height: 200.0,
          child: Text(
            'Hello, World!',
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

SizedBox

Flutter에서 SizedBox는 특정 크기의 상자를 만드는 위젯.

위젯 주변에 여백을 추가하고 싶을 때나 특정 크기의 빈 박스를 만들고 싶을 때 유용.

생성자 매개변수

자식

  • child : 위젯에 의해 적용되는 상자 안에 표시될 위젯. 이는 Container, Image 또는 Text와 같은 레이아웃 제약을 지원하는 모든 위젯일 수 있다.

레이아웃

  • alignment : SizedBox 위젯에 의해 시행되는 상자 내 하위 위젯의 정렬을 지정하는 AlignmentGeometry 객체.
  • width : 상자 너비를 지정.
  • height : 상자 높이를 지정.

예시

          SizedBox(
            width: 200.0,
            height: 100.0,
            child: Container(
              color: Colors.blue,
              child: Text(
                'Hello, World!',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),

Container와의 비교

  • SizedBox와 Container 모두 자식 위젯 크기를 제한할 수 있다.
  • Container는 스타일을 줄 수 있다.
  • Container는 확장하여 부모 위젯을 채울 수 있다.

Center

Flutter에서 Center 위젯은 부모 위젯 내에서 자식 위젯을 중앙에 배치하는 데 사용된다. Center 위젯은 하나의 자식 위젯을 가져와 부모 위젯의 중앙에 수평 및 수직으로 배치한다.

생성자 매개변수

  • widthFactor: 자식 위젯의 너비를 부모 위젯 너비의 인자로 지정하는 double 값. 예를 들어 값이 0.5이면 자식 위젯이 부모 위젯 너비의 절반이 된다.
  • heightFactor: 자식 위젯의 높이를 부모 위젯 높이의 인자로 지정하는 double 값. 예를 들어 값이 0.5이면 자식 위젯이 부모 위젯의 절반 높이가 된다.
  • key: Center 위젯을 고유하게 식별하는 Key 객체.
  • alignment: 부모 위젯 내에서 자식 위젯을 정렬하는 방법을 지정하는 Alignment 개체입니다. 기본 정렬은 중앙입니다.
Scaffold(
  body: Container(
    color: Colors.amber,
    child: Center(
      heightFactor: 3,
      widthFactor: 3,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ),
));

Column / Row / Stack

Column

  • 위젯들을 상하로 배치할 수 있다.

Row

  • 위젯들을 좌우로 배치할 수 있다.

Stack

  • 위젯들을 겹쳐서 배치할 수 있다.

MainAxisAlignment

CrossAxisAlignment

Flutter에서 mainAxisAlignment 및 crossAxisAlignment는 Column 위젯의 자식이 각각 기본 축과 교차 축을 따라 배치되는 방식을 제어하는 데 사용되는 두 가지 속성이다.

Column 위젯의 경우
기본 축은 세로이며 위에서 아래로 실행되고
교차 축은 가로로 왼쪽에서 오른쪽으로 실행된다.

즉, Column 위젯의 mainAxis는 세로, crossAxis는 가로이다.

Row 위젯의 경우
기본 축은 가로이며 왼쪽에서 오른쪽으로 실행되고
교차 축은 수직이며 위에서 아래로 실행됩니다.

즉, Row 위젯의 mainAxis는 가로, crossAxis는 세로이다.

이 예에서 mainAxisAlignment는 MainAxisAlignment.center로 설정되어 있으므로 하위 항목은 Column에서 수직으로 중앙에 배치된다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Child 1'),
    Text('Child 2'),
    Text('Child 3'),
  ],
)

이 예에서 crossAxisAlignment는 CrossAxisAlignment.start로 설정되어 있으므로 하위 항목은 Column의 수평으로 왼쪽에 배치된다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Child 1'),
    Text('Child 2'),
    Text('Child 3'),
  ],
)

생성자 매개변수

자식

  • children : 열에 세로로 표시되는 위젯 목록이다. 목록의 위젯 순서에 따라 열의 순서가 결정된다.

레이아웃

  • mainAxisSize : 열의 기본 축이 자식과 관련하여 크기가 조정되는 방법을 지정.
  • mainAxisAlignment : 자식이 기본 축을 따라 정렬되는 방법을 지정.
  • crossAxisAlignment : 교차 축을 따라 자식을 정렬되는 방법을 지정.
  • verticalDirection : 자식이 배치되는 세로 방향을 지정. 기본값은 VerticalDirection.down이다.
  • textDirection : 열에서 텍스트가 흐르는 방향을 지정.
  • textBaseline : 자식에 대한 기준 정렬을 지정. 이는 텍스트 및 기타 위젯이 올바르게 정렬되도록 하는 데 사용된다.

Padding

  • 패딩 위젯은 다른 위젯 내부의 콘텐츠에 패딩을 추가하는 데 사용.

패딩 위젯은 자식 위젯을 인수로 사용하며 자식 위젯의 각 가장자리에 패딩을 얼마나 추가해야 하는지 지정할 수 있다.
패딩은 고정된 픽셀 수 또는 위젯 크기의 백분율로 지정할 수 있다.

Padding 위젯의 사용 사례

  • 위젯 사이의 간격 만들기: 패딩을 사용하여 행 또는 열의 위젯 사이에 간격을 만들 수 있다.
  • 텍스트 주위에 공백 추가
  • 안전한 영역 확보: 패딩을 사용하여 콘텐츠가 계속 표시되고 상태 표시줄, 탐색 표시줄 또는 장치 노치와 같은 시스템 UI 요소에 의해 가려지지 않도록 할 수 있다.

생성자 매개변수

자식

  • child : 패딩으로 감싸진 위젯. 이 자식 위젯에는 Padding에서 제공하는 패딩이 적용된다.

패딩

  • padding : 자식 위젯에 적용할 패딩의 양을 지정하는 EdgeInsets 객체.

EdgeInsets

  • EdgeInsets.all : 모든 면에서 패딩이 동일한 EdgeInsets 객체를 만듬.
  • EdgeInsets.only : 지정된 면에만 패딩이 적용된 EdgeInsets 객체를 만듬.
  • EdgeInsets.symmetric : 가로 또는 세로 측면에 대칭 패딩이 적용된 EdgeInsets 객체를 만듬.

예시

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text(
    'Hello, World!',
     style: TextStyle(fontSize: 24.0),
   ),
),

Text

  • Text 위젯은 앱의 사용자 인터페이스에 텍스트를 표시하는 데 사용

텍스트 위젯은 글꼴 크기, 글꼴 두께, 글꼴 색상 및 정렬 변경과 같은 텍스트 스타일 지정 및 서식 지정을 위한 다양한 옵션을 제공.

텍스트 위젯의 주요 기능

  • 스타일: TextStyle 클래스는 텍스트 위젯에 의해 표시되는 텍스트의 스타일을 정의하는 데 사용. 여기에는 글꼴 모음, 글꼴 크기, 글꼴 두께, 글꼴 색상 등을 설정하는 옵션이 포함.
  • 오버플로: 텍스트 위젯은 너무 길어서 컨테이너에 맞지 않는 텍스트를 처리하기 위한 옵션을 제공. 여기에는 텍스트 자르기, 텍스트 줄바꿈 또는 여러 줄로 텍스트 줄 바꿈 옵션이 포함.
  • 정렬: 텍스트 위젯은 컨테이너 내에서 텍스트를 정렬하기 위한 옵션을 제공. 여기에는 텍스트를 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤에 맞추는 옵션이 포함.
  • 리치 텍스트: 텍스트 위젯은 단순한 일반 텍스트 이상을 표시 가능. 또한 볼드체, 이탤릭체 또는 밑줄 텍스트, 인라인 이미지 및 링크와 같은 스타일 요소를 포함하는 서식 있는 텍스트를 표시 가능.

생성자 매개변수

내용

  • data : 위젯이 표시할 텍스트 내용.

글자 스타일

  • style : 글꼴 패밀리, 글꼴 크기, 글꼴 두께, 색상 및 텍스트 정렬을 포함하여 텍스트의 시각적 모양을 정의하는 TextStyle 객체.
  • textAlign : 컨테이너 내 텍스트의 가로 정렬을 지정. 기본값은 텍스트를 왼쪽에 정렬하는 'TextAlign.start'이다.
  • textDirection : 텍스트 흐름의 방향(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)을 지정. 기본값은 'TextDirection.ltr'이다.
  • softWrap : 텍스트가 각 줄의 끝에서 줄바꿈되어야 하는지 여부를 나타냄. 기본값은 참.
  • overflow : 텍스트가 컨테이너를 오버플로하는 경우 텍스트의 동작을 지정. 기본값은 'TextOverflow.clip'이며 컨테이너 가장자리의 텍스트를 자른다.

글자 레이아웃

  • maxLines : 텍스트가 차지해야 하는 최대 줄 수를 지정. 기본값은 '1'.
  • textScaleFactor : 글꼴 크기에 대한 배율 인수를 지정. 기본값은 '1.0'.

글자 접근성

  • textWidthBasis : 텍스트 너비를 계산하는 방법을 지정. 기본값은 TextWidthBasis.parent이며, 이는 텍스트의 너비가 부모 위젯에 의해 결정됨을 의미한다.
  • locale : 텍스트의 로케일을 지정하는 Locale 객체. 이것은 숫자, 날짜 및 기타 지역화된 콘텐츠의 서식을 지정하는 데 사용된다.

예시

Text(
  'Hello, World!',
   style: TextStyle(fontSize: 24.0),
),

Icon

Flutter에서 Icon 위젯은 앱의 사용자 인터페이스에 아이콘을 표시하는 데 사용. 'Icon' 위젯은 머티리얼 디자인 아이콘, Cupertino 아이콘, FontAwesome 아이콘, 사용자 정의 아이콘 등 다양한 내장 아이콘을 지원한다.

생성자 매개변수

  • icon: 표시할 아이콘으로 IconData 객체로 지정. 필수 매개변수
  • size: 아이콘의 크기를 지정하는 double 값. 기본값은 '24.0'.
  • color: 아이콘의 색상을 지정하는 Color 객체. 기본값은 Colors.black
  • semanticLabel: 접근성을 위해 아이콘을 설명하는 문자열. 기본값은 'null'.
  • textDirection: 아이콘 텍스트의 방향성을 지정하는 TextDirection 객체. 기본값은 'null'.

예시

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

Spacer

  • Spacer 위젯은 빈 공간이나 다른 위젯 사이의 간격을 만드는 데 사용

Spacer 위젯은 다양한 화면 크기나 방향에 맞게 조정되는 유연한 레이아웃을 만드는 데 특히 유용하다.

Spacer 위젯의 주요 기능

  • 유연성: Spacer 위젯은 Flutter의 Flexbox 레이아웃 시스템의 일부로, 다양한 화면 크기나 방향에 맞게 조정되는 유연한 레이아웃을 허용. 행 또는 열 내에서 스페이서 위젯을 사용하여 사용 가능한 화면 공간에 맞게 조정되는 유연한 간격을 만들 수 있다.
  • Flex factor: Spacer 위젯에는 동일한 행 또는 열 내의 다른 위젯에 비해 얼마나 많은 공간을 차지해야 하는지를 결정하는 flex factor 속성이 있다. 이를 통해 위젯 사이에 생성되는 공간의 양을 제어할 수 있다.
  • 빈 공간: Spacer 위젯은 화면에 아무 것도 표시하지 않고 대신 빈 공간이나 다른 위젯 사이의 간격을 만든다. 이는 사용자 인터페이스의 서로 다른 부분 간에 시각적 구분을 만드는 데 유용할 수 있다.
  • 중첩: Spacer 위젯은 다른 위젯 내에 중첩될 수 있으므로 간격 및 기타 레이아웃 요소의 여러 레이어를 결합하는 보다 복잡한 레이아웃을 허용.

생성자 매개변수

플렉스

  • flex : Spacer가 차지하는 공간의 양을 지정하는 정수 값. 이 값은 행 또는 열의 다른 위젯에 비해 스페이서가 차지하는 공간을 결정하는 데 사용. flex 값이 클수록 Spacer가 더 많은 공간을 차지. 예를 들어 flex 값이 2인 Spacer 위젯은 flex 값이 1인 Spacer 위젯보다 두 배 많은 공간을 차지한다.

예시

		Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.blue,
                height: 100.0,
              ),
            ),
            Spacer(),
            Expanded(
              child: Container(
                color: Colors.red,
                height: 100.0,
              ),
            ),
          ],
        ),

Expanded

  • Expanded 위젯은 다양한 화면 크기나 방향에 맞게 조정되는 유연한 레이아웃을 만드는 데 사용
  • 컨테이너 내의 다양한 위젯에 할당되는 공간을 제어하기 위한 강력한 도구이며 앱의 사용자 인터페이스가 다양한 기기에서 잘 보이도록 하는 데 도움이 될 수 있다.

Expanded 위젯은 일반적으로 행 또는 열 위젯 내에서 사용되며 각각 가로 또는 세로 위젯 레이아웃을 허용한다.

Expanded 위젯의 몇 가지 주요 기능

  • 유연성: Expanded 위젯은 Flutter의 Flexbox 레이아웃 시스템의 일부로, 다양한 화면 크기나 방향에 맞게 조정되는 유연한 레이아웃을 허용. 행 또는 열 내에서 확장 위젯을 사용하여 사용 가능한 화면 공간에 맞게 조정되는 유연한 레이아웃을 만들 수 있다.
  • 플렉스 요소: 확장 위젯에는 동일한 행 또는 열 내의 다른 위젯에 비해 얼마나 많은 공간을 차지해야 하는지 결정하는 플렉스 요소 속성이 있다. 이렇게 하면 각 위젯에 할당되는 공간의 양을 제어할 수 있다.
  • 컨테이너 제약 조건: Expanded 위젯은 상위 컨테이너 내의 사용 가능한 공간을 사용하지만 해당 컨테이너의 제약 조건도 준수. 이는 Expanded 위젯이 상위 컨테이너의 최대 크기 또는 크기를 초과하지 않음을 의미.
  • 중첩: 확장된 위젯은 다른 위젯 내에 중첩될 수 있으므로 유연한 요소와 유연하지 않은 요소의 여러 레이어를 결합하는 더 복잡한 레이아웃을 허용.

생성자 매개변수

플렉스

  • flex : Expanded 위젯에 대한 플렉스 요소를 지정하는 정수 값. 이 값은 컨테이너의 다른 위젯에 비해 위젯이 차지하는 공간을 결정하는 데 사용. flex 값이 클수록 위젯이 더 많은 공간을 차지.

예시

		Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.blue,
                height: 100.0,
              ),
            ),
            Spacer(),
            Expanded(
              child: Container(
                color: Colors.red,
                height: 100.0,
              ),
            ),
          ],
        ),

Flexible

Flutter의 Flexible 위젯은 Row, Column 또는 Flex 위젯의 하위 위젯이 주축을 따라 가능한 한 많은 공간을 차지하도록 만드는 데 사용된다.

생성자 매개변수

  • key : 위젯을 식별하는 선택적 Key 객체.
  • flex: 동일한 컨테이너 내에서 위젯이 다른 유연한 위젯에 비해 얼마나 많은 공간을 차지해야 하는지를 결정하는 정수 값. flex 값이 높을수록 위젯이 더 많은 공간을 차지.
  • fit: 하위 위젯의 교차 축을 따라 크기를 조정하는 방법을 결정하는 선택적 FlexFit 값. Flexible 위젯은 교차 축을 따라 꼭 맞도록 하위 크기를 조정. 'fit' 매개변수를 'FlexFit.loose'로 설정하여 하위 위젯이 확장되어 교차 축을 따라 사용 가능한 공간을 채울 수 있다.
  • child: 유연하게 만들 자식 위젯. 이것은 텍스트, 아이콘 또는 컨테이너 위젯과 같이 컨테이너 내에서 공간을 차지하는 모든 위젯일 수 있다.
Flexible(
  key: Key('myFlexible'),
  flex: 2,
  fit: FlexFit.loose,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.blue,
    child: Text('Flexible child'),
  ),
)

ListView

Flutter의 ListView 위젯은 스크롤 가능한 항목 목록을 표시하는 데 사용된다. 한 번에 화면에 맞지 않는 많은 수의 항목을 표시하는 데 사용할 수 있다. ListView 위젯은 세로 및 가로 스크롤을 모두 지원하며 앱의 요구 사항에 맞게 사용자 지정할 수 있다.

'ListView' 위젯은 빌더 함수, 위젯 목록 또는 'SliverChildListDelegate'를 비롯한 다양한 방법을 사용하여 항목으로 채워질 수 있다.
빌더 기능은 일반적으로 데이터베이스 또는 웹 서비스와 같은 일부 데이터 소스를 기반으로 목록 항목을 동적으로 생성해야 하는 경우에 사용된다.

ListView 위젯은 바운싱 또는 스냅과 같은 다양한 스크롤 동작도 지원합니다. scrollDirection, itemExtent, padding, physics 등을 포함한 다양한 속성으로 사용자 지정할 수 있다.

또한 ListView 위젯을 RefreshIndicator 또는 ScrollController와 같은 다른 위젯과 함께 사용하여 앱에 추가 기능과 상호 작용을 제공할 수 있다.

생성자 매개변수

  • key: 위젯에 대한 고유 식별자를 제공하는 Key 객체.
  • scrollDirection: 목록이 스크롤되어야 하는 방향. Axis.horizontal 또는 Axis.vertical.
  • reverse: 목록을 역순으로 표시할지 여부를 결정하는 값.
  • controller: 목록의 스크롤 동작을 제어하는 ScrollController 객체.
  • primary: 목록이 위젯 트리에서 기본 스크롤 보기여야 하는지 여부를 결정.
  • physics: 스크롤 뷰의 물리적 기능. ScrollPhysics 객체 또는 ScrollPhysics 하위 클래스.
  • shrinkWrap: 목록의 내용을 수축 포장해야 하는지 여부를 결정하는 값.
  • padding: 목록 주위에 추가할 패딩.
  • itemExtent: 목록에 있는 각 항목의 고정 범위. 이것은 children 또는 itemBuilder 속성이 목록을 만드는 데 사용되는 경우에만 사용.
  • children: 목록에 표시할 위젯 목록.
  • itemBuilder: 목록의 각 항목에 대해 호출되는 빌더 함수. 일반적으로 일부 데이터 소스를 기반으로 목록 항목을 동적으로 만드는 데 사용된다.
  • semanticChildCount: 접근성 목적을 위한 목록의 항목수.

예시

class MyApp extends StatelessWidget {
  final List<String> items = List.generate(100, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Image

  • 이미지 위젯은 앱의 사용자 인터페이스에 이미지를 표시하는 데 사용

Flutter에서 이미지는 이미지를 표시하는 위젯. 이미지의 모양과 동작의 다양한 측면을 구성할 수 있는 여러 생성자 매개 변수가 있다.

이미지 위젯은 이미지 크기, 종횡비, 정렬 등을 제어하는 등 이미지를 로드하고 표시하기 위한 다양한 옵션을 제공.

이미지 위젯의 주요 기능

  • 소스: 이미지 위젯은 로컬 자산, 네트워크 URL 및 메모리를 비롯한 다양한 소스에서 이미지를 로드할 수 있다. 이를 통해 동일한 앱 내에서 다양한 소스의 이미지를 표시할 수 있다.
  • 크기: 이미지 위젯은 화면에 표시되는 이미지의 크기를 제어할 수 있는 옵션을 제공한다. 여기에는 이미지의 너비와 높이를 설정하고 종횡비를 제어하는 옵션이 포함된다.
  • Placeholder: 이미지 위젯은 실제 이미지가 로드되는 동안 자리 Placeholder 이미지를 표시할 수 있다. 이는 이미지가 로드되고 있다는 피드백을 제공하여 사용자 경험을 개선하는 데 도움이 될 수 있다.
  • 오류 처리: 이미지 위젯은 이미지를 로드하거나 표시하는 동안 발생하는 오류를 처리하기 위한 옵션을 제공한다. 여기에는 오류 메시지 또는 대체 이미지를 표시하는 옵션이 포함된다.
  • 네트워크 캐싱: 이미지 위젯은 네트워크 이미지를 자동으로 캐싱하여 성능을 개선하고 데이터 사용량을 줄인다.

생성자 매개변수

이미지 출처

  • image : 표시할 이미지를 나타내는 ImageProvider 객체. 이는 AssetImage, NetworkImage 또는 FileImage등이 있다.

이미지 표시

  • width : 이미지의 폭을 지정하는 double 값. 설정되지 않은 경우 이미지는 고유한 높이 대 너비 종횡비로 표시.
  • height : 이미지의 높이를 지정하는 double 값. 설정되지 않은 경우 이미지는 고유한 너비 대 높이 종횡비로 표시.
  • fit : 컨테이너에 맞게 이미지 크기를 조정하는 방법을 지정. 가능한 값은 BoxFit.contain, BoxFit.cover, BoxFit.fill, BoxFit.fitHeight, BoxFit.fitWidth 및 BoxFit.none의 6가지.
  • alignment : 컨테이너 내 이미지의 정렬을 지정하는 AlignmentGeometry 객체.

이미지 로딩 및 오류 동작

  • loadingBuilder : 이미지가 로드되는 동안 표시할 위젯을 반환하는 함수ㅣ
  • errorBuilder : 이미지 불러오기 실패 시 표시할 위젯을 반환하는 함수.
  • semanticLabel : 이미지에 대한 접근성 레이블을 제공하는 문자열.

예시

		  Image.network(
            'https://picsum.photos/250?image=9',
            width: 200.0,
            height: 200.0,
          ),

AspectRatio

하위 위젯에 특정 종횡비를 적용하는 위젯.

콘텐츠나 레이아웃 제약 조건에 관계없이 자식 위젯이 특정 너비 대 높이 비율을 유지하도록 하려는 경우에 유용.

생성자 매개변수

자식

  • child : AspectRatio 위젯에 의해 적용되는 제약 조건 내에서 표시될 위젯. 이는 Container, Image 또는 Text와 같은 레이아웃 제약을 지원하는 모든 위젯일 수 있다.

종횡비

  • aspectRatio : 자식 위젯의 원하는 가로세로 비율을 지정하는 double 값. 이 값은 너비와 높이의 비율로 표현됨.

레이아웃

  • alignment : AspectRatio 위젯에 의해 시행되는 제약 조건 내에서 하위 위젯의 정렬을 지정하는 AlignmentGeometry 객체. 기본값은 'Alignment.center'.
  • padding : AspectRatio 위젯에 의해 적용되는 제약 조건 내에서 하위 위젯 주변에 적용할 패딩을 지정하는 EdgeInsetsGeometry 객체. 기본값은 EdgeInsets.zero.

예시

          AspectRatio(
            aspectRatio: 1.5,
            child: Container(
              color: Colors.blue,
            ),
          ),

ClipRRect

둥근 사각형을 사용하여 하위 위젯을 자르는 위젯.

이미지, 컨테이너 또는 기타 위젯에 둥근 모서리를 적용하려는 경우에 유용.

생성자 매개변수

자식

  • child : ClipRRect 위젯에 의해 적용된 둥근 사각형 안에 표시될 위젯. 이는 Container, Image 또는 Text와 같은 레이아웃 제약을 지원하는 모든 위젯일 수 있다.

테두리

  • borderRadius : 둥근 사각형의 모서리 반경을 지정하는 BorderRadius 객체. BorderRadius.all 생성자를 사용하여 모든 모서리에 균일한 반지름을 지정하거나 BorderRadius.only 생성자를 사용하여 모서리마다 다른 반지름을 지정할 수 있다.

레이아웃
clipBehavior : 클리핑 동작을 지정.기본값은 'Clip.antiAlias'이며 앤티 앨리어싱으로 부드러운 가장자리를 제공. 다른 가능한 값은 앤티앨리어싱 없이 하드 에지를 제공하는 Clip.hardEdge와 하위 위젯을 전혀 자르지 않는 Clip.none이다.

예시

          ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Image.network(
              'https://picsum.photos/250?image=9',
              width: 200.0,
              height: 200.0,
            ),
          ),

InkWell

Flutter의 'InkWell' 위젯은 사용자가 버튼을 누르거나 링크를 클릭하는 등 위젯과 상호 작용할 때 시각적 피드백을 제공하는 데 사용.

단순한 'GestureDetector'보다 더 시각적으로 매력적인 방식으로 사용자 입력에 응답하는 클릭 가능한 요소를 만드는 데 사용.

사용자가 'InkWell' 위젯을 탭하면 위젯 중앙에서 가장자리까지 확장되는 물결 효과가 표시되어 사용자가 탭한 위치를 명확하게 표시한다.

'InkWell' 위젯은 '텍스트', '이미지' 또는 '아이콘'과 같은 다양한 기타 위젯과 함께 사용하여 사용자 입력에 응답하는 클릭 가능한 요소를 생성할 수 있다.

생성자 매개변수

  • key: 위젯에 대한 고유 식별자를 제공하는 Key 객체.

  • onTap: InkWell을 탭하면 호출되는 콜백 함수.

  • onDoubleTap: InkWell을 두 번 탭하면 호출되는 콜백 함수.

  • onLongPress: InkWell을 길게 눌렀을 때 호출되는 콜백 함수.

  • onHighlightChanged: InkWell의 하이라이트 상태가 변경될 때 호출되는 콜백 함수.

  • child: InkWell이 래핑하고 시각적 피드백을 제공해야 하는 하위 위젯.

  • splashColor: InkWell을 누를 때 나타나는 잉크 얼룩의 색상.

  • highlightColor: InkWell을 누를 때 나타나는 잉크 하이라이트의 색상.

  • hoverColor: InkWell을 마우스로 가리키면 나타나는 잉크 얼룩의 색상.

  • focusColor: InkWell에 초점이 맞춰졌을 때 나타나는 잉크 얼룩의 색상.

  • radius: InkWell을 누를 때 나타나는 잉크 얼룩의 반경.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              print('Button tapped!');
            },
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(
                'Tap Me!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

TextButton

Flutter의 'TextButton' 위젯은 텍스트를 표시하고 사용자 탭에 응답하는 버튼입니다. 일반적으로 ElevatedButton 또는 OutlinedButton 위젯에 대한 더 간단하고 미묘한 대안으로 사용된다.

생성자 매개변수

  • onPressed: 버튼을 눌렀을 때 호출되는 필수 콜백 함수.
  • onLongPress: 버튼을 길게 누르면 호출되는 선택적 콜백 함수.
  • style: 배경색, 텍스트 색상 및 패딩과 같은 버튼의 시각적 스타일을 정의하는 선택적 ButtonStyle 객체.
  • focusNode: 버튼의 포커스 및 키보드 이벤트를 제어하는 데 사용할 수 있는 선택적 FocusNode 객체
  • autofocus: 위젯이 빌드될 때 버튼이 자동으로 초점을 맞춰야 하는지 여부를 결정하는 선택적 값.
  • clipBehavior: 버튼이 부모의 경계를 넘어 확장될 때 버튼이 잘리는 방법을 정의하는 선택적 Clip 객체.
  • onDisabled: 버튼이 비활성화될 때 호출되는 선택적 콜백 함수.
  • enabled:버튼의 활성화 또는 비활성화 여부를 결정하는 선택적 값.
  • style: 버튼이 비활성화되었을 때 버튼의 시각적 스타일을 정의하는 선택적 ButtonStyle 객체.
  • child: 버튼에 표시할 텍스트 또는 아이콘을 정의하는 필수 자식 위젯.
TextButton(
  onPressed: () {
    print('Button pressed');
  },
  onLongPress: () {
    print('Button long pressed');
  },
  style: TextButton.styleFrom(
    primary: Colors.white,
    backgroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
  child: Text(
    'Click me',
    style: TextStyle(fontSize: 20),
  ),
);

TabBar

Flutter의 'TabBar' 위젯은 탭의 가로 행을 표시하는 데 사용되며, 각 탭은 앱 내의 다른 보기 또는 페이지를 나타낸다. 이를 통해 사용자는 메뉴를 탐색하거나 추가 작업을 수행하지 않고도 콘텐츠의 다른 섹션 간에 빠르게 전환할 수 있다.

'TabBar' 위젯은 사용자 정의가 가능하며 다양한 스타일 및 테마와 함께 사용할 수 있다. 'TabBarView'와 같은 다른 위젯과 함께 사용하여 현재 선택된 탭에 따라 다른 콘텐츠를 표시하는 완전한 기능의 탭 인터페이스를 만들 수 있다.

생성자 매개변수

  • tabs: TabBar의 개별 탭을 나타내는 Tab 위젯 목록.
  • controller: TabBar의 상태를 관리하는 TabController.
  • isScrollable: TabBar가 가로로 스크롤될 수 있는지 여부를 나타내는 값.
  • indicator : 탭 선택 표시기를 그리는 데 사용되는 사용자 지정 장식.
  • indicatorColor: 탭 선택 표시기의 색상.
  • indicatorWeight: 탭 선택 표시기의 두께.
  • indicatorPadding: 탭 선택 표시기 주변의 패딩.
  • labelColor : 탭 레이블의 색상.
  • labelStyle: 탭 레이블의 스타일.
  • unselectedLabelColor: 선택되지 않은 탭 레이블의 색상.
  • unselectedLabelStyle: 선택되지 않은 탭 레이블의 스타일.
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(
                text: 'Tab 1',
              ),
              Tab(
                text: 'Tab 2',
              ),
              Tab(
                text: 'Tab 3',
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Center(
              child: Text('This is the content of Tab 1'),
            ),
            Center(
              child: Text('This is the content of Tab 2'),
            ),
            Center(
              child: Text('This is the content of Tab 3'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

GridView

Flutter의 GridView 위젯은 테이블이나 스프레드시트와 유사하게 항목의 스크롤 가능한 그리드를 만드는 데 사용된다. 탐색하고 이해하기 쉬운 방식으로 대규모 데이터 집합을 표시할 수 있다.

생성자 매개변수

  • key: 위젯에 대한 고유 식별자를 제공하는 Key 객체.
  • scrollDirection: 그리드가 스크롤되어야 하는 방향이다. Axis.vertical 또는 Axis.horizontal.
  • reverse: 그리드의 항목 순서를 반대로 해야 하는지 여부를 나타내는 값.
  • controller: 그리드의 스크롤 동작을 제어하는 데 사용할 수 있는 선택적 ScrollController 객체.
  • primary: 그리드가 앱의 기본 스크롤 보기여야 하는지 여부를 나타내는 값.
  • physics : 그리드에서 사용하는 스크롤링 물리학.
  • shrinkWrap : 내용에 맞게 그리드 크기를 조정해야 하는지 여부를 나타내는 값.
  • padding: 그리드 가장자리 주변의 패딩.
  • gridDelegate: 그리드의 레이아웃을 제어하는 델리게이트.
    SliverGridDelegateWithFixedCrossAxisCount
    (grid 기둥 개수를 미리 선정해서, 사이즈가 어떻든 그에 맞추는 방식- 컨텐츠들의 사이즈가 바뀜)
    SliverGridDelegateWithMaxCrossAxisExtent
    (grid의 가로 길이를 결정하고 난 뒤, 그에 맞게 기둥들이 들어가는 방식 - 컨텐츠들의 사이즈가 바뀌지 않음)
  • addAutomaticKeepAlives: 그리드의 자식에 자동 연결 유지를 추가해야 하는지 여부를 나타내는 값.
  • addRepaintBoundaries: 다시 그리기 경계를 그리드의 자식에 추가해야 하는지 여부를 나타내는 값.
  • addSemanticIndexes: 의미 체계 인덱스를 그리드의 자식에 추가해야 하는지 여부를 나타내는 값.

예시

Sure! Here's an example code for using the GridView widget in Flutter:

less
Copy code
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: GridView.builder(
          itemCount: items.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 8.0,
            crossAxisSpacing: 8.0,
            childAspectRatio: 1.0,
          ),
          itemBuilder: (context, index) {
            return Container(
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  items[index],
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24.0,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

CircleAvatar

Flutter의 CircleAvatar 위젯은 사용자 인터페이스에 원형 이미지 또는 사용자 아바타를 표시하는 데 사용된다. 앱에서 프로필 사진, 사용자 아이콘 및 기타 원형 이미지를 표시하는 쉽고 편리한 방법을 제공한다.

CircleAvatar 위젯은 사용자 정의가 가능하며 로컬 이미지, 네트워크 이미지 및 자산 이미지를 포함하여 다양한 이미지와 함께 사용할 수 있다. 앱의 디자인 및 기능과 일치하도록 아바타의 크기, 테두리, 배경색 및 기타 속성을 사용자 지정할 수 있다.

CircleAvatar 위젯은 Text와 같은 다른 위젯과 함께 사용하여 아바타로 표시되는 사용자 또는 객체에 대한 추가 정보를 표시할 수도 있다.

생성자 매개변수

  • child: 원형 아바타 내부에 표시되는 자식 위젯.
  • backgroundColor: 원형 아바타의 배경색.
  • backgroundImage: 서클 아바타의 배경으로 표시될 이미지.
  • radius: 원형 아바타의 반지름.
  • foregroundColor: 자식 위젯의 색상을 지정하는 데 사용되는 원형 아바타의 전경색.
  • onBackgroundImageError: 배경 이미지 로딩 중 오류 발생 시 호출되는 콜백 함수.
  • foregroundImage: 원형 아바타의 전경으로 표시될 이미지.
  • onForegroundImageError: 포그라운드 이미지 로딩 중 에러 발생 시 호출되는 콜백 함수.
  • minRadius: 서클 아바타의 최소 반지름.
  • maxRadius: 원형 아바타의 최대 반지름.
  • emanticLabel: 서클 아바타의 시맨틱 레이블로, 시각 장애가 있는 사용자에게 아바타에 대한 설명을 제공하는 데 사용됨.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: CircleAvatar(
            backgroundImage: AssetImage('assets/images/avatar.png'),
            radius: 75.0,
            child: Text(
              'John',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

TextFormField

Flutter의 'TextFormField' 위젯은 사용자가 텍스트를 입력하고 편집할 수 있는 텍스트 입력 필드를 만드는 데 사용된다.

'TextFormField' 위젯은 사용자가 이름, 이메일 주소, 비밀번호 또는 기타 유형의 정보를 입력할 수 있도록 하는 등 다양한 용도로 사용할 수 있다.

TextFormField 위젯을 사용하면 개발자가 키보드 유형, 텍스트 입력 유효성 검사, 입력 장식 등과 같은 텍스트 입력 필드의 여러 측면을 사용자 지정할 수 있다. 또한 'Form' 및 'FlatButton'과 같은 다른 위젯과 함께 사용하여 완전한 기능을 갖춘 양식 또는 검색 표시줄을 만들 수 있다.

생성자 매개변수

  • autovalidate: 텍스트 입력 필드가 사용자가 입력할 때 자동으로 유효성을 검사해야 하는지 여부를 나타내는 값.
  • autofocus: 위젯이 생성될 때 텍스트 입력 필드가 자동으로 포커스를 받을지 여부를 나타내는 값.
  • controller: 텍스트 입력 필드에 표시되는 텍스트를 제어하는 TextEditingController.
  • cursorColor: 텍스트 입력 필드의 커서 색상.
  • decoration: 레이블, 힌트 텍스트, 테두리 및 기타 시각적 요소를 포함하여 텍스트 입력 필드의 모양을 제어하는 InputDecoration.
  • enabled: 텍스트 입력 필드를 활성화 또는 비활성화해야 하는지 여부를 나타내는 값.
  • keyboardType: 사용자가 텍스트 입력 필드를 누를 때 표시되어야 하는 키보드 유형.
  • maxLength: 텍스트 입력 필드에 입력할 수 있는 최대 문자 수.
  • maxLines: 텍스트 입력 필드가 표시할 수 있는 최대 줄 수.
  • minLines: 텍스트 입력 필드에 표시되어야 하는 최소 라인 수.
  • obscureText: 암호 입력과 같이 텍스트 입력을 가려야 하는지 여부를 나타내는 값.
  • onChanged: 입력 필드의 텍스트가 변경될 때마다 호출되는 콜백 함수.
  • onFieldSubmitted: 사용자가 텍스트 입력 필드를 제출할 때 호출되는 콜백 함수,
  • textInputAction: "완료" 또는 "다음"과 같이 사용자가 텍스트 입력 필드를 제출할 때 표시되어야 하는 텍스트 입력 동작의 유형.
  • validator: 양식이 제출될 때 텍스트 입력 필드를 검증하는 데 사용되는 콜백 함수.

예시


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextFormField Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                TextFormField(
                  controller: _emailController,
                  decoration: InputDecoration(
                    labelText: 'Email',
                  ),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter your email';
                    }
                    return null;
                  },
                ),
                TextFormField(
                  controller: _passwordController,
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: 'Password',
                  ),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter your password';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 16.0),
                RaisedButton(
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      print('Form is valid!');
                      print('Email: ${_emailController.text}');
                      print('Password: ${_passwordController.text}');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Positioned

Flutter의 Positioned 위젯은 Stack 위젯에서 부모를 기준으로 자식 위젯을 배치하는 데 사용된다. 이를 통해 개발자는 절대 좌표 또는 상대 좌표를 사용하여 부모 위젯 내 자식 위젯의 정확한 위치를 지정할 수 있다.

Positioned 위젯은 일반적으로 화면의 특정 위치에 배치해야 하는 위젯 또는 위젯이 겹치는 복잡한 레이아웃을 만드는 데 사용된다. 예를 들어 다른 위젯 위에 배치되는 사용자 정의 버튼, 배지 또는 아이콘을 만드는 데 사용할 수 있다.

Stack에서 사용되는 경우 Positioned 위젯은 left 및 top의 두 가지 필수 속성을 사용한다.. 이러한 속성은 자식 위젯의 왼쪽 및 위쪽 가장자리와 부모 위젯의 왼쪽 및 위쪽 가장자리 사이의 거리를 각각 지정한다. right 및 bottom 속성을 사용하여 자식 위젯의 오른쪽 및 아래쪽 가장자리와 부모 위젯의 오른쪽 및 아래쪽 가장자리 사이의 거리를 각각 지정할 수도 있다.

생성자 매개변수

  • key
  • left : 자식 위젯의 왼쪽 가장자리와 부모 위젯의 왼쪽 가장자리 사이의 거리를 지정하는 필수 double 값.
  • top: 자식 위젯의 위쪽 가장자리와 부모 위젯의 위쪽 가장자리 사이의 거리를 지정하는 필수 double 값.
  • right
  • bottom
  • width: 하위 위젯의 너비를 지정하는 선택적 double 값.
  • height
  • child

예시

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      left: 50,
      top: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

Align

Flutter의 'Align' 위젯은 부모 위젯 내의 지정된 축 또는 점을 따라 자식 위젯을 정렬하여 부모 위젯 내에 자식 위젯을 배치하는 데 사용된다. 이를 통해 개발자는 레이아웃 내에서 자식 위젯의 위치와 정렬을 정확하게 제어할 수 있다.

생성자 매개변수

  • alignment: 상위 위젯 내 하위 위젯의 위치를 지정하는 필수 매개변수. 기본값은 Alignment.center.
  • widthFactor: 하위 위젯의 너비를 상위 위젯 너비의 비율로 지정하는 double 유형의 선택적 매개변수. 기본값은 'null'
  • heightFactor: 하위 위젯의 높이를 상위 위젯 높이의 비율로 지정하는 double 유형의 선택적 매개변수. 기본값은 'null'
  • child: 부모 위젯 내에 위치할 자식 위젯을 지정하는 Widget 유형의 필수 매개변수
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.blue,
            height: 200,
            width: 200,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Container(
                color: Colors.white,
                height: 50,
                width: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Navigator

Flutter에서 Navigator 위젯은 앱의 탐색 스택을 관리하는 데 사용된다. 내비게이션 스택은 화면의 계층 구조를 나타내며, 여기서 맨 위 화면이 사용자에게 표시됩니다.

'Navigator' 위젯은 내비게이션 스택에 새 화면을 푸시하고, 스택에서 화면을 팝하고, 스택에서 화면을 교체하는 방법을 제공한다. 이러한 메서드를 사용하면 사용자가 버튼을 누를 때 스택에 새 화면을 푸시하거나 사용자가 뒤로 버튼을 누를 때 스택에서 현재 화면을 팝하는 것과 같은 일반적인 탐색 패턴을 구현할 수 있다.

Navigator 위젯을 사용하려면 먼저 앱의 개별 화면을 별도의 위젯으로 정의해야 한다. 이러한 화면 위젯은 일반적으로 'Scaffold' 위젯을 루트로 가져야 앱 바, 서랍 또는 기타 공통 UI 요소를 표시할 수 있다.

화면을 정의하고 나면 Navigator 위젯을 사용하여 화면 사이를 탐색할 수 있습니다. Navigator.push() 메서드를 호출하여 탐색 스택에 새 화면을 푸시하거나 Navigator.pop() 메서드를 호출하여 스택에서 현재 화면을 팝하면 됩니다.

생성자 매개변수

Flutter의 Navigator 위젯에는 생성자 매개변수가 없다.

클래스 메소드

  • push: 내비게이션 스택 상단에 새 화면을 추가한다.
  • pop : 내비게이션 스택에서 현재 화면을 제거하고 이전 화면으로 돌아간다.
  • popUntil: 지정된 화면에 도달할 때까지 탐색 스택에서 모든 화면을 제거한다.
  • replace: 현재 화면을 새 화면으로 교체한다.

예시

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to next screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NextScreen(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Screen'),
      ),
      body: Center(
        child: Text('This is the next screen'),
      ),
    );
  }
}
profile
jaybon
티스토리 블로그 https://ondolroom.tistory.com/
이전 포스트

flutter kakao 예제

다음 포스트

플러터 클래스위젯과 함수형위젯

0개의 댓글