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() {
  SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness:
          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 {
  @override
  _PopularPageState createState() => _PopularPageState();
}

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

  @override
  bool get wantKeepAlive => true;

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

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
              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,
                          unselectedLabelColor:
                              Color.fromARGB(255, 192, 193, 195),
                          indicator: TabBarIndicatorComponent(
                              context: context, bgColor: Colors.white),
                          tabs: _tabBarList
                              .map<Tab>((tab) => Tab(text: tab["name"]))
                              .toList()))))
        ];
      },
      body: TabBarView(
          controller: _tabController,
          children: _tabBarList.map((item) => CategoryPage()).toList()),
    );
  }
}

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

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

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

class _TabBarIndicatorBoxPainter extends BoxPainter {
  BuildContext context;
  Color bgColor;

  _TabBarIndicatorBoxPainter(this.context, this.bgColor);

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

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 www.fluttertutorial.in