우당탕탕 무작정 도전

오늘은 동작하는 아이콘을 만들어 볼 건데 바로 앱바 메뉴 아이콘이다. Appbar menu Icon과 leading과 actions onPressed를 조화롭게 사용하여 가볍게 배워보는 시간이다. 어렵지 않으니 차근차근 따라와 보자. (방금 어렵게 작성한 글을 날렸다. ^^ 화가 났지만 너무 아까워서 빠르게 쓰고 그만하련다ㅠㅠ) 오늘의 목표는 이런 형태이며 아이콘을 누르면 동작도 한다. 아주 재미있을 것이다. 코딩 바로긔 AppBar Menu Icon 기본 구성은 어제와 거의 비슷하다. 빠르게 따라오자. MyApp과 MyPage라는 커스텀 위젯을 만들어주자. 이제 이 밑으로 메뉴 아이콘을 만들어 줄 것이다. leading 속성 leading : 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때 라고 한다...

지난번에 이어서 sizedbox 등을 사용하여 완성해보자. 지난 시간에는 sizedbox와 crossAxisAlignment 등을 사용해서 캐릭터 정보 페이지를 만들었는데 이번 시간에는 그 페이지를 완성해보자. Icon, CircleAvatar 등을 사용할 것이다. 우리가 완성하고자 하는 페이지 기억나는가? 지난번 작성했던 NAME, GANDA의 코드를 똑같이 아래에 복사하고 새롭게 만든 GANDA POWER LEVEL과 14 사이에 간격을 벌리기 위해 SizedBox를 30으로 설정해주자. 이제 기술 설명을 해보자. Icon 빨간 박스를 보면 체크박스가 있고 그 옆에 텍스트가 있다. 이렇게 가로로 나열해야 할 때 쓰는 것이 Row이다. 새로운 건 Icon 외엔 없다. 나머지는 하던 대로 해준다. 출력해..

드디어 앱 페이지 디자인에 대해 들어간다. 캐릭터도 넣고 캐릭터 설명도 넣고 하면서 앱 페이지를 디자인해보는 시간을 갖는다. sizedbox와 crossAxisAlignment도 배울 것이다. 기본 형태는 이전과 동일하다. 단지 이름 정도만 바뀌었을 뿐. 우리가 만들고자 하는 형태는 다음과 같다. 이 형태를 기억하며 하나하나 따라가보자. 지난번 코드에 이름정도만 바꾸면 된다. 강의를 보며 따라하니 오른쪽과 같은 앱이 만들어졌다. 와이프는 이걸 보더니 지난번 dart때 'Hello, World' 랑 다른 리액션을 보여줬다. 난이도는 똑같은데 뭔가 비주얼적으로 보이는 게 있으니 그럴싸해 보인다고 했다. 나도 그렇게 느끼는 중이다 ㅎㅎ 다음으로 title을 가운데로 옮겨보자. 강의에서는 'centerTitle..

앱 페이지를 디자인하기 위해 가장 기본이 되는 부분들을 살펴본다. centerTitle, appbar backgroundcolor, appbar elevation, padding widget, mainAxisAlignment 등 많은 부분들을 써놨지만 딱히 어렵지는 않기에 하나하나 따라 하면 금방 익힐 수 있다. CenterTitle 지난번 사용했던 코드에 추가하여 시작해본다. AppBar의 title이 왼쪽에 치우쳐져 있는데 이것을 가운데로 정렬해 보자. 가운데 정렬이니까 center일까? 하고 쳐보니 centerTitle이라고 딱 추천해준다. 리턴은 bool이니 'true' AppBar 하단을 보면 음영이 있는데 이 부분을 없애는 위젯도 있다. 있는게 나은 거 같은데 Padding widget, Co..

Flutter로 프로젝트 폴더는 어떻게 구성되어 있는가? main은 무엇을 담고 있지? Scaffold는 무엇인데? 이제 드디어 무언가를 해보는 날이다. 먼저 new flutter project를 해본다. 프로젝트 생성을 해보았는가? 이 복잡한 구성은 무엇인지 알아보자. 그리고 두 번째로는 main widget을 파헤치며 마지막으로 scaffold에 대해서 알아보도록 한다. Project 새로운 프로젝트를 작성하면 main.dart라는 파일에 기본적으로 숫자를 카운팅 해주는 애플리케이션이 포함되어 나온다. 우리가 앱을 만들 때 lib폴더의 main.dart 에서 하기에 기억해두자. 그리고 'pubspec.yaml'. 이놈도 앱을 만들 때 자주 사용하기에 알아보자. pubspec.yaml은 프로젝트의 메타..

Flutter에서의 widget 위젯은? Flutter를 접하면 뭐만 하면 widget 위젯 이러는데 대체 위젯은 무엇인가? stateless widget은 뭐고 stateful widget은 뭔가? Flutter를 처음 접하는 일반인의 입장에서 풀어가보자. 내가 이해 못 하면 남도 이해 못 한다. 코딩셰프님 강의로 플러터를 하나씩 배워 가보자. Widget 우리가 평소 접한 위젯은 스마트폰이나 데스크톱에서 날씨나 교통정보를 보여주거나 했었다. 위젯은 그런 작은 단위의 기능을 보여주는 프로그램을 지칭하는 용도로 쓰였다. 그러나 Flutter에서 말하는 위젯은 화면을 구성하는 모든 기본 단위 요소다. 메뉴도 위젯, 화면에 아이콘도 위젯, 버튼도 위젯이라고 보면 된다. 그런데?! 눈에 보이지 않지만 아이콘을..

돌고 돌아 다시 온 Stream 11번 포스팅에서 Stream을 했었는데 중간에 where()에 막혀 3번의 포스팅 이후 드디어 다시 돌아왔다. Stream에 대해서 기억이 나시는가? 오늘도 정직하고 그날 당일 하루하루에 충실한 나의 뇌는 그날만 기억하기에도 벅차기에 당연하게도 다시 보고 돌아왔다. 11. Dart(async Returnung Future, Stream, Listen, asBroadcastStream) 일반인의 Flutter 앱개발 11. Dart(async Returnung Future, Stream, Listen, asBroadcastStream) cont. Asynchronous Programming 지난번 10번 포스팅에 이어 같은 영상이다. 요새 드는 생각이 확실히 1강 2강 때..

오늘 할 일 : Cascading Operator(쉬움 주의), 실전 연습(주의..) Cascading Operator 너무 쉽다고 놀라지 말자. Cascading Operator : 생성한 List안에 list를 하나로 펼쳐서 널어준다. 바로 예시를 보면 느낌이 오실 것이다. 홀 짝을 넣어준 리스트를 만들고 출력을 해준다. 이렇게 각 각 리스트가 형성이 된다. 여기에 cascading operator '...' 점 3개를 넣어주면 짠 합쳐졌다^^. 이렇게 생성한 리스트는 완전히 새로운 리스트가 된다. Cacading Operator는 많이 사용하는 기능이니 알아두고 가자. 실전문제 Map -> Class 그동안 강의 듣고 정리만 했는데 이제 실전문제다. 코드는 이전에 썼던 List를 가져온다. 아 요거..

Map을 Mapping 하는 법으로 시작 일단 Map형태로 해리포터를 만들어 줬다. 혹시 Map이 가물가물 하다면 이전 글을 참고하자. 맨 아래쪽에 있다. 2022.10.05 - [우당탕탕 무작정 앱 개발하기] - 일반인의 Flutter 앱개발 4. Dart(String, Library, Final, Const, List, Set, Map) 일반인의 Flutter 앱개발 4. Dart(String, Library, Final, Const, List, Set, Map) 이번엔 좀 가볍다! 물론 제대로 파고들면 더 많은 내용이 있겠지만 이 정도만 알고 넘어가면 되겠다 싶은 내용이라 할만했다. 어떤가? 지난번 Control Flow 보다 훨씬 간단해 보이지 않는가? 이미 우 trythison.tistory.c..

Stream 포스팅 예정이었던 오늘 오늘 첫 번째 주제는 Stream 값 변형하기였다. 열심히 듣고 있는데 지난번 시간에 배웠던 'Functional programming'을 언급하면서 이 내용을 녹여내며 코딩을 하셨다. 물론 그냥 무시하고 하려고 했으나 여러분 지금 where()에 대해서 이해하고 계신가요? 저는 아니라 눈물을 머금고 함수형 프로그래밍 강의로 돌아왔습니다. 싸던 거 끊고 밥 먹으러 간 기분이라 영 찝찝한데 포스팅 내내 함수형 프로그래밍에 대해 설명하려고 하니 '이왕 이렇게 된 거 기본적인 거는 알고 가자'라는 생각에 함수형 프로그래밍으로 급선회했습니다. oop를 배우고 왔다면 별로 어렵지 않다고 약속한다고 한다 힘 내보자 저와 같이 함수형 프로그래밍에 대해 쉽고 재미있게? 시작해보시죠 ..