반응형 간단20 Flutter[플러터] / CustomPaint 를 사용하여 직접 그리기, 구현하기, 만들기 (CustomPainter, 커스텀 페인트, Painter, 페인터) CustomPaint (Flutter Widget of the Week) CustomPaint class페인트 단계에서 그림을 그릴 수 있는 캔버스를 제공하는 위젯입니다.페인트 작업을 요청받으면 CustomPaint는 먼저 페인터에게 현재 캔버스에 페인트 작업을 요청한 다음, 자식 캔버스를 페인트 하고, 자식 캔버스를 페인트 한 후, 포그라운드 페인터에게 페인트 작업을 요청합니다. 캔버스의 좌표계는 CustomPaint 객체의 좌표계와 일치합니다. 페인터는 원점에서 시작하여 주어진 크기의 영역을 포함하는 사각형 안에 페인트 작업을 해야 합니다. (페인터가 해당 경계를 벗어나 페인트 작업을 수행하면 페인트 명령을 래스터화 하는 데 필요한 메모리가 부족하여 결과 동작이 정의되지 않을 수 있습니다.) 이러한 경계 내에서 페인트 작업을 수행하려면 이 CustomPaint 객체를 Cl.. 2025. 5. 7. Flutter[플러터] / Hero 를 이용하여 화면 이동시 이미지 따라가기 Hero (Flutter Widget of the Week) Hero class자식 위젯을 히어로 애니메이션의 후보로 표시하는 위젯입니다.Navigator를 사용하여 PageRoute를푸시하거나 팝 하면전체 화면 콘텐츠가 교체됩니다. 이전 경로는 사라지고 새 경로가 나타납니다. 두 경로에 공통적인 시각적 특징이 있는 경우, 경로 전환 중에 해당 특징이 한 페이지에서 다른 페이지로 물리적으로 이동하도록 사용자에게 안내하는 데 도움이 될 수 있습니다. 이러한 애니메이션을 히어로 애니메이션이라고 합니다. 히어로 위젯은 전환 중에 Navigator 오버레이에서 "비행"하며, 이동 중에는 기본적으로 이전 경로와 새 경로의 원래 위치에 표시되지 않습니다.위젯에 이러한 기능을 지정하려면 Hero 위젯으로 감싸세요. 탐색이 발생하면 각 경로에 있는 Hero 위젯은 HeroCon.. 2025. 5. 6. Flutter[플러터] / ClipRRect 를 사용하여 모서리 둥글게 하기 (래디우스, 라운드) ClipRRect (Flutter Widget of the Week) ClipRRect class둥근 사각형을 사용하여 자식 위젯을 클리핑 하는 위젯입니다.기본적으로 ClipRRect는 클립의 기본 사각형으로 자체 경계를 사용하지만, 사용자 정의 클리퍼를 사용하여 클립의 크기와 위치를 사용자 정의할 수 있습니다.https://youtu.be/eI43jkQkrvs 공식 문서 코드 ClipRRect 는 개발에 있어서 진짜 빠질 수 없는 아주 중요하고 좋은 위젯이다.기능자체는 놀라울 만큼 간단한데 자식에게 라운드, 래디우스를 준다. 그니까 모서리를 둥글게 해 준다.하위 속성속성명타입기본값설명childWidget-클리핑될 자식 위젯borderRadiusBorderRadiusGeometryBorderRadius.zero둥근 모서리의 반지름을 정의하며, clipper가 null일 .. 2025. 5. 5. Flutter[플러터] / InheritedModel 을 사용하여 InheritedModel(Flutter Widget of the Week) InheritedModel class전체 모델의 한 부분이나 "측면"에만 종속되는 모델의 기본 클래스로 사용되도록 의도된 InheritedWidget 입니다.상속된 위젯의 종속 항목은 상속된 위젯이 InheritedWidget.updateShouldNotify 에 따라 변경될 때 무조건 다시 빌드됩니다. 이 위젯은 종속 항목이 무조건 다시 빌드되지 않는다는 점을 제외하면 유사합니다.InheritedModel 에 의존하는 위젯은 자신이 의존하는 모델의 "측면"을 나타내는 값으로 종속성을 한정합니다. 모델이 재빌드되면 종속된 위젯도 재빌드되지만, 제공된 측면에 해당하는 모델에 변경 사항이 있는 경우에만 재빌드됩니다.유형 매개변수 T는 모델 측면 객체의 유형입니다.https://youtu.be/ml5uefGg.. 2025. 5. 4. Flutter[플러터] / StreamBuilder 를 사용하여 데이터 자동 반영되는 화면제작하기 StreamBuilder (Flutter Widget of the Week) Stream 과의 상호작용에 대한 최신 스냅샷을 기반으로 자체적으로 빌드되는 위젯입니다.https://youtu.be/MkKEWHfy99Y스트림 관리스트림 은 State.initState , State.didUpdateWidget 또는 State.didChangeDependencies 와 같이 이전에 생성되어야 합니다.StreamBuilder를 생성할 때 State.build 또는 StatelessWidget.build 메서드를 호출하는 동안 생성되어서는 안 됩니다.스트림 이 StreamBuilder 와 동시에 생성되는 경우, StreamBuilder 의 부모가 다시 빌드될 때마다 비동기 작업이 다시 시작됩니다.일반적인 지침은 모든 메서드가 매 프레임마다 호출될 수 있다고 가정하고 build, 생략된 호.. 2025. 5. 3. Flutter[플러터] / FadeInImage 를 사용하여 이미지 로더 처리 (loader, 로딩) FadeInImage (Flutter Widget of the Week) FadeInImage class대상 image 가 로드되는 동안 placeholder 이미지를 표시한 다음, 새 이미지가 로드되면 페이드인되는 이미지입니다.NetworkImage.new 와 같이 로딩이 긴 이미지를 표시하는 데 이 클래스를 사용하면 이미지가 갑자기 화면에 나타나는 것이 아니라 우아한 애니메이션과 함께 화면에 나타납니다.https://youtu.be/pK738Pg9cxc이미지가 로드되고 캐시 될 때와 같이 이미지가 동기적으로 ImageInfo를 내보내는 경우 , 이미지는 즉시 표시되고 플레이스홀더 는 표시되지 않습니다.fadeOutDuration 및 fadeOutCurve 속성 은 플레이스홀더의 페이드아웃 애니메이션을 제어합니다.fadeInDuration 및 fadeInCurve 속성 은 .. 2025. 5. 2. Flutter[플러터] / SliverList & SliverGrid 를 사용하여 CustomScrollView 에서 리스트, 그리드 배치 (커스텀 스크롤뷰) SliverList & SliverGrid (Flutter Widget of the Week) SliverList class주축을 따라 선형 배열로 여러 개의 상자 자식을 배치하는 슬라이버입니다.슬리버에 대해 자세히 알아보려면 CustomScrollView.slivers를 참조하세요.각 자식은 교차 축에서 SliverConstraints.crossAxisExtent 를 가져야 하지만 자체 주 축 범위를 결정합니다.SliverList는 슬라이버의 가시 영역 밖에 있는 자식 요소들이 구체화되지 않았기 때문에 "추측 항법"을 통해 스크롤 오프셋을 결정합니다. 즉 , SliverList는 해당 자식 요소들의 주축 범위를 학습할 수 없습니다. 대신, 새롭게 구체화된 자식 요소들은 기존 자식 요소들 옆에 배치됩니다.https://youtu.be/ORiTTaVY6mM자식 요소의 주축에 고정된 범위가 있는 경우.. 2025. 5. 1. Flutter[플러터] / SliverAppBar 를 사용하여 CustomScrollView 에서 AppBar 넣기 (커스텀 스크롤, 앱바) SliverAppBar (Flutter Widget of the Week) SliverAppBar classCustomScrollView 와 통합된 Material Design 앱 바입니다.앱 바는 툴바와 TabBar, FlexibleSpaceBar 등의 다른 위젯으로 구성됩니다. 앱 바는 일반적으로 하나 이상의 일반적인 동작을 IconButton 으로 표시하며, 덜 일반적인 작업을 위해 PopupMenuButton 이 뒤에 올 수도 있습니다.https://youtu.be/R9C5KMJKluE 실버 앱 바는 일반적으로 CustomScrollView 의 첫 번째 자식으로 사용되며 , 이를 통해 앱 바가 스크롤 뷰와 통합되어 스크롤 오프셋에 따라 높이가 변경되거나 스크롤 뷰의 다른 콘텐츠 위에 떠 있을 수 있습니다. 화면 상단의 고정 높이 앱 바는 Scaffold.appBar 슬롯.. 2025. 4. 30. Flutter[플러터] / Table 을 사용하여 그리드 정렬하기 (표만들기, 테이블, 셀 정렬) Table (Flutter Widget of the Week) Table class자식 위젯에 테이블 레이아웃 알고리즘을 사용하는 위젯입니다.https://youtu.be/_lbE0wsVZSw공식 문서 코드 Table 클래스는 우리가 흔히 아는 표라고 생각하면 편하다.이제 html 로 만들면 편하겠지만 우린 플러터이기 때문에 정해준거 걍 쓰면 된다. 한번 알아보자.하위 속성속성명타입기본값설명childrenList[]테이블에 표시할 행 목록columnWidthsMap?-열의 너비를 결정하는 규칙을 설정defaultColumnWidthTableColumnWidthFlexColumnWidth()명시적으로 설정되지 않은 열의 기본 너비를 설정textDirectionTextDirection?-열 정렬 방향을 설정borderTableBorder?-테이블의 테두리 스타일을 설정.. 2025. 4. 29. Flutter[플러터] / PageView 를 사용하여 스크롤 되는 페이지 구현하기 (화면 넘김, 페이징, 페이지네이션) PageView (Flutter Widget of the Week) PageView class페이지별로 작동하는 스크롤 가능한 목록입니다. 페이지 뷰의 각 자식은 뷰포트와 동일한 크기가 되도록 강제됩니다.PageController를 사용하여 뷰에 표시되는 페이지를 제어할 수 있습니다. PageController 는 PageView 내부 콘텐츠의 픽셀 오프셋을 제어할 수 있을 뿐만 아니라 , 뷰포트 크기의 증분인 페이지 단위로 오프셋을 제어할 수도 있습니다.PageController는 PageView가 처음 생성될 때 어떤 페이지가 표시되는지 결정하는 PageController.initialPage 와 뷰포트 크기에 대한 분수로 페이지 크기를 결정하는 PageController.viewportFraction 을 제어하는 데에도 사용할 수 있습니다.https://yout.. 2025. 4. 28. 이전 1 2 다음 반응형
