Custom TabBar(1) - Text TabBar

 

class CustomTabBar extends StatefulWidget {
  const CustomTabBar({required this.tabString, required this.onChanged, Key? key}) : super(key: key);
  final List<String> tabString;
  final ValueChanged<int> onChanged;
  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> {
  int tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: List.generate(
          widget.tabString.length,
          (index) => Expanded(
                child: InkWell(
                  borderRadius: BorderRadius.circular(15),
                  onTap: () {
                    setState(() {
                      tabIndex = index;
                    });
                    widget.onChanged.call(index);
                  },
                  child: Row(
                    children: [
                      Spacer(),
                      Container(
                        margin: EdgeInsets.only(top: 10, bottom: 10),
                        padding: EdgeInsets.only(
                          bottom: 6,
                        ),
                        decoration: BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                          color: tabIndex == index ? Color(0xff245E57) : Colors.transparent,
                          width: 3, // Underline thickness
                        ))),
                        child: Text(
                          widget.tabString[index],
                          style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.w600,
                              color: tabIndex == index ? Color(0xff245E57) : AppColors.black0B0A0A),
                        ),
                      ),
                      Spacer(),
                    ],
                  ),
                ),
              )),
    );
  }
}

 

 

 

수정해서 쓰면 좋을 듯 합니다~

You can use it, with some modififying.

onChanged에서 (int value) {}  function 넣어주시면 됩니다.

you need to add onChanged value

 

참 쉽죠?

Too easy, right?