파파비의 블로그

route를 만들어서 화면을 띄우는 방법은 MaterialApp에서 route속성으로 route를 지정해두거나, Navigator에서 push할 때, route를 만들거나 할 수 있다. 또 다른 방법이 있는데, 동적으로 만드는 방법이다. MaterialApp에서 onGenerateRoute 라는 속성이 있다. Navigator를 통해 푸시를 할 때, route가 미리 지정해둔 route 속성에 없으면 onGenerateRoute 에 지정해둔 callback이 실행되어 route가 생성된다. (pushNamed가 따라서 실행되어야 함, 그냥 푸시는 XX) onGenerateRoute callback에는 setting 이라는 객체가 들어가는데 여러 정보가 포함된다. 이 객체를 통해 다양한 정보에 따라 rou..

Stack이라는 위젯이 있다. 위젯들을 겹쳐서 보여줄 수 있는, 쌓는 방식의 위젯이다. Stack은 가장 큰 child의 사이즈를 따라간다. 보통 이미지 위에 텍스트를 겹치게 하거나 할 때 Stack을 사용한다. 거기서 텍스트의 위치를 조절하고 싶을때는 어떻게 할까? Positioned라는 위젯을 쓴다. 이 위젯은 Stack 내부에서만 작동한다. Stack 내부의 위치를 지시할 수 있다. 이 이미지를 보면, Text를 자식으로 갖고 있는 Container 위젯이 stack안에 있는데, Positioned 위젯을 통해 위치를 조정하고 있는 모습이다. bottom : 20은 > 아래로 부터 20 픽셀 떨어진 곳에 위치 시킨다 는 것을 의미하며, right: 5 는 오른쪽으로부터 5만큼 떨어진 것을 의미한다...

위젯의 모양을 강제로 둥들게 하는 방법이 있다. 바로 ClipRRect를 사용하는 것이다. ClipRRect는 2가지 속성이 있다. borderRadius와 child다. child는 image를 비롯해 다양한 위젯들이 들어갈 수 있다. 여기서는 이미지 위젯을 넣었고, 특히 윗부분만 둥글게 모서리 처리가 되는 부분이다. 꼭 이미지만 해당하지 않는다. 그냥 원하는 위젯 위에 ClipRRect를 넣으면 된다. 여기선 그리드 타일 위를 감쌌다. 했을 때와 안했을 때의 차이를 한번 보라!

1) import 구분하기 - 맨위에는 dart에서 import한 문장들 묶기 - 그 다음은 외부 package import 한 문장들 묶기, - 마지막은 내부 dart file import 한 문장들 묶기. 이렇게 최대 3덩어리로 구분된다. 2) 내부 파일 import 할 때, ./ : 같은 폴더 내를 의미, ../ : 그 상위 폴더를 의미 (점이 늘어나면 한단계 위를 의미함) ./screens 의 의미는 동일폴더 내에 screens라는 폴더로 들어가겠다는 의미

데이터가 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로 나중에 채워진다.