플러터로 앱 만들기 플러터로 앱 만들기

각 항목의 크기를 지정하려면 prototypeItem, itemExtent, 또는 itemExtentBuilder 중 하나를 사용할 수 있습니다. 이 중 하나를 지정하는 것이 자식들이 자체적으로 크기를 결정하도록 두는 것보다 더 효율적입니다. 왜냐하면 스크롤 시스템이 자식의 크기를 미리 알고 있으면, 예를 들어 스크롤 위치가 급격하게 변경될 때 작업을 줄일 수 있기 때문입니다.리스트에 고정 크기의 항목이 있는 경우에는 prototypeItem 또는 itemExtent를 사용하세요.리스트에 다양한 크기의 항목이 있는 경우에는 itemExtentBuilder를 사용하세요.prototypeItem, itemExtent, itemExtentBuilder이 세 가지는 리스트 항목의 높이(또는 너비) 를 미리 정의..

플러터의 기본 ListView 생성자는 짧은 리스트에 잘 작동합니다. 많은 수의 항목이 포함된 리스트를 다루기 위해서는 ListView.builder 생성자를 사용하는 것이 가장 좋습니다. 기본 ListView 생성자는 모든 항목을 한 번에 생성해야 하는 반면, ListView.builder() 생성자는 항목이 화면에 스크롤되어 나타날 때 생성합니다.1. 데이터 소스 생성하기먼저, 데이터 소스가 필요합니다. 예를 들어, 데이터 소스는 메시지 목록, 검색 결과, 또는 상점의 제품 목록일 수 있습니다. 대부분의 경우, 이 데이터는 인터넷이나 데이터베이스로부터 옵니다.이 예제에서는 List.generate 생성자를 사용하여 10,000개의 문자열 리스트를 생성합니다:List.generate(10000, (i)..

어쩌면, 모든 리스트 항목들이 고르게 간격을 두고 배치되도록 리스트를 만들고 싶을 수 있습니다. 예를 들어, 다음 이미지에서처럼 네 개의 항목이 고르게 간격을 두고 배치되어 있으며, "Item 0"은 맨 위에, "Item 3"은 맨 아래에 있습니다. 동시에, 장치가 너무 작거나 사용자가 창 크기를 조절했거나, 항목 수가 화면 크기를 초과할 경우에는 사용자가 리스트를 스크롤할 수 있도록 하고 싶을 수 있습니다. 일반적으로 Spacer를 사용해 위젯 간의 간격을 조정하거나, Expanded를 사용해 위젯이 사용 가능한 공간을 채우도록 확장할 수 있습니다. 그러나 이러한 솔루션은 스크롤 가능한 위젯 내에서는 사용할 수 없습니다. 왜냐하면 이들은 유한한 높이 제약(finite height constraint)을..

서로 다른 유형의 콘텐츠를 표시하는 리스트를 만들어야 할 수도 있습니다.예를 들어, 하나의 제목이 표시되고 그 뒤에 해당 제목과 관련된 몇 개의 항목이 나오고, 또 다른 제목이 나오고, 그 뒤에 또 관련 항목이 나오는 리스트를 구현할 수 있습니다. 다음은 Flutter에서 이러한 구조를 생성하는 방법입니다:서로 다른 유형의 항목을 가진 데이터 소스를 만듭니다.데이터 소스를 위젯 리스트로 변환합니다.1. 서로 다른 유형의 항목을 가진 데이터 소스 만들기항목의 유형리스트에 포함될 서로 다른 항목 유형을 표현하기 위해, 항목 유형마다 클래스를 정의하세요. 이 예제에서는 제목(heading) 다음에 다섯 개의 메시지가 반복해서 보여주는 리스트 앱을 생성합니다. 따라서 세 가지 클래스를 생성합니다:ListIte..

리스트 만들기데이터 목록을 표시하는 것은 모바일 앱에서 기본적인 패턴입니다. Flutter는 리스트 작업을 쉽게 해주는 ListView 위젯을 포함하고 있습니다. 표준 ListView 생성자를 사용하는 것은 항목이 몇 개만 있을 때 완벽한 방법입니다.내장된 ListTile 위젯은 항목에 시각적 구조를 부여하는 방법입니다.ListView( children: const [ ListTile(leading: Icon(Icons.map), title: Text('Map')), ListTile(leading: Icon(Icons.photo_album), title: Text('Album')), ListTile(leading: Icon(Icons.phone), title: Text('Phone'))..

이 튜토리얼은 Flutter에서 레이아웃을 디자인하고 구축하는 방법을 설명합니다.위젯들을 서로 옆에 배치하는 방법위젯들 사이에 공간을 추가하는 방법위젯을 추가하고 중첩시키는 것이 어떻게 Flutter 레이아웃을 구성하는지 제공된 예제 코드를 사용하면 다음과 같은 화면을 만들 수 있습니다.레이아웃 다이어그램 그리기이 섹션에서는 사용자에게 어떤 사용자 경험(UX)을 제공하고 싶은지를 고려합니다. 사용자 인터페이스의 구성 요소들을 어떻게 배치할지 고민하세요. 레이아웃이란 이러한 배치의 최종 결과입니다. 코딩 속도를 높이기 위해 레이아웃을 계획해 보세요. 무언가가 화면에서 어디에 위치해야 하는지 시각적인 단서를 사용하는 것은 매우 큰 도움이 됩니다. 인터페이스 디자인 도구를 사용하든, 연필과 종이를 사용하든, ..

개요Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. Flutter에서는 거의 모든 것이 위젯입니다. 레이아웃 모델조차도 위젯입니다. Flutter 앱에서 볼 수 있는 이미지, 아이콘, 텍스트 등은 모두 위젯입니다. 그러나 눈에 보이지 않는 요소들 또한 위젯입니다. 예를 들어, 행(Row), 열(Column), 그리드(Grid)는 보이는 위젯들을 정렬하고, 제약을 주며, 배치하는 역할을 하는데, 이들 역시 위젯입니다.레이아웃을 만드는 방법은 위젯들을 조합하여 더 복잡한 위젯을 만드는 것입니다. 핵심 포인트Flutter에서의 레이아웃은 위젯을 사용하여 구성됩니다.위젯은 UI를 구성하는 데 사용되는 클래스입니다.위젯은 UI 요소를 만드는 데에도 사용됩니다.간단한 위젯들을 조합하여 복잡한 위젯을 구성합니다..

Flutter로 사용자 인터페이스 구축하기Flutter 위젯은 React에서 영감을 받은 현대적인 프레임워크를 사용하여 구축됩니다. 중심 아이디어는 UI를 위젯들로 구성한다는 것입니다.위젯은 현재 구성과 상태에 따라 어떤 모습이어야 하는지를 설명합니다. 위젯의 상태가 변경되면, 위젯은 자신의 설명(description)을 다시 작성하고, 프레임워크는 이를 이전 설명과 비교하여 렌더 트리에 필요한 최소한의 변경 사항만 계산하여 적용합니다. 이를 통해 한 상태에서 다음 상태로 부드럽게 전환할 수 있습니다.Hello World가장 최소한의 Flutter 앱은 runApp() 함수를 호출하고 하나의 위젯을 전달하는 방식으로 작성됩니다.import 'package:flutter/material.dart';void..