본문 바로가기

공부방/Flutter33

[Flutter] Padding 함수(위젯) 1. Padding함수(위젯)이란? 자식 위젯을 감싸고 그 주위에 간격(패딩)을 추가하는 데 사용. 이것은 자식 위젯 주위에 여백을 추가하여 레이아웃을 더욱 깔끔하게 만들 수 있다. 2. 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Padding Example'), ), body: Padding( padding: EdgeInsets.all(20.0),.. 2024. 2. 13.
[Flutter] Text함수(위젯) 1. Text위젯이란? Flutter에서 텍스트를 표시하는 데 사용. 이 위젯은 문자열을 표시하고 다양한 스타일 및 레이아웃 옵션을 설정할 수 있다. 2. 기본적인 형태 Text( '텍스트 내용', style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.normal, fontStyle: FontStyle.normal, color: Colors.black, letterSpacing: 1.0, // 기타 스타일 옵션들... ), ), 여기서 TextStyle 위젯은 텍스트의 스타일을 정의한다. 이것은 텍스트의 크기, 글꼴 가중치, 스타일, 색상 등을 제어한다. Text 위젯 내에서 스타일을 변경하는 것 외에도, TextSpan을 사용하여 텍스트의 일부분에 대해 .. 2024. 2. 9.
[Flutter] Transform.translate 함수(위젯) 1. Transform.translate란? 주어진 Widget을 지정된 x 및 y 좌표로 이동시키는 데 사용. 이 함수는 Transform 위젯의 일부로 사용되며, 이를 통해 Widget을 변환하고 조작할 수 있다. 2. 기본구조 Transform.translate( offset: Offset(dx, dy), child: YourWidget(), ) 3. 매개변수 매개변수 설명 offset Offset 객체를 통해 이동할 거리를 지정 Offset은 x 및 y 좌표를 나타내는 데 사용되며, Offset(dx, dy) 형태로 생성. dx : x 축으로의 이동 거리 dy : y 축으로의 이동 거리 child 이동시킬 대상이 되는 Widget을 지정. Transform.translate는 이 Widget을 주.. 2024. 1. 29.
[Flutter] 유용한기능 1. 어떤기능인가? Flutter에는 수많은 Widgets로 이루어져 있는데 현재의 Widgets에서 상위 위젯을 추가해야할 경우가 자주 발생할 수 있다. 그때마다 현재 Widgets을 잘라내고 상위위젯 만들고 다시 붙여넣고... 반복하다가 실수가 생길수도 있고 또 어디서 에러났는지 한참찾고... 그 작업을 안할 수 있게 해주는 기능! Code Action이라고 불려지고 있는거 같다. 2. 사용방법 Widgets을 선택하면 좌측에 저렇게 노란전구가 표시가 되는데 저걸 클릭하면 이런식으로 팝업메뉴가 펼쳐지는데 More Actions 부분을 자세히보면 모든게 Widgets이다. 이 Widgets를 클릭하면 현재 Widgets의 상위에 선택한 Widgets가 생겨난다! 이건 정말 편해... 잊지 않겠다! 2024. 1. 21.
[Flutter] 가이드라인 셋팅하기 1. 가이드라인이란? 이렇게 위젯의 앞쪽에 흰색선으로 이어지는 부분을 뜻한다. 흰색선을 따라가면 해당 위젯의 부모 혹은 자식이 어떻게 이어져 있는지 확인이 가능하다. 2. 가이드라인 셋팅(VsCode의 셋팅방법) VsCode화면에서 좌측 하단에 톱니바퀴모양을 클릭 후 나오는 팝업메뉴에서 Settings 를 클릭 보통 이화면이 나오는데 여기서 오른쪽 상단에 표시한 아이콘을 클릭 (간혹 저 아이콘이 클릭된 상태가 나올때도 있음) 아이콘을 클릭하면 settings.json이라는 파일이 열리며 표시해놓은 부분 dart.previewFlutterUiGuides : true 를 입력 후에 저장하고 프로그램을 재부팅하면 이런식으로 위젯의 부모자식간에 흰색선이 생기게 된다. 2024. 1. 17.
[Flutter] SizeBox 클래스 1. SizeBox 클래스 정해진 크기로 자식 위젯을 감싸는 용도. SizeBox는 크기를 지정하기 위한 여러 옵션을 제공 2. 생성자 SizedBox({ Key? key, double? width, double? height, Widget? child, }) 3. 속성 1) key : 위젯의 고유키를 지정 SizedBox( key: UniqueKey(), child: YourWidget(), ) 2) width : 가로 크기를 지정 SizedBox( width: 100.0, child: YourWidget(), ) 3) height : 세로 크기를 지정 SizedBox( height: 50.0, child: YourWidget(), ) 4) child : 크기를 지정할 자식 위젯을 포함 SizedBox.. 2024. 1. 14.

티스토리툴바