Flutter16 [Flutter] 코딩 스터디 16회차 | 탭바(TabBar) 만들어보기 ✨ 목표 책 '플러터 앱 프로그래밍' p.116~122 학습. 탭바 만들어보기 ✨ 이해한 것 TabController에서 length는 몇개의 탭을 만들지 결정, vsync는 탭이 이동했을때 호출되는 콜백함수 호출. 일종의 탭 라우팅 및 key값 설정이라고 보면 될것 같다 위젯 상태관리에서 완전히 끝내는 dispose() 함수를 호출해서 메모리 누수를 막을 수 있음. 항상 위젯이 실행되는것이 끝나면 dispose() 함수로 끝내두기. ✨ 이해 안되는 것 이해가 안됬다기보단 삽질한 내용들을 올려본다. 삽질1) 바로 _MyHomePageState 클래스로 작업이 넘어가서, 이전 MyApp()과 MyHomePage() 함수 설정을 따로 해줘야하나? 지워야 하나 고민하면서 지웠더니 오류가 주르르륵 뜨고... 책.. 2022. 9. 28. [Flutter] 코딩 스터디 15회차 | 계산기앱 만들어보기(2) ✨ 목표 책 '플러터 앱 프로그래밍' p.107~114 학습. ✨ 이해한 것 플러터가 제공하는 키보드 유형은 총 7가지 타입이 있음. text: 기본텍스트 multiline: 메모같이 여러줄 입력할때. textarea같은 느낌인듯 number: 말해뭐해 phone: 말해뭐해2 datatime: 날짜입력 emailAddress: @표시 포함하는 이메일입력 url: 주소입력 텍스트 필드에 있는 값을 가져오려면 TextEditingController.value.text 이와 같은 형태로 객체의 값을 지정하는 것처럼 해당값을 가져와야 함 setState는 리액트의 useState와 같이 상태를 갱신하고 관리하는 역활을 진행. 다만 [상태값, 상태변화함수] 이런식으로 들어가진 않고, 직관적으로 안에 함수와 변수들.. 2022. 9. 26. [Flutter] 코딩 스터디 14회차 | 계산기앱 만들어보기 (1) ✨ 목표 책 '플러터 앱 프로그래밍' p.104~106 학습. ✨ 이해한 것 Padding 위젯을 이용하면 EdgeInsets.only에 left, right, top, bottom 등에 원하는 값을 넣어 여백을 줄 수 있음. ElevateButton 위젯의 onPressed는 버튼이 눌리면 발생하는 이벤트이다. ✨ 이해 안되는 것 없다 ✨ 소감 오늘은 살짝 분량을 적게 공부했다. 그래도 Padding 위젯에 대해서 알아볼 수 있었다. 2022. 9. 23. [Flutter] 코딩 스터디 13회차 | 이미지와 폰트 추가해보기 ✨ 목표 책 '플러터 앱 프로그래밍' p.96~103 학습. ✨ 이해한 것 자주 사용되는 이미지는 앱에 넣어두었다가 직접 호출하는편이 데이터 사용 혹은 속도 면에서도 유리함. pubspec.yaml 파일에 이미지, 폰트 정보를 추가해야 플러터 앱의 환경설정에 맞게끔 출력이 가능해짐. pubspec.yaml은 들여쓰기에 주의해야 함. 앱이 제대로 동작하지 않을 수 있기 때문에. pubspec.yaml을 수정했을 경우 노란 알림창에 뜨는 Get dependencies를 클릭해줘야 자동으로 변경된 정보를 출력할 수 있게 됌. 해당 파일에 이미지, 폰트등을 집어넣는 코드는 다음과 같다. flutter: (...) assets: - 이미지파일 경로 fonts: - family: 폰트명 fonts: - asset:.. 2022. 9. 21. [Flutter] 코딩 스터디 12회차 | 스캐폴드를 이용한 머터리얼 디자인 (2) ✨ 목표 책 '플러터 앱 프로그래밍' p.93~95 학습. ✨ 이해한 것 child 안에 하위 자식목록을 만들 때 여러개를 넣는다면 children을 넣는다. 또한 children은 배열 형태로 선언됨. 위 그림과 같이 화면 정 가온데 정렬을 하려면 Center() 위젯만으로는 해결이 안됨. Center 위젯은 가로로만 정렬해주기 때문에 세로 column 축 정렬도 필요한데 이때 필요한것이 mainAxisAlignment이다. Center 위젯과 함께 이 메서드?를 선언하고 MainAxisAlignment.center를 입력하면 화면 정 가온데 정렬이 되는 것. 다음 코드를 보면 이해가 한결 쉬울것이다. child: Center( children: ~~~ mainAxisAlignment: MainAxi.. 2022. 9. 19. [Flutter] 코딩 스터디 11회차 | 스캐폴드를 이용한 머터리얼 디자인 (1) ✨ 목표 책 '플러터 앱 프로그래밍' p.87~92 학습. ✨ 이해한 것 [ 기본 머티리얼 디자인의 이해 ] 머티리얼 디자인은 구글에서 2014년부터 사용한 플랫 디자인. 일종의 이미지 스프라이트 혹은 디자인 컨벤션이라고 보면 될것같다. 머티리얼 디자인을 적용하기 위해서는 스캐폴드 클래스를 이용해야 함. 화면을 출력하는 buld() 함수의 리턴값이 null 이면 화면에 아무것도 표시할 수가 없어서 오류가 뜸. [ 스캐폴드 클래스 이용해보기 ] 스캐폴드에서 현재 위치를 알 수 있는 제목줄 추가하는 방법은 appBar를 넣는것. 다음과 같은 코드를 넣으면 실행됨. Scaffold( appBar: AppBar(title: Text('륜곰의 마테리얼 디자인앱'),), ) 그리고 화면 좌측 하단에 플로팅 버튼을 .. 2022. 9. 16. 이전 1 2 3 다음
