Shutter tabbarview component

Flutter TabBarView Components

sketch

TabBarView yes Material Component library provides Tab Layout components , Usually and TabBar In combination with .

TabBarView Encapsulates the PageView, It's very simple to use .

Basic attributes

TabBarView

controller：TabBarView controller .

children： Subelement .

TabBar

tabs	 A series of label controls 

controller	 Tab select change controller 

isScrollable	 Scrollable or not , Default false

indicatorColor	 Indicator color 

indicatorWeight	 Indicator thickness 

indicator	 Indicator , Customizable shapes and other styles 

indicatorSize	 Indicator length ,tab： and tab As long as ,label： And labels label  As long as 

labelColor	 Label color 

labelStyle	 Label style 

labelPadding	 label padding

unselectedLabelColor	 Label color is not selected 

unselectedLabelStyle	 Label style is not selected 

Easy to use

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

    @override
    State<StatefulWidget> createState() {
        return _TabBarViewPageState();
    }
}

class _TabBarViewPageState extends State<TabBarViewPage> with SingleTickerProviderStateMixin {
    final List tabs = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"];
    late TabController _controller;

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

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text("TabBarView & PageView"),
                bottom: TabBar(
                    indicatorColor: Colors.red,
                    controller: _controller,
                    isScrollable: true,
                    tabs: tabs.map((e) {
                        return Tab(text: e);
                    }).toList(),
                ),
            ),
            body: TabBarView(
                dragStartBehavior: DragStartBehavior.down,
                controller: _controller,
                children: tabs.map((e) {
                    return Container(
                        alignment: Alignment.center,
                        child: Text(e, textScaleFactor: 3),
                    );
                }).toList(),
            ),
        );
    }
}