🕊 Flutter 10

로그인 기능 구현

Route 설정하기 initialRoute 프로퍼티는 앱의 시작점을 나타내는 route를 정의하고, routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다. 참고로 home은 initialRoute랑 같기 때문에 둘이 동시에 쓰면 충돌한다. initialRoute를 쓰면 home은 쓰지 말자. String으로만 해버리면 조금이라도 스펠링이 틀릴 시에 앱이 충돌이 날 수 있기 때문에 변수 선언 해준것으로 바꾸어주었다. static을 변수 선언시에 써준 이유는 WelcomeScreen().id로 불러와주게 되면, 전체 Class가 더 불러와지기 때문에 메모리 효율에 있어서 별로 좋지 않다. static을 쓰게 되면 클래스내에서 딱 특정 property ..

날씨 어플 만들기

관습적으로 폴더 분리할 때, services는 데이터 처리, screens는 UI를 담당한다. 기초 개념 class는 청사진이다. flutter에서 거의 모든 것을 만들 때 이 청사진을 사용한다. object는 실제 만들어지는 제품이라고 생각하면 된다. class는 두가지 중요한 것이 있다. 바로 properties와 method이다. 차로 비유하면 properties는 차의 색깔, 좌석수 이런 것이고, method는 drive(), break() 같은 것이다. class Car { int numberOfDoors = 5; void drive (){ print('wheels start to turing'); } } 변수도 class안에 들어가면 property라고 불리고, 함수도 class안에 들어가면 ..

🕊 Flutter/강의 2022.04.21

로그인 화면 예제 따라해보기

그냥 갑자기 정보를 찾아가면서 코딩을 하려니까 너무 막막했다. 그래서 다른 로그인 화면 예제를 따라해보면서 익히기로 했다. 예제 자료 https://www.youtube.com/watch?v=ExKYjqgswJg&t=1261s assets 파일들 추가하기 우선 assets 폴더안에 icons와 images 폴더를 넣고 안에 파일들을 넣었다. svg를 사용하기 위해서 pubspec.yaml 파일에서 flutter_svg: ^0.17.4 추가했다. 그리고 flutter: 바로 밑에다가 다음과 같이 추가해주었다. (이렇게 바로 밑에다가 안하면 오류 나더라 ^^ ) constants 파일 생성 constants.dart 파일을 생성해주고 다음과 같이 주요한 색상들은 저장해 놓는다. welcome_screen.d..

주사위 어플 만들기

우선, 처음 main.dart 파일안에 들어가는 파일은 다음과 같다. import 'package:flutter/material.dart'; void main() { return runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text('Dicee'), backgroundColor: Colors.red, ), body: DicePage(), ), ), ); } class DicePage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } 처음 알았다. body: DicePag..

🕊 Flutter/강의 2022.04.08

2022.04.06

오늘부터 교양과목에서 Flutter로 프로젝트 진행하는 것을 기록해보려고 한다. 피그마로 기초 디자인을 대략 만들어보았다. 내가 이번에 만들고 싶은 어플은 같은 교양과목을 수강하는 학생들끼리 친해지도록 도와주는 어플이다. 아이폰 에뮬레이터 실행하는 법 1. XCode를 다운로드 한다. 2. 터미널에 다음과 같이 한줄씩 입력한다. sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch sudo xcodebuild -license 3. 상단에 Open iOs Simulator 클릭 후에 오른쪽 재생버튼을 누르면 실행된다. 잘 실행이 되는 것을 볼 수 있다. 프로젝트 초기 세팅 처음에..

2022.03.22 스터디 방향성

- 스터디 목적 => 정보 공유 / 공부할 시간 의무화 / 모각코 / 중간 기말 서로 피드백 - 교수님 강의로만 뭔가 부족. - 스터디 방식 - 노션? => 체크하고/ 정보 올리고 / 디스코드? 줌? - 개인적으로 수업에 연장선이었으면 좋겠다. 부담이 안되게. 수업을 따로 하고 뭔가 심화해서 부담이 되실까바. - 디스코드. 비대면 / 대면 => 노션 페이지 (대면을 위주로. 급한일 정보 공유 디스코드로 비대면으로 ) - 정기 회의 (일주일에 한번? 승현님이랑 저랑 시간 조율 => 수요일 18시) - 직접 부딪치는거 각 잡고 하는 느낌보다는 정보 공유 / 진행 상태 확인

5강 Flutter 박스 디자인 하는 법

맥에서 안드로이드 스튜디오 자동완성 기능 사용하기 설정 => 키보드 => 입력소스 => 입력 메뉴에서 다음 소스 선택 탭을 체크한다. 이제 control + space를 누르면 자동완성이 잘 되는 것을 확인 할 수있다. 지난 과제 1. appBar 디자인 하는 법 위에 이미지처럼 appBar안에 텍스트를 적어야한다. 그냥 Text('내용') 으로 적으면 오류가 난다. AppBar()안에 적으려면 title 이라는 친구를 적어야한다. 또한 자동으로 가운데로 배치가 되기 때문에, centerTitle: false로 해주어야한다. 2. bottomNavigationBar 디자인 구글링 한 결과 이런식으로 코드를 작성하라고 했다. 밑에 자식들을 쓸 경우에는 거의 대부분 [ ] 가 들어가는 느낌이였다. 나 같은 ..

🕊 Flutter/강의 2022.03.09

4강 기본 앱 레이아웃 만드는 법

※주의 항상 child를 모든 위젯이랑 쓸 수 있는 건 아니다. 맞는 위젯이 있으니 확인해가면서 익힐 것. 이번에는 Material App() 에 대해서 살펴볼 것이다. 이 친구도 결국엔 위젯이다. 여기엔 디자인 및 기본 세팅 값이 들어있기에 커스터마이징 하더라도 써야한다. 없으면 코드가 늘어나버린다. 상중하로 나눠주는 Scaffold 위젯 상단은 appBar 중간에 들어갈 내용은 body bottomNavigationBar 로 하단을 만들어준다. 여러 위젯 가로로 배치하는 법 - Row(children: [ ])위젯 사용 [ ] array 자료 형태로 써주면 된다. 가로 배치가 잘 되는 것을 확인할 수 있다 :) ※여기서 잠깐! eslint 때문에 밑줄이 그어지는 것을 볼 수있다. 이는 analysis..

🕊 Flutter/강의 2022.03.08

3강 Flutter 기본 위젯 넣는 법

맥에서 한글 작성시 오류 typo 해제하는 법 Android Studio => Preferences(설정) => Inspection => Profile: Default 설정 => Proofreading 체크 해제 Lint 잠시 끄는 법 rules 쪽에 내용들 추가하면 됨. 초보 때는 끄고 하는 것도 좋은 방법임. main.dart 파일 기본 코드 분석 main.dart 파일에서 stless를 치고 탭 키를 누르면 이렇게 뜨는데, 앞에 MyApp을 붙여준다. return Container()를 return MaterialApp( home: )으로 바꿔준다. 각각의 코드를 살펴보자. import 'package:flutter/material.dart'; 이것은 다른 파일이나 패키지 가져오는 문법이다. voi..

🕊 Flutter/강의 2022.03.06
1