Flutter/Flutter Study 14

14. Drawer 메뉴 만들기

실제 기능을 하는 앱바 클릭 시 아직 한 게 없기 때문에 UserAccountDrawerHeader을 사용해서 메뉴판을 꾸며준다. 그리고 accountName과 accountEmail을 required 즉 무조건 필요로 하기 때문에 작성해주면 곡선을 주려고 한다. 검은색 선이 거슬리긴 하는데 일단 넘어가자 [다음으로 ListView에서 ListTile을 할 차례] trailing으로 추가적인 메뉴 아이콘 설정 그리고 복붙 해서 3개 정도 만들어본다. [완성]

13. 앱바(app bar) 메뉴 아이콘 추가하기

leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때 actions: 복수의 아이콘 버튼 등을 오른쪽에 배치할 때 onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의 메뉴만 만들었지 버튼을 터치해서 액션을 취할 것을 주지 않았기 때문에 오류 그렇기 때문에 onpressed 해주면 메뉴창이 뜨면서 만약 클릭한다면 터미널 콘솔 창에 뜨는 걸 볼 수 있다. 추가적으로 debug는 거슬려서 없앴다.

11. 플러터 다트(dart) 핵심정리: 클래스와 위젯의 정체 1

Class and Widget 스마트폰 설계 시 필요한 설계도 부품들의 담당기능 정의 필요 스마트폰 시리얼 넘버 부품 고유의 시리얼 넘버 하나의 틀 그러나 구분이 가능한 서로 다른 스마트폰 Dart에는 Class{ 속성: 액정, 카메라 모듈, 홈버튼, 스크린 기능: 전화 걸기, 사진 찍기, 인터넷 검색 } 버전 변경에 따라 error가 뜬다.

10. 캐릭터 페이지 디자인 마무리

앞서 했던 내용들처럼 Grade이름을 가진 home 위젯을 stl로 만들어 준 것부터 시작. 1. Scaffold ( backgroundColor: Colors.amber[800], appBar: AppBar( backgroundColor: Colors.amber[700], centerTitle: true, elevation: 0.0 ), //AppBar ); //Scaffold .... 등 기본적으로 알고 있는 내용 말고 추가적인 내용은 사진첨부. 1. body안에 Text를 2개 기입 2. 두 번째 Text는 글자 간격과 크기 등을 추가로 조정하였다. 3. Text와 Text 사이의 간격을 SizeBox로 조정하였다. 4. crossAxisAlignment: CrossAxisAlignment.star..

9. 캐릭터 페이지 디자인 1편: 위젯정리

[캐릭터 카드 페이지 만들기] AppBar ( 1. centerTitle: True (AppBar 위치 설정이며 값은 불리언으로 지정한다.) 2. backgroundColor: 배경색 3. elevation: 높이란 뜻이며 수치로 값 지정(소수점가능) 앱 바가 떠있는 간격 조절 ) 4. body: Padding( padding: EdgeInset.fromLTRB(left, top, right, bottom), -Padding내의 padding속성 값으로 간격들을 소수점으로 지정 5. child: Column( children: [ Text('hello'), Text('hello'), Text('hello'), ], ) ## Padding 6. Column( mainAxisAligment: mainAxis..

8. 프로젝트 폴더 및 기본 코드 이해 3편 마무리

1. MyHomePage 커스텀 위젯은 존재하지 않기에 MyApp 밖에서 제작 (stl이나 stf 선택) 2. stl 입력 3. stl class 뒤에 MyHomePage 입력 4. 기본적으로 build함수를 Widget 하고있고 Container를 return 하고 있다. 5. Container => Scaffold로 변경(앱 화면에 다양한 요소들을 배치하고 도와주는 빈 도화지 같은 역할) [Scaffold 내부] 6. appBar: AppBar() 입력 7. AppBar( title: Text('First app') 입력 ) 8. body: Center() 입력 (가운데로 나타내기 위함이며 Center 고유의 아이들이 있다.) 9. Center( child: Column()(세로 배치) childre..

7. 프로젝트 폴더 및 기본 코드 이해 2편

1. 우선 statelesswidget 입력 stl 입력하면 틀 자동완성 2. class 뒤에 우리가 만들 커스텀 위젯인 MyApp 입력 3. return을 container이 아닌 flutter기능을 가진 위젯인 materialApp으로 변경 [materialApp 내에서] 4. title 지정 5. theme 불러오기 (앱의 기본적인 디자인 테마) [theme 내에서] 6. primaryswatch 불러오기 (색상 선택은 자유) 7. home에서 원하는 이름 지정 (앱이 정상적으로 실행될 때 가장 먼저 보이는 경로)

6. 프로젝트 폴더 및 기본 코드 이해 1편

flutter 앱 만들기 1 1. flutter 프로젝트 폴더의 구성 2. 코드의 기본 내용 이해하기 / 앱 페이지 기본 구성 공식화 해보기 3. 첫번째 flutter 앱 실행 -test 파일 내에 pubspec.yaml란 프로젝의 메타데이터를 관리하고 정의한다. 즉 앱을 만들때 여러가지 필요한 중요한 정보를 여기에 등록하는구나 정도 이해. (버젼이나 설정 등등..) -우리가 중요하게 여겨할 파일 lib폴더 -main.dart는 기본적으로 카운트를 세는 기능을 가지고 있다. 1. import는 어떤것을 임명한 후 fm 입력 즉 flutter/material 은 flutter의 라이브러리 2. void은 main이라는 이름의 함수 값이 끝났을 때 아무일도 일어나지 않는다는 것을 정의 main은 앱의 시작점..

5. 위젯이란?

Widget 1. flutter 상에서 위젯이란? 2. stateless widgets VS stateful widgets 3. widget tree 우선 widget이란 1. 독립적으로 실행되는 작은 프로그램 2. 주로 바탕화면 등에서 날씨나 뉴스, 생활정보 등을 보여줌 3. 그래픽이나 데이터 요소를 처리하는 함수를 가지고 있음 1. flutter 상에서 위젯이란? 1. UI를 만들고 구성하는 모든 기본 단위 요소 2. 눈에 보이지 않는 요소들까지 위젯 즉 위젯으로 시작하며 위젯으로 끝난다. 3. everything is a widget Types of widgets 1. stateless widget 2. stateful widget 3. inherited widget stateless와 statef..