Breaking News: Grepper is joining You.com. Read the official announcement!

flutter customised tabs using tabcontroller

Jagat Guru answered on August 21, 2022 Popularity 9/10 Helpfulness 3/10

answer flutter customised tabs using tabcontroller

flutter customised tabs using tabcontroller

Comment

class DetailTabs extends StatefulWidget {
  const DetailTabs({Key? key}) : super(key: key);

  @override
  State<DetailTabs> createState() => _DetailTabsState();
}

class _DetailTabsState extends State<DetailTabs> with TickerProviderStateMixin {
  late TabController _controller;

  List<Tab> tabs = [
    Tab(
      text: 'Description',
    ),
    Tab(
      text: 'Review',
    ),
    Tab(
      text: 'Disscussion',
    )
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
  // if this widget is used inside ListView then retun widget should be non scrollable 
  // widget like column in this example else use ListView
    return Column(children: [
      Container(
        child: TabBar(
          controller: _controller,
          indicatorColor: Colors.green.shade700,
          labelColor: Colors.black87,
          labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
          unselectedLabelColor: Colors.grey.shade500,
          tabs: tabs,
        ),
      ),
      Container(
        width: double.infinity,
        height: 400,
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        child: TabBarView(
          controller: _controller,
          children: [
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      )
    ]);
  }
}

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: flutter tabs using whatever

Link to this answer
Share Copy Link

Contributed on Aug 21 2022

Jagat Guru

0 Answers Avg Quality 2/10

flutter customised tabs using tabcontroller

Contents

More Related Answers

flutter customised tabs using tabcontroller

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.