flutter/순한맛(기초) 18

[flutter] 24강 | Collection과 Generic

✅ 변수의 선언은 Flutter 2.0의 null Safety를 보장하지 않음 1. String interpolation - 문자열을 출력할때 $를 넣어서 출력하는 방법 ✅ 코드로 보자 void main() { String name = 'Sean'; print(name); print("Hi $name, what's up?"); } Sean Hi Sean, what's up? 2. Collection & Generic - Collection : 데이터들을 모아서 가지고 있는 자료구조 (ex. List) - Generic : Collection이 가지고 있는 데이터들의 데이터 타입을 지정 ✅ 코드로 보자 void main() { List number = new List(); number.add(2); num..

[flutter] 23강 | Navigator 와 pushName 메소드 이해하기

✅ 이번 시간에는 배운게 많은 시간이었다. 특히나 오타로 슬래시랑 역슬래시 오타로 인해서 한참을 헤매었는데 찬찬히 살펴보도록 하자. 또한 파일을 드디어 나누어서 작업했는데 이 부분도 눈여겨볼 부분이다. 파일을 나누면 import를 또다시 해주어야한다. 💡 생각할 점 import가 너무 많으면 관리가 불편하니까 헤더파일 처럼 모을 수 있는 방법이 있는지 알아보기 ✅ 코드 리뷰 - main.dart // main.dart import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키 import 'package:untitled/ScreenA.dart'; import 'ScreenB.dart'; import 'Scre..

[flutter] 22강 | Navigator 이해하기

✅ 이번시간에는 네비게이터를 이용해 화면 전환하기 + 컨텍스트에 대해서 알아볼 예정이야 ✅ Navigator 및 포스팅의 순서 1. Route의 개념 - 스마트폰에서 보여지는 하나의 페이지 화면 ! 2. Navigator의 정의와 push, pop 함수, stack 자료구조 - stack ( FILO ) - push 데이터를 넣기 - pop 데이터를 빼기 - Route(페이지) 는 Navigator라는 위젯이 담당하고 그 구조는 스택 구조이다. 3. MaterialPageRoute위젯과 context - 화면전환할 때, 바로 class 입력해서 이동하는 것이 아니라 화면을 지정해주면서 이동한다. 4. 페이지 이동 기능 구현 완성 ✅ 코드 리뷰 import 'package:flutter/material.d..

[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..