[Flutter] showModalBottomSheet

Lim-HN·2023년 8월 30일
0

flutter

목록 보기
1/3
post-thumbnail

이쁜 showModalBottomSheet 만들기 !


텍스트 버튼 누르면 나오게

TextButton(
    onPressed: () {
    _showModal(context);
    },
    child: const Text(
    '이쁜 바텀 모달',
    ),
),

  • 모달 부르는 부분
  void _showModal(BuildContext context) {
      showModalBottomSheet(
        backgroundColor: Colors.transparent,	//	모달 뒤의 색
        context: context,
        builder: (context) {
          return Container(
            width: 330,
            height: 165,
            margin: const EdgeInsets.only(bottom: 50, left: 30, right: 30),	//	모달 밑의 띄어짐 정도
            clipBehavior: Clip.antiAlias,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(20)),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                _modalBar(context),	//	모달 상단의 바
                Expanded(
                    child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: ListView.builder(
                      itemCount: shareIconInfo.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                         //... 카카오톡, 메시지, 링크복사 등등
                        );
                      }),
                )),
              ],
            ),
          );
        },
      );
  }

  Widget _modalBar(BuildContext context) {
    final theme = Theme.of(context);

    return FractionallySizedBox(
      widthFactor: 0.25,
      child: Container(
        margin: const EdgeInsets.symmetric(
          vertical: 12.0,
        ),
        child: Container(
          height: 5.0,
          decoration: BoxDecoration(
            color: theme.dividerColor,
            borderRadius: const BorderRadius.all(Radius.circular(2.5)),
          ),
        ),
      ),
    );
  }



0개의 댓글

관련 채용 정보