텍스트 버튼 누르면 나오게
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)),
),
),
),
);
}