개발하자

둥근 탭 바 인 플러터를 만드는 방법은 무엇인가요?

Cuire 2023. 8. 12. 11:49
반응형

둥근 탭 바 인 플러터를 만드는 방법은 무엇인가요?

이 탭 바를 만들고 싶습니다.

통을 반올림하려고 하는데 선택한 탭에 따라 반올림 표시가 어떻게 되는지 모르겠어요. 내가 지금 가지고 있는 이 탭 바.

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',
            ),
          ],
        ),
      ),
    );
  }

반응형