파파비의 블로그

데이터가 List로 되어있다고 가정해보자. 이런식으로 Meal 이라는 데이터 모델을 갖고 있는 리스트가 있다고 해보자. 여기서 우리는 원하는 Meal 객체들만 추리기를 원한다. 그방법은? where사용!!! List에 있는 객체들 중에서, id의 값을 categories에서 갖고 있는 객체들만 엄선해서 categoryMeals라는 객체에 리스트형태로 넣은 것이다. 우리는 이 선별된 데이터들을 기반으로 ListView를 만들어보려면 어떻게 하는게 좋을까? : 선별된 데이터 > dynamic > ListView.Builder 여기서 빌더는 Text객체를 만들었는데, 얼마든지 다른 data를 활용한 위젯을 만들 수 있다. 편리한 점은 itembuilder역시 foreach형태고, data도 List로 도출되어..

1) routes 중에 이름을 웹처럼 '/' 를 쓴다면, '/'를 가진 route가 꼭 필요하다. home을 의미하기 때문이다. 2) home: 속성과 initial route가 존재하며 이들은 같은 속성이기 때문에 중복해서 쓰면 안된다. 3) route가 많아지기 시작하면, 하드코딩하면 부담스러워진다. 따라서 생성하는 페이지에 (위젯의 클래스에) static const로 해서 이름을 string으로 명명해둔다. 그러면 거기서 이름을 살짝 고치면 다른 곳에서도 다 알아서 바뀌니 상관 없다. 그런데 하드코드로 각 route를 이름지으면 수정 할 떄도 매우 번거로워 진다.

버튼이 클릭 되었을 때, 위 함수를 시키면 CategoryMealsScreen() 이라는 위젯이 새로운 페이지로 형성된다. 그리고 당연히 screen stack 맨위에 쌓인다. 우리는 화면 간 이동을 할 때, Navigator를 사용한다. 스택정보와 위젯들의 여러 관계를 파악하기 위해 context를 필요로 하며. 그 정보를 바탕으로 push와 pop이 가능하다. 그리고 pushNamed, pushAndRemove 등 다양한 부가 기능들도 가능하다. push에 인자로 들어가는 것은 페이지 관련 위젯이고, MaterialPageRoute이나 CuppetinoPageRoute도 가능하다 MaterialPageRoute안에 빌더에 생성되길 원하는 위젯을 넣으면 되는데, 그 위젯에는 scaffold가 있어야 한..

GestureDetector는 onTap 등의 콜백을 실현시켜 준다. 원하는 위젯을 버튼으로 만들 수 있다. 다만 누르면 맛은 전혀 안난다. 눌러도 아무런 반응이 없기 때문이다. 눌렀을 때, 누른 느낌, 시각적인 효과를 줄 수 있는 것이 InkWell 위젯이다. GestureDetector에 시각적인 효과를 추가한 것이다. 속성들을 살펴보자. splashColor는 ripple의 색을 의미한다. 연하게 ripple이 덮여질 때의 색깔을 의미해서, 찐한 색으로해도 연하게 나타난다. borderRadius는 만약 InkWell 의 child가 borderRadius가 있을 경우 맞춰줘야 한다. 이 것이 설정이 안되어 있으면 기본적으로 child의 모든 면이 ripple로 나중에 채워진다.

MaterialApp 위젯 안에 theme이 있고, 거기에 ThemeData를 설정할 수 있다. ThemeData는 속성이 워낙 많아 커스터마이징 하는게 압도감을 느낄 수 있음. 그래서 예시를 가져와봄 primarySwatch는 primaryColor + 그림자 등에 다양한게 적용되어 primaryColor 대신 쓰는 것을 권장함. accentColor는 primaryColor와 함께 쓰이는 색깔로, 강조하는 색깔로 쓰인다, canavasColor는 배경이되는 canvas의 색을 의미하며 fontFamily는 기본적으로 적용될 폰트를 의미한다. textTheme은 텍스트와 관련된 data를 설정 할 수 있는데, 폰트를 제외하고, 굵기나 색깔 등을 설정할 수 있다. 여기서는 ThemeData.light()..

그라디언트는 Contatiner 내의 데코레이션 항목에서 BoxDecoration을 쓸 때, 사용할 수 있다. 그라디언트를 속성에는 LinerGradient말고도 다양한 형태가 있다. 아무튼 colors 속성은 List를 받고, 비긴은 시작의 위치를 나타내며 Alignment로 정해준다. 그리고 end는 당연히 끝점. 거기에 deco에서 추가적으로 더 이쁘게, 테두리를 원형으로 한다던지의 작업을 통하면 더 예쁜 디자인이 가능하다. 이런식으로 말이다

In addition, the following resources might be helpful: Official Flutter Widget Intro + Deep Dive: Part 1 (Stateless Widgets): https://www.youtube.com/watch?v=wE7khGHVkYY Part 2 (Stateful Widgets, Widget Tree, Element Tree): https://www.youtube.com/watch?v=AqCMFXEmf3w Part 3 (Inherited Widget/ Context): https://www.youtube.com/watch?v=Zbm3hjPjQMk Part 4 (Keys): https://www.youtube.com/watch?v=kn0..

Card위젯이 있습니다. 우리는 이 Card위젯을 ListView에 column형태로 쌓아서 보여주려고 합니다. 우리는 이때 Card위젯의 배경색을 생성시 마다 랜덤하게 하여 알록달록하게 하고자 합니다. (배경색은 State에 저장되어있다고 가정합시다) 5개가 빨 주 노 초 파 순서로 쌓여 있습니다. 이중 4번째, '초록색' card를 지웠습니다. 그러면 파란색 카드가 위로 올라가겠지요. 그런데 이상한 일이 발생합니다. 파란색 카드의 내용은 동일하지만, 색깔이 초록색으로 바뀌었습니다. 왜 그런 것일까요? 문제는 플러터가 Widget Tree와 Element Tree를 비교할 때 생기게 됩니다. Element Tree는 Widget Tree가 다시 build 될 때, 위젯의 1) Widget Tree에서의..