lgvv98

✅ 이번 시간에는 버튼에 대해서 알아볼 예정이야. 패치강좌가 1,2로 연속해서 있어서 18강 이후에 들으면 좋아 RaisedButton -> ElevatedButton FlatButton -> TextButton OutlineButton -> OutlinedButton 강의가 길었지만 전체적으로 어려운건 없었어. 🔸주요 특이점🔸 - TextButton에서 background속성이 존재하지만 다른 버튼에는 백그라운드가 없어서 styleForm안에서 color를 사용해서 백그라운드를 설정해야 한다. ✅ 코드리뷰 및 이해 import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 void main() => runA..

✅ 이번 시간에는 플러터 2.0으로 인해서 SnackBar의 사용이 완전히 달라짐. 정리가 다음 포스팅까지 이어짐. 1. ScaffoldMessenger class2. Buttons(TextButton, ElevatedButton, OutlinedButton)3. Global Key  ✅ Why ScaffoldMessger?우선 Scaffold.of(context)를 살펴보자 기본적으로 Scaffold.of(context)의 경우에는 위로 올라가면서 가장 가까운 Scaffold를 찾아 반환하라는 의미.하지만, 이 과정에서 Scaffold.of 메소드가 가지고 있는 현재의 컨텍스트로는 Scaffold를 찾을 수 없었다. 이 문제를 해결하기 위해서 Builder위젯을 생성해서 새로운 context를 Scff..

✅이번 시간에는 BuildContext에 대해서 보고 넘어가자..! BuildContext의 개념과 역할은 상당히 중요하나, 공식문서에는 추상적으로 나와있다. "Scaffold.of() called with a context that does not contain a Scaffold" 라는 에러를 종종 볼 수 있는데, 개념과 역할을 정리해 보자. flutter 공식 문서에 따르면 BuildContext의 정의를 Dart는 모든 것이 타입을 갖고 있다. Widget이란 타입의 build메소드를 통해 BuildContext타입의 context를 인자값으로 받아온다. Scaffold의 위치를 참조하면 에러가 나는데, 그럼 어떻게 참조해야할까? 부모의 context를 갖고 있으니 context를 참조하면 가능하..

✅이번시간에는 지난 시간에 이어서 Drawer 메뉴 만들기 2에 대해서 알아보려고 해. Drawer 1,2가 나뉜 이유는... 내가 지난 시간에 1까지 밖에 시간이 안되서 1까지 공부하고 포스팅을 했는데 거기에 2를 합치는 것이 너무 번거로워서 그냥 따로 분기하기로 함..! 이번 시간 주요 내용은 이렇게 돼! ✅코드리뷰 및 코드 설명 import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return..

✅ 이번 시간에는 Drawer 메뉴 만드는 방법에 대해서 알아볼 예정이야. 아래 이미지를 보면 AppBar에서 햄버거 모양을 클릭하면 뷰가 저런식으로 열리는 것을 의미해. iOS 네이티브 개발에서는 이런 화면을 만들기 위해서 라이브러리를 사용했었는데... Drawer로 쉽게 된다는게 충격 ✅ Swift로 iOS 개발할 때 사용한 라이브러리 https://github.com/John-Lluch/SWRevealViewController GitHub - John-Lluch/SWRevealViewController: A UIViewController subclass for presenting side view controllers inspired on the Fac A UIViewController subcla..

✅ 이번 시간에는 Appbar 메뉴 아이콘 추가하는 방법에 대해서 알아보자. 스위프트에서는 네비게이션 바라고 부른다..! 시작하기에 앞서... 이번에는 print를 통해 로그를 찍어보는 작업이 많았는데 안드로이드 스튜디오에서는 로그를 볼 수 있는 창이 안보이는거임... 진짜 너무 분노한 상태에서 어떻게 할까.. 찾아보다가 바로...! 보이는가? 실행 옆에 벌레모양을 클릭하면 console창이 열리면서 디버깅 콘솔이 열려 ㅠ... 이거 없으면 json 내려받아서 구조볼 때 어떻게 하는지 고민이었는데 아무튼 ✅ 코드리뷰 및 코드 이해 import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 void main()..

✅ 프로그래밍 상에서 클래스란? - 객체가 가져야하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할 ✅ 프로그래밍 상에서 객체란? - 클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함. ✅ 프로그래밍 상에서 인스턴스란? - 클래스를 기반으로 생성된다. - 클래스의 속성과 기능을 똑같이 가지고 있고, 프로그래밍 상에서 사용되는 대상 ✅ 다트패드에서 클래스의 생성자에 대해서 알아보자 class Person { String name = 'John'; int? age; String? sex; } void main() { Person p1 = new Person(); p1.age = 30; print(p1.age); } // return 30 클래스의 생성자는 자바에서 썼던 방식과 같아서 쉽게 ..

✅ 이번 시간에는 part1,2를 동시에 정리해 보았다. 이전에 개발을 했어서 그런지 위젯을 다루는 것이 크게 어렵지 않았다. ❗️포스팅을 보기 전 이 글의 맨 아래에 변경사항 부분이 있는데 꼭 참고하길 바람. 여기서는 Divider와 Center안에 Columns 그 안에 Center를 이용해서 UI구성을 보았는데 상당히 신박했다 ✅ 코드리뷰 및 코드에 대한 설명 import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext..

1. 캐릭터 카드 페이지 만들기 ✅ CenterTitle : title을 중앙에 위치 시킴 - True or False ✅ appbar Background : 앱바 배경색 바꿈 ✅ elavation : 앱 바에 있는 그림자 설정 2. padding widget ✅ Padding 위젯 사용 ❗️유의할 점❗️ 플러터에서는 가로축에 대해서는 width를 꽉 채우게끔 레이아웃이 잡혀 있는데, 세로축에 대해서는 레이아웃을 잡지 않는다. 따라서 mainAxisAlignment: MainAxisAlignment.center 이 코드는 세로 축을 기준으로 중심에 위치하게 하는 코드이다. ✅ Center 위젯 사용 Center를 통해 가로축 상의 가운데를 잡고, 세로축 상의 중심은 mainAxisAlignment: Ma..

1. 플러터 프로젝트 폴더의 구성 ✅ pubspec.ymal : 프로젝트의 버전 라이브러리 등등을 관리 ✅ 안드로이드 폴더 및 iOS폴더는 각각의 플랫폼에 배포하기 위한 코드를 가짐 ✅ test폴더는 Dart코드 테스팅 위한 코드 ✅ ⭐️ lib폴더 여기서 앱 만들 때 작업을 주로 한다 2. 코드의 기본 내용 / 앱 페이지의 기본 구조 공식화 하기 ✅ 클래스 명과 함수 명 - main(), runApp() -> 어떤 기능을 담당하는 함수 (첫글자 소문자) - MyApp() -> 클래스 (첫글자 대문자) ✅ 클로징 레이블 - 플러터는 위젯으로 작업해서 닫는 부분이 정말 중요한데, 클로징 레이블을 주석을 제공해줌. 3. 첫번째 플러터 앱 만들기 ✅ 코드 리뷰 및 코드에 대한 설명 import 'package..