[Flutter][Package] snapping_sheet (하단/상단 슬라이드 sheet 만들기)

이상우·2022년 8월 16일
0
post-thumbnail

공식문서
https://pub.dev/packages/snapping_sheet

메인 코드

import 'package:flutter/material.dart';
    import 'package:snapping_sheet/snapping_sheet.dart';

    class GettingStartedExample extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: SnappingSheet(
              		//모달 손잡이 오바해서 잡아땡기기 가능 여부
                	lockOverflowDrag: true,
                    // 메인 페이지
                    child: MyOwnPageContent(), 
                    //모달 손잡이 높이
                    grabbingHeight: 75,
                    
                    //모달 손잡이
                    grabbing: MyOwnGrabbingWidget(),
                    
                    //아래쪽 모달
                    sheetBelow: SnappingSheetContent(
                        draggable: true,
                        // TODO: Add your sheet content here
                        child: MyOwnSheetContent(),
                    ),
                    
                    //위쪽 모달
                    sheetAbove: SnappingSheetContent(
                        draggable: true, //모달 스크린 안에서 grabbing기능 수행가능 여부
                        //모달 컨텐츠
                        child: MyOwnSheetContent(),
                    ),
                    
                ),
            );
        }
    }

Customize snapping positions (모달 snapping 할 때, 어디까지 내려오나/애니메이션/등등)

 SnappingSheet(
        snappingPositions: [
            SnappingPosition.factor(
                positionFactor: 0.1,
                snappingCurve: Curves.easeOutExpo,
                snappingDuration: Duration(seconds: 1),
                grabbingContentOffset: GrabbingContentOffset.top,
            ),
            //이건 중간에 멈추게 하는 거 (쓰지 마셈)
            SnappingPosition.pixels(
                positionPixels: 400,
                snappingCurve: Curves.elasticOut,
                snappingDuration: Duration(milliseconds: 1750),
            ),
            SnappingPosition.factor(
                positionFactor: 1.0,
                snappingCurve: Curves.bounceOut,
                snappingDuration: Duration(seconds: 1),
                grabbingContentOffset: GrabbingContentOffset.bottom,
            ),
        ],
    )
profile
Flutter App Developer

0개의 댓글