Tab Bar Pin In Flutter

Screenshot :

Tab Bar Pin In Flutter

Tab Bar Pin In Flutter :

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
          Platform.isAndroid ? Brightness.dark : Brightness.light,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: Colors.grey,
      systemNavigationBarIconBrightness: Brightness.dark,
    return MaterialApp(
        title: 'Flutter',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.deepOrange,
          platform: TargetPlatform.iOS,
        initialRoute: '/',
        routes: <String, WidgetBuilder>{
          '/': (context) => PopularPage()

class PopularPage extends StatefulWidget {
  _PopularPageState createState() => _PopularPageState();

class _PopularPageState extends State<PopularPage>
        AutomaticKeepAliveClientMixin<PopularPage> {
  TabController _tabController;
  final List _tabBarList = [
    {"id": "1", "name": "Android"},
    {"id": "2", "name": "Flutter"}

  bool get wantKeepAlive => true;

  void initState() {
    _tabController = TabController(vsync: this, length: _tabBarList.length);

  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
              floating: true,
              pinned: true,
              //snap: true,
              centerTitle: true,
              title: Text("Popular"),
              bottom: PreferredSize(
                  preferredSize: Size(double.infinity, 36.0),
                  child: Container(
                      height: 36.0,
                      child: TabBar(
                          controller: _tabController,
                          labelColor: Colors.white,
                              Color.fromARGB(255, 192, 193, 195),
                          indicator: TabBarIndicatorComponent(
                              context: context, bgColor: Colors.white),
                          tabs: _tabBarList
                              .map<Tab>((tab) => Tab(text: tab["name"]))
      body: TabBarView(
          controller: _tabController,
          children: => CategoryPage()).toList()),

class TabBarIndicatorComponent extends Decoration {
  final BuildContext context;
  final Color bgColor;

      {@required this.context, this.bgColor = Colors.white});

  BoxPainter createBoxPainter([onChanged]) =>
      _TabBarIndicatorBoxPainter(context, bgColor);

class _TabBarIndicatorBoxPainter extends BoxPainter {
  BuildContext context;
  Color bgColor;

  _TabBarIndicatorBoxPainter(this.context, this.bgColor);

  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Paint paint = Paint();
    paint.color = bgColor; = PaintingStyle.fill;
    final width = 33.0;
    final height = 2.0;
        Rect.fromLTWH(offset.dx - width / 2 + configuration.size.width / 2,
            configuration.size.height - height - 5.0, width, height),

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit