이제 Step 6 !!! 지금까지 우리가 만든 앱은, next 버튼을 누르면 이전에 나왔던 단어를 볼 수 없었다. 그래서 이번 단계에서는 'Like' 버튼을 눌러, 원하는 단어를 기억해보려고 한다. 이번 목표는 다음 화면과 같다. Add the business logic MyAppState 에서 다음과 같이 코드를 수정해보자. lib/main.dart // ... class MyAppState extends ChangeNotifier { var current = WordPair.random(); void getNext() { current = WordPair.random(); notifyListeners(); } // ↓ Add the code below. var favorites = []; void t..

Padding class 정해진 padding에 맞춰 child를 넣는 위젯이다. 위 사진은 공간이 전혀 없어 답답해 보이지 않은가? 각각의 사각형 사이에 공간을 조금 두면 어떨까? 이렇게 공간 즉 여백이 필요할 때 우리는 padding 위젯을 사용하여 해결할 수 있다. Padding 위젯을 사용하면 공간을 만들어 배치할 수 있다. 다음은 padding 위젯을 사용하여 공간을 만든 결과이다. 그렇다면 padding은 어떻게 사용할까? 이렇게 어느 부분에 얼마나 공간을 둘 것인지 정하고, padding이 적용될 child를 넣어주면 된다. padding을 주는 방법은 다양하다. 이는 EdgeInsets의 종류에 따라 방법이 나뉜다. 1. EdgeInsets.fromLTRB() LTRB는 순서대로 Left,..

Expanded class 사용 가능한 공간을 채우도록 Row, Column, 또는 Flex의 child를 확장시킨다. Expanded 위젯을 사용하면 Row, Column 또는 Flex의 child가 main axis(축)을 따라 사용 가능한 공간을 채우도록 확장된다. Row이면 가로 Column이면 세로 Expanded 위젯은 Row, Column 또는 Flex의 자손이어야 한다. StatelessWidget 또는 StatefulWidget이어야 한다. example) example_Column) 위 예시는 중간 child를 세로축에 맞춰 확장시킨 결과이다. example_Row) 위 예시는 flex를 지정하여 중간 child를 제외한 child를 가로축에 맞춰 확장시킨 결과이다.

Transform class transform class는 지금까지 본 위젯들 중 가장 재밌고 신기하게 다가왔다. 우리가 흔히 파워포인트나, 영상, 앱 사용 중 봤을 법한 기능들이 transform 위젯을 사용한 것이다. 아래 첨부한 영상을 보면 나도 모르게 '우와' 하게 될 것이다. transform에는 정말 많은 기능들이 있는데, 그 중 3개의 기능을 소개하고자 한다. 1. Transform.rotate child를 원하는 각으로 회전하는 것이다. 2. Transform.scale child의 크기를 원하는 크기로 조정하는 것이다. 3. Transform.translate child의 위치를 원하는 위치로 이동하는 것이다. 이 외에도 skew, 3D perspective 등 우리가 실제로 본 경험이 ..

SizedOverflowBox class overflowBox와 비슷한 역할을 한다. overflowBox와 다른 점은 constraint를 따로 설정하지 않고 이전에 설정된 parent의 constraint를 전달한다. SizedOverflowBox를 사용하면 parent로부터 전달된 constraint를 벗어난 box를 그릴 수 있다는 것이다. example) out put)