우당탕탕 무작정 도전

오늘은 동작하는 아이콘을 만들어 볼 건데 바로 앱바 메뉴 아이콘이다. 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에서 말하는 위젯은 화면을 구성하는 모든 기본 단위 요소다. 메뉴도 위젯, 화면에 아이콘도 위젯, 버튼도 위젯이라고 보면 된다. 그런데?! 눈에 보이지 않지만 아이콘을..