flutter 25

[flutter] 21강 | Column, Row 위젯

✅ 이번 시간에는 Column 위젯과 Row 위젯에 대해서 알아볼 예정이야 쉬우니까 쓱 보기 ⭐️ 레이아웃을 학습이나 급할 때, 테스트 하지 않고 이렇게 되는걸 확인할 수 있는 좋은 사이트가 있다. https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e Flutter Layout Cheat Sheet Do you need simple layout samples for Flutter? I present you my set of Flutter layout code snippets. I will keep it short, sweet and simple… medium.com ✅ Columns 위젯은 세로축의 가능한 모든 길이를 갖..

[flutter] 20강 | 컨테이너 위젯 (container widget) 되짚어 보기.

✅ 드디어 여기부터는 순한맛을 벗어나 조금 매운맛 강좌이다 ㅎ..ㅎ 무료 강좌인데 진짜 이렇게 좋을 수가 없음... 유튜브 코딩쉐프님 강좌를 무한히 추천한다. ✅ 이번시간부터는 컨테이너 위젯에 대해서 알아볼 예정인데, 차근차근 봐보자. 우선 플러터 공식 홈페이지 가서 레이아웃 위젯을 확인하는 것도 좋은 방법이겠지? https://flutter-ko.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets Layout widgets flutter-ko.dev 플러터의 컨테이너의 공식 문서를 보면 "Containers with no children try to be as big as possible" childern이 없을경우 컨테이너가 ..

[flutter] 19강 | 빌더 위젯 없이 스낵바 만들기 및 토스트 메시지

✅ 이번 시간에는 스낵바와 토스트 메시지에 대해서 알아보자. 스낵바의 경우에는 패치강의에서 보았다. 그래서 ScaffoldMessenger를 이용해서 스스로 강의의 오류를 수정할 수 있었어 강의에서는 2개로 나눠서 강의를 진행하는데 ScaffoldMessenger와 Toast메시지로 나눠어서 발표한다. 특히, 토스트 메시지 쪽에서 error가 있었어서 error 해결하는 것까지 적어두었으니 꼭 보기 ✅ ScaffoldMessenger 사용하기 import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 void main() => runApp(MyApp()); class MyApp extends Stateless..

[flutter] 27강(패치강좌) | 플러터 2.0 버튼

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

[flutter] 18(26)강 | 플러터 2.0 SnackBar 와 ScaffoldMessenger

✅ 이번 시간에는 플러터 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..

[flutter] 17강 | BuildContext 이해하기

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

[flutter] 16강 | Drawer 메뉴 만들기 2

✅이번시간에는 지난 시간에 이어서 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..

[flutter] 15강 | Drawer 메뉴 만들기 1

✅ 이번 시간에는 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..

[flutter] 14강 | Appbar 메뉴 아이콘 추가하기

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

[flutter] 12강~13강 | Dart 핵심정리 : 클래스와 위젯의 정체

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