반응형
둥근 탭 바 인 플러터를 만드는 방법은 무엇인가요?
이 탭 바를 만들고 싶습니다.
통을 반올림하려고 하는데 선택한 탭에 따라 반올림 표시가 어떻게 되는지 모르겠어요. 내가 지금 가지고 있는 이 탭 바.
import 'package:flutter/material.dart';
class AppTabBar extends StatefulWidget {
final TabController? tabController;
const AppTabBar({Key? key, required this.tabController}) : super(key: key);
@override
_AppTabBarState createState() => _AppTabBarState();
}
class _AppTabBarState extends State<AppTabBar> {
@override
Widget build(BuildContext context) {
return Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(10.0)),
border: Border.all(color: Color.fromRGBO(27, 189, 198, 1))),
child: TabBar(
controller: widget.tabController,
indicator: BoxDecoration(
color: Color.fromRGBO(27, 189, 198, 1),
),
labelColor: Color.fromRGBO(238, 248, 254, 1),
unselectedLabelColor: Color.fromRGBO(238, 248, 254, 1),
tabs: [
Tab(
text: 'first',
),
Tab(
text: 'second',
),
],
),
);
}
}
하지만 이렇게 보인다
양쪽(오른쪽, 왼쪽) 하단만 둥글게 하고 탭은 둥글게 해야 합니다.
@override
Widget build(BuildContext context) {
return Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
border: Border.all(
color: Color.fromRGBO(27, 189, 198, 1),
),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
child: TabBar(
controller: tabController,
indicator: BoxDecoration(
color: Color.fromRGBO(27, 189, 198, 1),
),
labelColor: Color.fromRGBO(238, 248, 254, 1),
unselectedLabelColor: Color.fromRGBO(238, 248, 254, 1),
tabs: [
Tab(
text: 'first',
),
Tab(
text: 'second',
),
],
),
),
);
}
반응형
'개발하자' 카테고리의 다른 글
플러터 파이어베이스 구글 로그인이 작동하지 않습니다. 계정 선택 후 중지 (0) | 2023.08.13 |
---|---|
플러터에서 스마트폰이나 태블릿으로 기기를 확인할 수 있나요? (0) | 2023.08.13 |
쿠버네티스 배포에서 동적/가변 이미지 태그를 사용하는 방법? (0) | 2023.08.11 |
Terraform - 하나를 제외한 모든 리소스 (0) | 2023.08.11 |
실행 중인 kubernetes 포드의 로그를 표시하는 단일 명령 (0) | 2023.08.10 |