Flutter - ShowModalBottomSheet 위젯

• 팝업창을 띄운것을 modalbottomsheet를 사용해 수정,삭제 하는 기능을 구현해보겟습니다.

•    showDefaultHeightmodalbottomsheet 위젯

 

-> 여러가지 modalbottomsheet위젯  있는데 그중에 하나를 사용해보앗습니다.

 showmodalsheet 속성을 사용해서 위쪽에 원형모서리로 주엇습니다.

 

• Modalbottomsheet 코드

void showDefaultHeightModalBottomSheet(BuildContext context) {
  showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(16),topRight: Radius.circular(16)),
    ),
    context: context,
    builder: (BuildContext context) {
      return SizedBox(
        // SizeBox 로 감싸고 height로 높이를 설정.
        height: 140,
          child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              InkWell(
                onTap: () {
                  print("change click");
                },
                child: Container(
                  margin: EdgeInsets.all(8),
                  height: 50,
                  child: Row(
                     children: [
                       SvgPicture.asset('assets/icons/Edit-24.svg'),
                       SizedBox(
                         width: 8,
                       )
                       ,Text("수정",style: TextStyle(fontWeight: FontWeight.bold,fontStyle: FontStyle.italic,fontSize: 20,color: Colors.grey.shade500),)
                     ],
                  ),
          ),
              ),
              InkWell(
                onTap: () {
                  print("delete click");
                },
                child: Container(
                  margin: EdgeInsets.all(8),
                  height: 50,
                  child: Row(
                    children: [
                      SvgPicture.asset('assets/icons/Edit-24.svg'),
                      SizedBox(
                        width: 8,
                      )
                      ,Text("삭제",style: TextStyle(fontWeight: FontWeight.bold,fontStyle: FontStyle.italic,fontSize: 20,color: Colors.grey.shade500),)
                    ],
                  ),
                ),
              )
            ],

          ),

      );
      
      },

  );
}

1.Inkwell 클릭시 물결효과를 주엇습니다.