🧑‍💻 Flutter 공부 10

커스텀 위젯과 ListView() 위젯 사용 방법!

새로운 마음으로 시작한 프로젝트 :) 1. Custom Widget 사용 방법 2. 궁금할까봐 해주신 문법 설명 3. Custom Widget 말고 변수/함수로도 축약 가능 4. 아무거나 다 Custom Widget으로 만들지 말걸아,,, 5. ListView() 사용 방법 6. 숙제! 1. Custom Widget 사용 방법 레이아웃을 만들고 싶은데 너무 길다? 단어 1개 작명해서 깔끔하게 할 수 있다 = 커스텀 위젯! 맨 밑에 stless라는 단어를 입력하고 Tab이나 Enter를 누르면 class ~ 어쩌고 저쩌고 하는 코드 몇줄이 자동으로 생성된다. 이때 따로 뭔가를 클릭하거나 키보드를 누르지 않은 상태면 class 뒷 부분이 선택된 채로 타이핑할 수 있는데, 여기가 [작명]하는 부분임 나는 코딩..

개발자 W님의 도움을 받아 안되던 것 해결 + 단축키 특강 ⌨️

토요일에 못풀었던 문제... 오류 나고 타이틀이 안보이던 건 Flexible() 안에 있던 Text() 부분을 W님이 RichText()로 바꿔서 썼더니 에러들이 없어지고 잘 표시됨!! 그리고 이어진 특강ㅋㅋㅋ 1. Settings > Appearance & Behavior > New UI를 켜기 베타로 나온 새로운 UI인데, Command + 5 눌러서 밑에 콘솔창 켰다 껐다가 가능하다!! 2. Tools > Actions on Save에서 Reformat code, Rearrange code 켜기 켜두면 Command + S 눌러서 저장할 때 코드 탭 안맞는 것들 정리해줌 , 있으면 내려주고 없으면 올려주고 해줌! 3. option + Enter 눌러서 Wrap with~이랑 Remove this W..

코딩애플 5강, Flexible()과 Expanded()를 배웠다!!!!!

1. Row, Column 안에서 고정값 말고, 비율로 박스를 채우고 싶다? 1-1. Flexible()로 하는 방법 1-2. Expanded()로 하는 방법 2. 박스 디자인했는데 의도와 다르다? 3. 당근 숙제 코딩애플이 푼 방법!! 4. 오늘 배운 Expanded()를 적용해서 반응형처럼 못했던 부분 바꿔주기!!! 5. 잊지 않고 Github에 Commit and Push! 1. Row, Column 안에서 고정값 말고, 비율로 박스를 채우고 싶다? Container(width: 50%), 같은 짓은 하지 말자,,, 1-1. Flexible()로 하는 방법 body: Row( children: [ Flexible(child: Container(color: Colors.blue), flex: 3), ..

숙제) 당근마켓 UI 따라해보기 - 진짜 머리털 다 빠지겠다

저번 시간(4강)에 코딩 애플에서 당근마켓에 있는 이 리스트용 컴포넌트를 최대한 비슷하게 만들어오라구 했다. 5강이 자동으로 넘어가서 끄려고 했는데 마침 제목이 '숙제 안해오면 때림'이라서 더 급하게 꺼줌,, , ㅎ 오늘 아침 11시부터 했는데 생전 처음 개발해보는 복잡한 구성에 계속 되는 에러에 머리털 다 빠지는 줄.,,, 이래서 개발자 대머리 밈이 만은 걸가..,,,.?,??,.,? 아무튼 오늘은 내가 했던 순서대로 대충 차례 정해봄 1. 계속되는 에러의 향연.. 2. ♡4 넣기 3. Container 높이 지정해서 저쪼아래 박스를 데려오자,, 4. Row 안에 있는 Container에 마진을 주자 5. Column의 children으로 추가한 텍스트들 왼쪽 정렬 6. 타이틀 maxLine 지정 7...

텍스트스타일, AppBar!

1. TextStyle() 위젯으로 디자인 입히기 1-1. 텍스트 Color 넣는 3가지 방법 1-2. 자주 쓰이는 다양한 파라미터들 2. 버튼을 넣어보자! 3. AppBar와 자주 쓰이는 파라미터들 4. 다음 시간 숙제 소개 5. 레이아웃 혼자서도 잘 짜는 법 💡 1. TextStyle() 위젯으로 디자인 입히기일단 '안녕하세요'를 body에 child를 만들어 넣어보자. Text() 위젯 안에 style이라는 파라미터를 쓸 수 있다. style: TextStyle(원하는 스타일 파라미터 추가)body: SizedBox( child: Text('안녕하세요', style: TextStyle( fontWeight: FontWeight.w700), ) )예를 들면 이렇게! 1-1. 텍스트 Color 넣는 3..

📦박스📦 잘 그려야 앱 잘 만든다!!!!

오늘의 차례 1. 박스 여백 주는 법: margin, padding 파라미터 1-1. margin 적용 전후 1-2. padding 적용 전후 2. 박스 기타 꾸미는 옵션들: decoration 3. 박스 Center()말고도 다르게 정렬 바꾸는 법: Align() 4. 나 혼자 해보기 1. 박스 여백 주는 법: margin, padding 파라미터 1-1. magin 적용 전후 margin: 바깥쪽 여백 margin 파라미터를 쓰지 않으면 박스가 왼쪽 위에 딱 붙어버린다. 1-2. padding 적용 전후 padding: 안쪽 여백 padding 파라미터만 쓰면 차이를 모르기 때문에 잠깐 박스 안에 글자를 넣어서 테스트한 것. child를 사용해서 텍스트 추가! 왼쪽은 박스의 왼쪽 위에 딱 붙어서 텍스..

숙제) bottomNavigationBar 아이콘 가로정렬 + padding 넣기 완!!!

이것이 코딩애플에서 내준 숙제.... 아래에 bottomNavigationBar에 아이콘 3개를 가로로 정렬하면 되는 간단해보이는(??) 숙제. 아 오늘거 들었으니까 삽가능이지 ㅎㅎ 하고 바로 시작했는데 ...? 왜 다 빨간데요... 그냥 bottomNavigationBar 아까 써둔거에 그대로 하면 되는거 아니엇냐고요ㅠ 원인 모를 에러 와장창 나와서 당황... 내가 뭘 또 잘못했을까 싶어서 구글링 해봤는데 뭔가 배운 적 없는 것들이 너무 많이 나와서 제쳐두고 다시 해봄… 아이콘을 넣는게 아니라 진짜 버튼으로 작동하도록 넣어야 해서 만든 코드들이란 느낌…??? 그래서 막 에러 표시되는 것들 다시 차근차근 읽어보고, 왼쪽 옆에 뜨는 빨간 전구도 눌러보고 하니까 자동으로 고쳐지는 것들이 좀 있었음 예를 들면..

머리! 가슴!! 몸통!!! 레이아웃 Scaffold로 구성

1. MaterialApp(), CupertinoApp() 위젯 2. Scaffold 위젯 3. 여러 위젯을 가로/세로로 배치하는 법 3-1. 가로/세로 = Row/Column 3-2. 가로 정렬 + 가운데 기준 정렬하는 법 3-3. 세로 정렬 + 가운데 기준 정렬하는 법1. MaterialApp(), CupertinoApp() 위젯MaterialApp() → 이것도 구글에서 제공하는 ‘위젯’이다. 1. 구글 스타일로 하고 싶다: MaterialApp() 2. 애플 스타일로 하고 싶다: CupertinoApp() 3. 커스텀하고 싶은데용?: MaterialApp() ...위젯 없이 하려면 코드 양이 3~4배가 늘어나기 때문에 꼭 쓰는 게 좋다고 한다. 나중에 구글물 빼는 작업하면 된다 함… 2. Scaf..

기본 위젯 4개를 배웠는데, 기본부터 어려워서 슬픔

환경 세팅했을 때처럼 코딩애플로 1강 시작... 오늘의 차례,, 프로젝트 생성, 기본 세팅 Lint 끄기 메인에서 stless 입력 기본 위젯 4개 쓰는 법 Text() Icon() Image.asset('') Container() or SizedBox() 근데 코딩애플은 나처럼 완전 초보자가 이해하기엔 어려울 수 있다고 함 엉엉 1. 프로젝트 생성Project 이름을 숫자로만 하려니까 유효한 Dart Package Name이 아니라면서 lower case를 쓰라고 했다. test20230823으로 하니까 바로 생성됨; 1-1. Lint 끄기test/analysis_options.yaml로 들어가서 rules: 라고 적힌 부분을 찾고 4줄을 입력하라고 했다. Lint라는 걸 잠깐 끄는 용도라는데, Lin..

Flutter 설치완. 나 이제 개자이너냐.

어제 드디어 Flutter 설치를 완료했다(?) 완전 초반 설치는 E님이 추천해준 코딩애플 아저씨의 동영상으루 시작... 1. 플러터를 깐다... 나는 macOS, M1pro라서 애플 실리콘 버전 다운로드 받았다. Flutter documentation Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app. docs.flutter.dev 2. Android Studio를 깐다... 2023년 8월 8일 기준, Android Studio는 Giraffe 버전이 최신인가보다. 일단 깐다... Download Android Studio & App Tools - Androi..

반응형