Flutter : add border top on Tab

Question

How to add border top on tab, example the image bellow, would like to add a black line on the of tall tabs.

return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
            backgroundColor: theme.primaryColor,
            title:  Text("A"),
            centerTitle: false,
            leading: CustomBack(),
            bottom: TabBar(
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(0),
                color: app_theme["tabBlue"]
              ),
              labelColor: Colors.white,
              labelStyle: theme.textTheme.bodyText1.copyWith(
                fontWeight: FontWeight.bold
              ),
              unselectedLabelColor: Colors.white,
              tabs: [
                Tab(text: "1"),
                Tab(text: "2"),
                Tab(text: "3"),
              ],
              onTap: (index){
                controller.jumpToPage(index);
              },
          ),
        ),
        body: PageView(
          controller: controller,
          children: [
            One(),
            Two(),
            Three()
          ],
        ),
      ),
    );

question from:https://stackoverflow.com/questions/65623071/flutter-add-border-top-on-tab

Answer 1

Try this one,

return DefaultTabController(
  length: 3,
  child: Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      backgroundColor: theme.primaryColor,
      title: Text("A"),
      centerTitle: false,
      leading: CustomBack(),
      bottom: PreferredSize(
          child: Container(
            child: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: 1.0,
                  color: Colors.black,
                ),
                TabBar(
                  indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(0),
                      color: app_theme["tabBlue"]),
                  labelColor: Colors.white,
                  labelStyle: theme.textTheme.bodyText1
                      .copyWith(fontWeight: FontWeight.bold),
                  unselectedLabelColor: Colors.white,
                  tabs: [
                    Tab(text: "1"),
                    Tab(text: "2"),
                    Tab(text: "3"),
                  ],
                  onTap: (index) {
                    controller.jumpToPage(index);
                  },
                )
              ],
            ),
          ),
          preferredSize: Size.fromHeight(50)),
    ),
    body: PageView(
      controller: controller,
      children: [One(), Two(), Three()],
    ),
  ),
);