Flutter Udemy 강좌 개인 공부 [The Complete 2020 Flutter Development Bootcamp with Dart]

이 글은 제가 유데미 강좌를 보면서 혼자 공부한 것을 정리한 글입니다!

유데미 강좌 : The Complete 2020 Flutter Development Bootcamp with Dart www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2020 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

Section 1: Introduction to Cross-Platform Development with Flutter and Dart(1 ~ 8)

플러터에 관한 소개와 왜 Cross Platform을 사용해야하는지, 왜 Flutter를 사용해야 하는지에 대한 설명들이 있었습니다!

Section 2: Setup and Installation(9 ~ 24)

VScode or InteliJ를 추천하지 않고 안드로이드 스튜디오를 사용해서 수업을 진행한다고 합니다.

섹션2 마무리

Section 3: I Am Rich - How to Create Flutter Apps From Scratch(25 ~ 31)

Material App widget : 우리가 만드는 거의 모든 것은 Material 위젯을 사용한다.
Center widget : 중앙에 위치시키는 위젯
Text widget : 텍스트를 보여주는 위젯

코드의 끝에 "," 를 붙이면 가독성이 좋아진다.

main() 코드를 먼저 찾게되고, app의 시작부분이다!
주석의 중요성을 알려줌

scafford widget
appbar widget
material design 사이트 이용하기

혹은 class의 속성에 대한 정보들도 나와있다.

backgroundColor -> Color

backgroundColor로 예를 들면 이 속성은 Color라는 값을 가져야 한다는 뜻이다.

body widget
image widget
yaml 파일 고치기 & yaml 파일 주의점

app icon 바꾸는 방법
appicon.co 사이트 이용하기

Section 4: Running Your App on a Physical Device(32 ~ 36)

ios 기기에서 실행하려면

1. apple 아이디가 있어야한다.

2. apple 기기가 필요하다. (아이폰 / 아이패드)

3. Xcode가 설치되어 있어야한다.

이 조건을 전부 만족시켜야 하는데

나는 3번이 안되므로... (mac 필요)

Section 5: I Am Poor - App Challenge(37 ~ 42)

canva 웹 사이트 : 디자인 만들기 웹 사이트
혼자 지금까지 만든 것 이용해서 다른 앱 만들어보기

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text("Good"),
          backgroundColor: Colors.red,
          onPressed: () => {print("good man")},
        ),
        backgroundColor: Colors.red[100],
        appBar: AppBar(
          title: Center(child: Text("I'm Good Man")),
          backgroundColor: Colors.redAccent,
        ),
        body: Center(
          child: Image(
            image: NetworkImage(
                'https://assets.rebelmouse.io/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbWFnZSI6Imh0dHBzOi8vYXNzZXRzLnJibC5tcy8yMDU3NDE1OS8yMDAweC5wbmciLCJleHBpcmVzX2F0IjoxNjI3NDkwODc5fQ.oz1xf_B5D5qwrGODENwVE73c1c2ROshoUOUg11SLF5o/img.png?width=581&height=326'),
          ),
        ),
      ),
    ),
  );
}

Section 6: MiCard - How to Build Beautiful UIs with Flutter Widgets(43 ~ 54)

git clone 해서 의존성 파일 다운 받기
stateful, stateless widget : stless, stful

build 메소드가 저장할 때마다 불려져서 hot reload 를 실현시킬 수 있다.

그 전까지는 hot reload 기능이 안됐었는데 build 메소드가 있는 class를 생성하고나서는

hot reload가 정상적으로 작동되는 것을 알 수 있었다.

Container Widget == div 랑 많이 유사하다
Single child widget , multi child widget

container widget은 가능한 크게 확장된다!

이게 뭔말이냐면

Scafford의 backgroundColor를 teal 색으로 주었지만

body에 container 위젯을 사용해서 color를 주면

화면 전체가 white로 변한다.

SafeArea 위젯 = 아이폰의 노치부분이나 가려지는 부분에 위젯들이 배치되지 않도록 해주는 위젯 = 안전한 영역으로 이동 시켜주는 위젯!
height, width 프로퍼티 설명해줌
margin property = EdgeInsets 속성중 all, symmetric, fromLTRB, only 설명
padding = EdgeInsets 속성중 all, symmetric, fromLTRB, only 설명

Container는 single child widget 이기 때문에 하나의 child 밖에 가지지 못한다.

그래서 text로 현재 쓰고 있으니까 image같은 child는 오지 못한다.

Multi children widget = Columns , Rows
Columns의 property
- MainAxisSize = children의 크기에 맞춰서 Columns의 크기를 변경
- VerticalDirection = 수직 방향을 결정 (ex : up, down(default))
- mainAxisAlignment = 정렬 start, end, center, space evenly, space between ... 등등
- crossAxisAlignment = center , end, start (제일 넓은 친구에 맞춰짐)

만약 전부 오른쪽으로 붙이고싶으면

이런식으로 하면 됨.

혹은 stretch를 사용하면 Column 위젯안에서 가로로 다 넓혀버림

SizedBox widget

Flutter layout Cheat Sheet

medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

CircleAvatar
- backgroundImage 설정하기
- asset 설정하기 (yaml 파일 수정)
- 글꼴 바꾸기 (yaml 파일 수정, 구글 폰트 사용, font-family)

Material Icon 사용해보기
지금까지 배운 것들 이용하기
- Row
- Icon
- SizedBox
- Text
- margin property
- 등등

ListTile widget
Sizedbox 에서 Divider 사용하기
Card widget

Section 7: Dicee - Building Apps with State(55 ~ 70)

섹션 7 리뷰

주사위를 눌렀을 때 두 개의 주사위가 랜덤으로 변하는 애플리케이션을 만드는 것이었습니다.

stateful, stateless 위젯의 차이점을 알게 되었고,

state가 변할 때 state와 관련된 위젯은 다시 리로드 된다는 것도 알게되었습니다.

그리고 math 라이브러리를 사용해서 Random().nextInt() 를 사용해서 랜덤으로 이미지를 보여주게 하였습니다.

전체 코드 주소

github.com/junghyeonsu/flutter-udemy/tree/master/dicee-flutter-master

Section 8: Boss Level Challenge 1 - Magic 8 Ball(71 ~ 80)

섹션 8 리뷰

섹션 8은 섹션 7까지 배운 모든 것들을 종합해서 동영상 강의없이

주어진 글만 보고 혼자 코딩을해서 주어진 과제들을 해결하는 섹션입니다.

앞에 배웠던 동영상들을 열심히 수행했기 때문에 크게 어렵지 않았고

느낀건 처음에 아무것도 없는 main 문을 받았을 때 어떻게 해야할 지 모르겠다는

생각이 들어서 예전 코드들을 조금 참고하면서 하긴 했습니다..

이건 아마 익숙하지 않아서 그런것 같습니다.. ㅎ

여튼 섹션 8 끝!

전체 코드 주소

github.com/junghyeonsu/flutter-udemy/tree/master/magic-8-ball-flutter-master

Section 9: Xylophone - Using Flutter and Dart Packages to Speed Up
Development(81 ~ 94)

섹션 9리뷰

실로폰 앱을 만들었습니다.

sound 파일을 어떻게 사용하는지, 라이브러리가 무엇인지,

라이브러리를 어떻게 import하고 사용하는지에 대해서 배웠습니다.

또한 코드 중복을 피하기위해서 dart의 함수 사용법이 섹션 9의 주 된 내용이었습니다.

전체 코드

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {

  void playSound(int number){
    final player = AudioCache();
    player.play('note$number.wav');
  }

  Expanded buildKey({Color color, int soundNumber}){
    return Expanded(
        child: FlatButton(
          color: color,
          onPressed: (){
            playSound(soundNumber);
          },
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              buildKey(color: Colors.red, soundNumber: 1),
              buildKey(color: Colors.orange, soundNumber: 2),
              buildKey(color: Colors.yellow, soundNumber: 3),
              buildKey(color: Colors.green, soundNumber: 4),
              buildKey(color: Colors.green[900], soundNumber: 5),
              buildKey(color: Colors.blue, soundNumber: 6),
              buildKey(color: Colors.purple, soundNumber: 7),
            ],
            crossAxisAlignment: CrossAxisAlignment.stretch,
          )
        ),
      ),
    );
  }
}

깃 허브 업로드가 안되서 메인코드로 대체하겠습니다.

Section 10: Quizzler -Modularising & Organising Flutter Code(95 ~ 113)

섹션 10 리뷰

Dart의 객체 지향 프로그래밍, 클래스 생성, 캡슐화, 추상화, 상속, 다형성

Dart에서 객체지향적으로 어떻게 코딩하는지에 대해서 섹션 10에서 자세히 알려줍니다.

이 퀴즈앱을 만들때에도 Quiz_brain 이라는 객체를 생성해서 각종 메소드들을 부르는식으로

코딩이 진행되었습니다.

그리고 객체지향적 프로그래밍의 가장 핵심인 상속, 다형성, 캡슐화, 추상화와 같은 개념들을

설명해줍니다.

그리고 다음과 같이 라이브러리를 사용해서 경고창을 띄우는 것도 해보았습니다.

전체 코드 주소

github.com/junghyeonsu/flutter-udemy/tree/master/quizzler-flutter-master

Section 11: Boss Level Challenge 2 - Destini(114 ~ 130)

섹션 11 리뷰

스토리가 주어져있고 그 밑에 버튼이 두 개있어서 사용자가 선택을 어떻게 하느냐에 따라 스토리가 달라지는 애플리케이션을 만들었습니다.

새로 배운 기술은 없고 현재까지 배운 것들을 이용해서 구현을 했습니다.

TODO가 어떻게 해야할 지 정말 자세히 설명이 되어있어서 혼자 구현을 하는데도 혼자 구현을 하는 것 같지않았고, 정말 모를 것 같을 때에는 유데미 홈페이지에 사람들이 토론을 하는 공간도 있고, 깃허브 소스 코드도 있기 때문에 BOSS LEVEL CHALLENGE 라는 단어에 너무 겁먹을 필요 없을 것 같습니다.

전체 코드 주소

github.com/junghyeonsu/flutter-udemy/tree/master/destini-challenge-starting-master

Section 12: BMI Calculator - Building Flutter UI for Intermediates(131 ~ 149)

섹션 12 리뷰

theme 사용방법

constructor(생성자), required 속성, 나만의 위젯 만들기

immutablity, const, final

enum (열거형)

삼항 연산자

코드 리팩토링 방법

상수 명명 관습

슬라이더 위젯

슬라이더 테마 위젯

.of

나만의 위젯 만들기

네비게이터

전체 코드 주소

Section 13: Clima - Powering Your Flutter App with Live Web Data(150 ~ 168)

섹션 13 리뷰

전체 코드 주소

Section 14: Boss Level Challenge 3 - Bitcoin Ticker(169 ~ 181)

섹션 14 리뷰

전체 코드 주소

Section 15: Flash Chat - Flutter x Firebase Cloud Firestore(182 ~ 208)

섹션 15 리뷰

전체 코드 주소

Section 16: Flutter State Management(209 ~ 226)

섹션 16 리뷰

전체 코드 주소

'Flutter' 카테고리의 다른 글

Flutter & Dart 입문 커리큘럼 [혼자 공부하면서 배운 커리큘럼] (0)	2020.09.21

Section 1: Introduction to Cross-Platform Development with Flutter and Dart(1 ~ 8)

Section 2: Setup and Installation(9 ~ 24)

Section 3: I Am Rich - How to Create Flutter Apps From Scratch(25 ~ 31)

Section 4: Running Your App on a Physical Device(32 ~ 36)

Section 5: I Am Poor - App Challenge(37 ~ 42)

Section 6: MiCard - How to Build Beautiful UIs with Flutter Widgets(43 ~ 54)

Section 7: Dicee - Building Apps with State(55 ~ 70)

섹션 7 리뷰

전체 코드 주소

Section 8: Boss Level Challenge 1 - Magic 8 Ball(71 ~ 80)

섹션 8 리뷰

전체 코드 주소

Section 9: Xylophone - Using Flutter and Dart Packages to Speed UpDevelopment(81 ~ 94)

섹션 9리뷰

전체 코드

Section 10: Quizzler -Modularising & Organising Flutter Code(95 ~ 113)

섹션 10 리뷰

전체 코드 주소

Section 11: Boss Level Challenge 2 - Destini(114 ~ 130)

섹션 11 리뷰

전체 코드 주소

Section 12: BMI Calculator - Building Flutter UI for Intermediates(131 ~ 149)

섹션 12 리뷰

전체 코드 주소

Section 13: Clima - Powering Your Flutter App with Live Web Data(150 ~ 168)

섹션 13 리뷰

전체 코드 주소

Section 14: Boss Level Challenge 3 - Bitcoin Ticker(169 ~ 181)

섹션 14 리뷰

전체 코드 주소

Section 15: Flash Chat - Flutter x Firebase Cloud Firestore(182 ~ 208)

섹션 15 리뷰

전체 코드 주소

Section 16: Flutter State Management(209 ~ 226)

섹션 16 리뷰

전체 코드 주소

'Flutter' 카테고리의 다른 글

티스토리툴바

Section 9: Xylophone - Using Flutter and Dart Packages to Speed Up
Development(81 ~ 94)