# Widget

128개의 포스트

Widget

Widget Flutter 상에서의 위젯이란? UI를 만들고 구성하는 모든 기본 단위 요소 눈에 보이지 않는 요소들까지 위젯(Center, Padding, Column...) 모든것이 위젯이다. StatelessWidgets vs. StatefulWidgets StatelessWidget 상태가 없는 정적인 위젯 스크린상에 존재만 할 뿐 아무것도 하지 않음 어떠한 실시간 데이터도 저장하지 않음 어떤 변화를 유발시키는 value값을 가지지 않음 StatefulWidget 계속 움직임이나 변화가 있는 위젯 데이터를 받게 되었을 때 모양이 바뀜 Widget tree 위젯들은 tree 구조로 정리될 수 있음 한 위젯내에 다른 위젯들이 포함될 수 있음 예시 MyApp -> MaterialApp -> Homescreen -> Scaffold -> AppBar ...

어제
·
0개의 댓글
·

Responsive Flutter Web

Orientation Builder OrientationBuilder is a widget that rebuilds when the screen orientation (portrait or landscape) changes. It can be used to create adaptive layouts that depend on whether the device is in portrait mode or landscape mode.   Media Query MediaQuery is a utility that can be used to retrieve media (i.e., screen) information. The MediaQueryData it provides includes metrics and settings related to the current media, like screen size, orientati

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

[ Flutter ] Widget Overflow 오류 직관적으로 해결

Flutter로 애플리케이션을 개발하다 보면 자주 마주치는 오류가 있습니다. 바로 Widget Overflow 오류인데요. 만약 해당 부분이 꼭 필요하다면 다른 방법을 통해서 직관적으로 해결이 가능합니다. 바로 Expand widget이나 ListView widget 또는 SingleChildScrollView를 사용하는 방법입니다. 개인적으로 Expand 보다는 ListView, SingleChildScrollView를 추천드립니다. 왜냐하면 Expand를 사용하면 화면에서 Overflow가 되어도 그대로 냅두지만 ListView나 SingleChildScrollView를 사용하면 늘어난 만큼 스크롤할 수 있기 때문입니다. > ## Expand 기본 사용법 > ## ListView 기본 사용법 > ## SingleChildScrollView 기본 사용법

2023년 9월 2일
·
0개의 댓글
·

List Widgets

ListTile ListTile widget provides a consistent layout for a title, optional subtitle, leading and trailing widgets, and an onTap callback. Its primary purpose is to make it easy to build individual rows that follow Material Design guidelines without having to manually handle all the styling and layout.   RichText RichText widget allows you to display a paragraph of mixed-style text. With RichText, you can style a part of the text differently from the rest,

2023년 9월 2일
·
0개의 댓글
·

Tabs and Grids

DefaultTabController DefaultTabController is a convenience widget in Flutter that provides a default TabController for its descendants. Instead of manually creating and managing a TabController, you can use the DefaultTabController to handle it automatically, making it easier to work with the TabBar and TabBarView widgets.   TabBar TabBar widget is used in conjunction with the TabController to create a horizontal tab system, allowing users to swipe between

2023년 9월 1일
·
0개의 댓글
·

Video Widgets and Tools

PageView PageView PageView widget is commonly used for building scrollable pages that snap to the screen's viewport size. The PageView widget provides an easy way to create swipeable pages (like in intro screens or tab views). PageView.builder PageView.builder is a constructor for the PageView widget in Flutter, specifically designed for creating scrollable pages with a large (or infinite) number of children. Instead of requiring all children to be provided upfront,

2023년 8월 29일
·
0개의 댓글
·
post-thumbnail

didupdatewidget과 setstate

2023년 8월 28일
·
0개의 댓글
·

Tab Navigation

Default NavBar Widgets BottomNavigationBar BottomNavigationBar widget is a material design widget used to display a navigation bar at the bottom of the screen. It allows users to switch between different main views of an app with a single tap. Typically, apps that use a BottomNavigationBar will have between three and five primary views or destinations. items: A list of BottomNavigationBarItem widgets which represent each tab in the navigation bar. Each item has an icon a

2023년 8월 26일
·
0개의 댓글
·
post-thumbnail

[Flutter] Widget을 List에 넣고 불러오기

BottomNavigationBar 등의 요소에서 내가 사용할 페이지들을 List 형식으로 담아야 한다. 그런데 이 List의 형식이 List 의 형식을 띄어야 한다. 하지만 우리가 선언한 StatelessWidget, StatefulWidget은 Class의 형식이다. 처음에는 아래와 같은 방식으로 선언해보았다. 형식이 맞지 않는다고 flutter에게 혼났다. 그래서 괄호를 붙였더니 되었다. 이제 무슨 차이가 있는지 더 공부해야한다. 아는분 있으면 헬프미.

2023년 8월 24일
·
0개의 댓글
·
post-thumbnail

[Android/Kotlin] 앱 위젯을 만들어보자

💌 [Android/Kotlin] 앱 위젯을 만들어보자 앱 위젯 ❓ 다른 애플리케이션(예: 홈 화면)에 삽입되어 주기적인 업데이트를 받을 수 있는 소형 애플리케이션 뷰 📌 앱 위젯 클래스 생성 위젯을 표현할 AppWidgetProvider 를 상속받은 클래스를 생성한다. 📌 위젯 레이아웃 작성 res/layout 아래에 레이아웃 파일 작성 앱 위젯 디자인 가이드라인 에 따름. 🩵 지원 가능 Layout FrameLayout LinearLayout RelativeLayoutGridLayout 🩵 지원 가능 위젯 클래스 AnalogClock Button Chronometer ImageButton ImageView ProgressBar -

2023년 8월 21일
·
0개의 댓글
·

Useful Widgets and Constructors

ThemeData Setting properties such as text and color inside the theme data within the build method can save us a lot of time from hard coding reusable codes. To access theme themes, we use the Theme.of(context) widget.   Flexible Flexible allows us to create multiple UI screens without hard coding. We can easily set the ratio of the screens using the flex property. ![](https://velog.velcdn.com/images/hjbaek5796/post/49ef25fb-6e26-47c6-8556-ab4d4

2023년 8월 17일
·
0개의 댓글
·

Stateful Widgets

State What is State? In Flutter, a "state" refers to the data that can change over time and affect the appearance or behavior of the user interface. Flutter follows a reactive programming model where the UI is automatically updated when the underlying state changes. Stateless Widget This is a widget that doesn't have any mutable state. It simply builds the UI based on the input it receives via its constructor (properties or parameters). Stateless widgets are ideal for UI comp

2023년 8월 16일
·
1개의 댓글
·
post-thumbnail

All about Widgets

In Flutter, widgets are the building blocks of the user interface (UI). They represent the visual elements and layout structures that make up your app's UI. Everything you see on the screen in a Flutter app is a widget, whether it's a button, text, image, or even the entire app itself. Widgets can be combined and nested to create complex UI designs.   Scaffold A Scaffold is a commonly used widget that provides a basic structure for creating the primary layout of an app's

2023년 8월 14일
·
0개의 댓글
·
post-thumbnail

[Flutter] Widget에 대하여

1. Widget flutter에서 widget은 UI를 구성하는 기본 단위라고 생각하면 된다. swift를 공부하다가 flutter를 사용했어서, widget의 개념이 생소하였다. Container, SizedBox, margin, padding, Text, Row, Column 등 사실 눈에 보이든 보이지 않든, view를 구성하는 모든 요소를 widget이라고 칭한다. 위젯의 종류는 크게 두 가지로 분류 할 수 있다. Stateful Widget Stateless Widget 1) Stateful Widget Flutter에서 Stateful Widget은 사용자의 이벤트 혹은 상호작용에 따라 값이 바뀌는 위젯이다. 즉 현재 화면에서 변화가 있는 위젯이다. StatefulWidget을 상속받아서 생성한다. ex) Textfield, button 등 > 상태의 변화는 setState method를 사용하여

2023년 8월 10일
·
0개의 댓글
·
post-thumbnail

Flutter의 State Widget

Widget의 두가지 종류 Stateless Widget: build 메서드를 통해 UI를 출력한다. Stateful Widget: 데이터가 변경될 때 이 변화를 UI에 반영하여 실시간으로 볼 때 사용된다. Stateful Widget은 두가지의 부분으로 나뉘어짐 상태가 없는 위젯 그 자체 위젯의 state는 위젯의 상태로써 Widget에 들어갈 데이터와 UI를 넣는 곳이다. 위 코드는 VSC의 자동 완성으로 추가되는 StatefulWidget 코드이다. 다음은 지금까지 배운 내용을 바탕으로 만든 하나의 화면이다. Plus 아이콘을 누르면 값이 올라간다. 하지만 다음과 같이 했더니 값이 올라가지 않는다.. 왜그럴까.. setState 네이티브의 관점으로 봤을 때는 정상적으로 작동해야하는 위의 코드이다. 하지만 왜 작동하지 않았을까? setState 함수가 사용되지 않았다. **setState는 state가 변경되었다

2023년 8월 10일
·
0개의 댓글
·

[Flutter] Image에 ripple효과 넣기

일단 묻따 코드! 처음에 Image에 버튼을 넣어보려고 IconButton도 사용해보고 Inkwell도 사용해봤다 😂 그러나!! 리플효과가 뒤로 감쳐지는 것! 이유는 명확하지 않지만 아무래도 Image를 랜더링하는 중요도가 Inkwell 보다 우선 순위이지 않을까 싶다!.. 때문에 Stack형태로 값을 줘도 Material없이는 여전히 리플효과가 감춰진다(?) Material ! 로 감싸주기 실제로 Material을 사용해 형태를 커스터 마이징 할 때 Material의 우선순위가 먼저라 그런지 크기도, shadow주는 것들도 Material 을 통해 맞춰지는 상황이 많았다. 물론 이 경우에선 splash효과를 위한 것이기에 도움이 됐댜..!

2023년 7월 27일
·
2개의 댓글
·
post-thumbnail

Flutter - LayoutBuilder

LayoutBuilder 부모 위젯의 크기에 따라 달라질 수 있는 Widget Tree 를 빌드한다. builder 함수는 다음과 같은 상황에서 호출된다. 부모 widget 이 업데이트 되었을때. 부모 widget 이 다른 constraints 를 전달할때. widget 이 처음 layout 될때. builder 함수가 구독하는 종속성이 변경될 때. 이를 활용하여 각 디바이스의 크기에 맞는 Layout 을 연출할 수 있다. (반응형) LayoutBuilder 를 사용하는 간단한 방법은 아래 코드와 같다. builder 함수를 호출하여 각 제약조건에 따른 Widget 을 return 해주면 된다. 위와 같은 LayoutBuil

2023년 7월 26일
·
0개의 댓글
·
post-thumbnail

위젯의 제거

2023년 7월 7일
·
0개의 댓글
·

Dart 클래스 & 위젯

class { 속성: 액정, 카메라 모듈, 홈버튼, 스크린 기능: 전화 걸기, 사진찍기, 인터넷 검색 } 이렇게 만들어진 class를 인스턴스라고 부름 클래스란? 객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할 객체란? 클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함 인스턴스란? 클래스를 기반으로 생성됨 클래스의 속성과 기능을 똑같이 가지고 있고 프로그래밍 상에서 사용되는 대상 // 클래스명은 대부분 대문자로 시작 class Person { // 클래스에서 정의된 변수를 멤버변수라고 부름 late String name; // var 타입추론 키워드 late int age; late String sex; // 생성자, ()안에 아규먼트 정의시 인스턴트 생성시 아규먼트 입력 필요 // 단, 네임드 아규먼트 설정 {} 시 아규먼트 임의 입력 가능 Person(String

2023년 6월 20일
·
0개의 댓글
·
post-thumbnail

singlechildscroll view의 활용

safearea를 scsv로 감싸서 키보드가 올라왔을때 영역침범 에러를 일으키는 현상을 방지

2023년 6월 17일
·
0개의 댓글
·