개발하는 두더지

@required 에 대해 알아보기 @required 속성은 생성자가 기본값이 없고 null 이 아닐 경우에 사용합니다. 그리고 assert 메서드를 이용해 null일 경우를 체크하는 기능도 있습니다. 이 annotation을 사용하기 위해서 meta 패키지를 추가해야 합니다. import 'package:meta/meta.dart'; 사용 예시는 아래와 같습니다. class Backdrop extends StatefulWidget { final Category currentCategory; final Widget frontLayer; final Widget backLayer; final Widget frontTitle; final Widget backTitle; const Backdrop({ @requ..

결과를 먼저 보여주면 가로로 스크롤을하면서 아이템이 (2개, 1개), (2개, 1개) 이런식을 보여주는 스크롤 뷰 형태를 띕니다. AsymmetricView 위젯의 내부를 살펴보면 인덱스가 홀수, 짝수이냐에 따라서 TwoProductCardColumn 또는 OneProductCardColumn 을 반환합니다. return List.generate(_listItemCount(products.length), (int index) { double width = .59 * MediaQuery.of(context).size.width; Widget column; if (index % 2 == 0) { /// Even cases int bottom = _evenCasesIndex(index); column = Tw..

색상을 변경하기 위해서 디자이너에게 글자와 관련된 디자인을 받아야 합니다. Flutter의 ThemeData 는 3개의 텍스트 테마를 제공합니다. 각각의 텍스트 테마는 headline 과 title 같이 텍스트 스타일의 컬렉션입니다. Customize the text theme 프로젝트 안에 폰트를 넣기 위해서, pubspec.yaml 파일에 아래와 같이 코드를 추가해 줍니다. flutter: fonts: - family: Rubik fonts: - asset: fonts/Rubik-Regular.ttf - asset: fonts/Rubik-Medium.ttf weight: 500 이제 Rubik 폰트를 사용할 수 있습니다. Flutter 프로젝트에 적용해봅시다. TextTheme _buildShrine..

카드는 하나의 주제에 대해서 정보를 표시하는데 유용하게 사용됩니다. Flutter에서 독립적으로 사용하기엔 정보가 충분하지 않아서 GridView 와 같은 위젯에 감싸서 사용해야 합니다. body: GridView.count( crossAxisCount: 2, padding: EdgeInsets.all(16.0), childAspectRatio: 8.0 / 9.0, children: [Card()], ), 위의 코드를 실행시켜보면 비어있는 카드 한장을 구현할 수 있습니다. GridView는 아이템 항목 개수만큼 count 메서드를 invoke (호출) 합니다. crossAxisCount 는 행에 몇개의 아이템을 보여줄지를 결정합니다. 예제에서는 2개를 보여주도록 설정합니다. cross axis 는 스크롤..