본문 바로가기

공부방/Flutter33

[Flutter] Column 위젯(함수)를 사용해보자 목차1. Column 위젯 소개2. Column 위젯 속성3. Column 위젯 배치4. Column 위젯 예제   1. Column 위젯 소개  Flutter의 Column 위젯은 수직 방향으로 자식 위젯들을 배열하는 데 사용.  주로 세로로 여러 위젯을 배치할 때 사용되며, 자식 위젯들은 위에서 아래로 쌓이게 된다.   2. Column 위젯 속성  MenuDrawer 위젯을 사용하려면 다음과 같은 간단한 단계   3. Column 위젯 배치 1) 수직정렬방향 Column은 세로로 위젯을 배열(Defalut).  mainAxisAlignment 속성을 사용하여 위젯들을 수직 방향으로 정렬.2) 자식 위젯의 배치 crossAxisAlignment 속성을 사용하여 자식 위젯들을 수평 방향으로 정렬.  4.. 2024. 5. 6.
[Flutter] MenuDrawer위젯(함수)에 대해 알아보자 목차1. MenuDrawer 위젯 개요2. MenuDrawer 위젯 사용 방법3. MenuDrawer 위젯 속성 및 커스터마이징4. MenuDrawer 위젯 활용 예시5. MenuDrawer 위젯 사용 시 주의 사항    1. MenuDrawer 위젯 개요  ○ Flutter의 MenuDrawer 위젯은 앱 측면에 메뉴를 표시하는 데 사용되는 유용한 위젯. ○ 햄버거 아이콘을 클릭하거나 화면 가장자리를 스와이프하면 메뉴가 펼쳐져 사용자가 옵션을 선택할 수 있다. ○ MenuDrawer 위젯은 네비게이션, 설정, 정보 등 다양한 용도로 활용될 수 있다.   2. MenuDrawer 위젯 사용 방법  MenuDrawer 위젯 사용 단계1) Scaffold 위젯 사용2) MenuDrawer 위젯 구성   3... 2024. 5. 5.
[Flutter]FadeInPhoto 위젯(함수)란? 사용방법 및 예제 목차1. FadeInPhoto 위젯이란?2. FadeInPhoto 위젯 사용 방법3. FadeInPhoto 위젯 속성 및 커스터마이징4. FadeInPhoto 위젯 활용 예시5. FadeInPhoto 위젯 사용 시 주의 사항    1. FadeInPhoto 위젯이란?  Flutter의 FadeInPhoto 위젯은 이미지를 로드하고 점진적으로 표시하는 데 사용되는 유용한 위젯.  이미지가 로드되는 동안 빈 공간을 보여주는 대신, FadeInPhoto 위젯은 이미지가 점차적으로 나타나면서 자연스러운 시각적 효과를 제공한다.   2. FadeInPhoto 위젯 사용 방법  FadeInPhoto 위젯을 사용하기 위한 간단한 단계1) FadeInImage 패키지 설치2) FadeInPhoto 위젯 사용   3. .. 2024. 5. 1.
[Flutter] Toast위젯(함수)에 대해서 1. Toast 위젯 개요  Flutter의 Toast 위젯은 사용자에게 간단한 메시지를 짧게 띄워 보여주는 데 사용되는 유용한 위젯.   토스트 메시지는 일반적으로 화면 아래쪽에 나타나며, 정보 전달, 알림, 피드백 제공 등 다양한 용도로 활용.   2. Toast 위젯 사용 방법 Toast 위젯을 사용하기 위한 단계1) fluttertoast 패키지 설치2) Toast 메시지 작성3) Toast 위젯 표시   3. Toast 위젯 속성 및 커스터마이징  Toast 위젯은 다양한 속성을 제공하여 원하는 대로 디자인하고 사용자 경험을 맞춤 설정할 수 있다.속성설명toasLength메시지 표시 시간 (LENGTH_SHORT, LENGTH_LONG)gravity메시지 위치 (TOP, CENTER, BOTTO.. 2024. 4. 20.
[Flutter] Stack위젯(함수)에 대해서 목차 1. Stack 위젯 개요 2. Stack 위젯 사용 예시 3. Stack 위젯 고급 기능 4. Stack 위젯 사용 시 주의 사항 5. Stack 위젯 활용 사례 1. Stack 위젯 개요? 1) 기능 여러 위젯을 겹쳐 배치하고 위치, 크기, 정렬을 제어. 2) 주요 속성 속성 설명 children 겹쳐 배치할 위젯 목록 olignment 위젯 배치 방식(ex. Alignment.topLeft, Alignment.center) textDirection 위젯 배치 방향(ex. TextDirection.ltr, TextDirection.rtl) fit Stack 영역에 위젯을 맞추는 방식(ex. StackFit.loose, StackFit.tight) overflow Stack 영역을 넘어서는 위젯 .. 2024. 4. 18.
[Flutter] FloatingActionButton위젯(함수)란? 목차 1. 소개 2. 속성(Properties) 1) onPressed 2) backgroundColor 3) foregroundColor 4) child 3. 위치 설정(Positioning) 1) 기본 위치 설정 2) 위치 조정 4. 모양 설정(Shape) 1) Shape 설정 2) Shape 변경 5. 사용 예제(Example) 1. 소개 Flutter의 FloatingActionButton 위젯은 화면에 부각된 행동을 나타내는 둥근 버튼을 생성하는 데 사용됩니다. 주로 앱의 주요 작업 또는 사용자 상호 작용을 트리거하는 데 사용됩니다. 이 위젯은 Scaffold 위젯 내에서만 사용할 수 있습니다. 2. 속성(Properties 속성 설명 onPressed FloatingActionButton을 눌.. 2024. 4. 14.