공부방/Flutter33 [Flutter] Container위젯(함수) 1. Container위젯(함수)란? 다른 위젯을 감싸고 설정할 수 있는 강력한 위젯. 이를 통해 UI의 모양과 레이아웃을 제어할 수 있다. Container는 많은 속성을 가지고 있어서 다양한 스타일과 레이아웃을 만들 수 있다. 2. 주요속성 속성 설명 alignment 컨테이너 내부의 자식 위젯 정렬방식 설정 color 컨테이너의 배경색 설정 width 컨테이너의 너비 설정 height 컨테이너의 높이 설정 padding 컨테이너의 내부 여백 설정 margin 컨테이너 외부 여백 설정 decoration 컨테이너의 그림자, 테두리, 그라데이션 등의 효과 추가 3. 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } c.. 2024. 3. 17. [Flutter] BoxDecoration()위젯(함수) 1. BoxDecoration()위젯(함수)란? 컨테이너나 다른 위젯의 배경을 꾸미는 데 사용. 주로 사각형 모양의 위젯에 사용되며, 배경색, 그림자, 모서리 둥글게 처리, 경계선 등을 지정할 수 있다. BoxDecoration은 Flutter의 디자인 요소를 매우 다양하게 다룰 수 있어서 UI 디자인에 많이 활용함. 2. 주요속성 속성 설명 color 위젯의 배경 색상을 지정 image 배경 이미지를 지정. NetworkImage, AssetImage, FileImage 등의 이미지 소스를 사용. border 경계선을 설정. BorderSide 객체를 사용하여 선의 스타일, 색상 및 두께를 지정. borderRadius 모서리를 둥글게 만든다. BorderRadius 객체를 사용하여 각 모서리에 대해 .. 2024. 3. 13. [Flutter] Padding()위젯(함수) 1. Padding()함수 자식 위젯의 주변에 여백을 추가할 때 사용. 이를 통해 위젯 사이의 간격을 조절하거나, 위젯과 화면 경계 간의 여백을 설정할 수 있다. 2. 기본예시 Padding( padding: EdgeInsets.all(16.0), // 여백을 설정합니다. child: // 자식 위젯이 들어갑니다. ) 여기서 padding 속성은 EdgeInsets 객체를 받는다. EdgeInsets는 위젯의 여백을 지정하기 위한 클래스로, 상하좌우 여백을 개별적으로 지정할 수 있다. 예를 들어, 위와 같이 EdgeInsets.all() 함수를 사용하여 상하좌우에 동일한 여백을 설정할 수 있다. 3. EdgeInsets.only() 함수를 이용하여 각방향에 따른 다른 여백설정이 가능하다. Padding(.. 2024. 3. 10. [Flutter] mainAxisAlignment함수(위젯) 1. mainAxisAlignment함수(위젯)이란? 자식 위젯을 주축(main axis)을 따라 정렬하는 데 사용. Row나 Column과 같은 레이아웃 위젯 내에서 자식 위젯들을 정렬할 때 유용하게 활용됨. 2. 옵션 1) MainAxisAlignment.start 주축의 시작 부분에 자식 위젯을 정렬. 2) MainAxisAlignment.end 주축의 끝 부분에 자식 위젯을 정렬. 3) MainAxisAlignment.center 주축의 가운데에 자식 위젯을 정렬. 4) MainAxisAlignment.spaceBetween 자식 위젯 사이에 동일한 간격을 유지하면서 주축을 채운다. 5) MainAxisAlignment.spaceAround 자식 위젯 주위에 공간을 고르게 배분하여 주축을 채운다... 2024. 3. 6. [Flutter] Scaffold()함수(위젯) 1. Scaffold함수(위젯)이란? Flutter에서 Scaffold 위젯은 앱의 기본적인 구조를 나타내는 뼈대를 제공하는 중요한 위젯 중 하나이다. 이를 통해 앱의 주요 구성 요소를 배치하고 관리할 수 있다. Scaffold 위젯은 Material Design의 레이아웃 구조를 따르며, 다양한 구성 요소를 포함할 수 있다. 2. 주요속성 1) appBar AppBar 위젯을 포함하는 속성. 앱 상단에 표시되는 타이틀, 액션 버튼 등을 설정할 수 있다. 2) body 앱의 주요 콘텐츠를 표시하는 위젯을 지정하는 속성. 보통 이곳에는 페이지의 내용이나 다른 중요한 위젯이 위치한다. 3) floatingActionButton 주로 메인 화면에서 사용되며, 스크롤과 함께 움직이는 부동 액션 버튼을 지정하는 .. 2024. 2. 27. [Flutter] SingleChildScrollView함수(위젯) 1. SingleChildScrollView함수(위젯)이란? 자식 위젯이 스크롤 가능한 단일 위젯. SingleChildScrollView는 화면에 표시되는 컨텐츠가 화면 크기를 초과할 때 사용. 이 위젯을 사용하면 화면의 모든 내용을 스크롤하여 볼 수 있다. SingleChildScrollView는 자식 위젯이나 자식 위젯 목록을 가질 수 있다. 이 위젯을 사용할 때, 자식 위젯의 크기가 화면을 초과하는 경우 스크롤이 활성화된다. 자식 위젯이 화면 크기를 초과하지 않으면 스크롤은 활성화되지 않는다. 2. 예시 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget .. 2024. 2. 14. 이전 1 2 3 4 5 6 다음
