수니의 개발새발

📌 이번 글은 Flutter Widget을 만들 때 상속받는 StatelessWidget과 StatefulWidget의 차이점 정리입니다. 먼저 두 위젯은 Scaffold를 이용해 동일한 방식으로 화면을 구성합니다. StatelessWidget (SLW) 단 한번만 build 하여, 화면을 한 번만 그린다. 정적 화면 구현시에 사용하면 성능상 좋다. 👩🏻‍💻 예제 class SLWPage extends StatelessWidget { int _count = 0; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( tit..

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다. 📌 이번 글은 책의 샘플 앱을 만들면서 공부한 위젯 정리입니다. Icon Icon을 표시해주는 위젯 MaterialIcon(Icons), CupertinoIcon 사용 가능 이외 Icon 라이브러리: https://pub.dev color 속성: MaterialColor(Colors), CupertinoColors, CustomColors(Color) 사용 가능 size 속성: 크기 👩🏻‍💻 사용 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is..

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다. 📌 이번 글은 책의 샘플 앱을 만들면서 공부한 위젯 정리입니다. Column / Row 자식을 수직/수평 배열로 표시하는 위젯 스크롤되지 않음 (사용 가능한 공간에 맞는 것보다 Column/Row에 더 많은 자식이 있으면, ERROR) 공간이 부족할 경우 스크롤 할 수 있도록 ListView 사용 mainAxisAlignment 속성: Column/Row의 자식을 기본 축을 따라 배치하는 방법 (MainAxisAlignment 사용) MainAxisAlignment Flex Layout에서 기본 축을 따라 자식을 배치하는 방법 .start / .center / .end / ... 👩🏻‍💻 사용 예제 Row import 'pac..

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다. 📌 이번 글은 책의 샘플 앱을 만들면서 공부한 위젯 정리입니다. Scaffold MatarialApp안에 디자인할 때 구조가 있는 도화지 appBar 속성: Scaffold 상단에 표시할 앱 바 (AppBar 위젯 사용) bady 속성: Scaffold의 기본 콘텐츠 AppBar material design의 앱 바 위젯 구조 Container 빈 박스 위젯 decoration 속성: 박스 색상, 모양, 테두리 선 변경 가능 (BoxDecoration 위젯 사용) BoxDecoration Box 를 그리는 다양한 방법을 제공 border 속성: Box border 색상, 굵기 borderRadius 속성: Box border 모..

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다. 📌 이번 글은 책의 샘플 앱을 만들면서 공부한 위젯 정리입니다. Text style 속성: Text Style 설정 Text("Hello") Text("Hello", style: TextStyle(fontWeight: FontWeight.bold)) SafeArea 핸드폰 기기별로 조금씩 다른 StatusBar 영역에 여백을 넣어주는 위젯 Debug 배너 해제 CupertinoApp의 debugShowCheckedModeBanner를 false로 설정 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Cupertin..

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다. 📌 이번 글은 책의 샘플 앱을 만들면서 공부한 위젯 정리입니다. Spacer 위젯 사이의 간격을 조정하는 데 사용 Row( children: [ Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),..