Flutter Fancy Tab Bar

Flutter Fancy Tab Bar :

Screenshot :

Flutter Fancy Tab Bar

fancy_tab_bar.dart

import 'package:flutter/material.dart';

class FancyTabBar extends StatefulWidget {
  @override
  _FancyTabBarState createState() => _FancyTabBarState();
}

class _FancyTabBarState extends State<FancyTabBar>
    with SingleTickerProviderStateMixin {
  AnimationController _animationCtrl;
  Tween<double> _tween;
  Animation _animation;
  int _currentSelected = 0;

  String _tabTitle = 'home';
  IconData _tabIcon = Icons.home;
  @override
  void initState() {
    super.initState();

    _animationCtrl =
        AnimationController(duration: Duration(milliseconds: 300), vsync: this);

    _tween = Tween<double>(begin: -1, end: 0);

    _animation = _tween
        .animate(CurvedAnimation(parent: _animationCtrl, curve: Curves.easeIn))
          ..addListener(() {
            setState(() {});
          });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
      Container(
          height: 65.0,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30.0),
                  topRight: Radius.circular(30.0)),
              color: Color(0xFFBAC3EE)),
          child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                TabItem(
                    text: 'Home',
                    icon: Icons.home,
                    isTabSelected: _currentSelected == 0,
                    currentClicked: () {
                      setState(() {
                        _initAnimation(_animation.value, -1);
                        _tabTitle = 'Home';
                        _tabIcon = Icons.home;
                        _currentSelected = 0;
                      });
                    }),
                TabItem(
                    text: 'News',
                    icon: Icons.new_releases,
                    isTabSelected: _currentSelected == 1,
                    currentClicked: () {
                      setState(() {
                        _initAnimation(_animation.value, 0);
                        _tabTitle = 'News';
                        _tabIcon = Icons.new_releases;
                        _currentSelected = 1;
                      });
                    }),
                TabItem(
                    text: 'More',
                    icon: Icons.more,
                    isTabSelected: _currentSelected == 2,
                    currentClicked: () {
                      setState(() {
                        _initAnimation(_animation.value, 1);
                        _tabTitle = 'More';
                        _tabIcon = Icons.more;
                        _currentSelected = 2;
                      });
                    })
              ])),
      IgnorePointer(
          child: Container(
              height: 65.0,
              child: Align(
                  alignment: Alignment(_animation.value, 0),
                  child: FractionallySizedBox(
                      widthFactor: 1 / 3,
                      child: Container(
                          height: 40.0,
                          margin: EdgeInsets.only(left: 20.0, right: 20.0),
                          padding: EdgeInsets.only(left: 5.0, right: 5.0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20.0),
                            color: Color(0xFFA3AFE3),
                          ),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Icon(_tabIcon, color: Color(0xFFE5E9FB)),
                                Text(_tabTitle,
                                    style: TextStyle(color: Color(0xFFE5E9FB)))
                              ]))))))
    ]);
  }

  _initAnimation(double begin, double end) {
    _tween.begin = begin;
    _tween.end = end;
    _animationCtrl.reset();
    _animationCtrl.forward();
  }
}

class TabItem extends StatefulWidget {
  String text;
  IconData icon;
  Function currentClicked;
  bool isTabSelected;

  TabItem(
      {@required this.text,
      @required this.icon,
      @required this.currentClicked,
      @required this.isTabSelected});

  @override
  _TabItemState createState() => _TabItemState();
}

const double ICON_OFF = 5;
const double ICON_ON = 0;
const double ALPHA_OFF = 0;
const double ALPHA_ON = 1;
const int ANIM_DURATION = 500;

class _TabItemState extends State<TabItem> {
  double iconYAlign = ICON_ON;
  double iconAlpha = ALPHA_OFF;

  @override
  void initState() {
    super.initState();
    _setIconAlpha();
  }

  @override
  void didUpdateWidget(TabItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    _setIconAlpha();
  }

  _setIconAlpha() {
    setState(() {
      iconYAlign = (widget.isTabSelected) ? ICON_OFF : ICON_ON;
      iconAlpha = (widget.isTabSelected) ? ALPHA_OFF : ALPHA_ON;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Container(
            child: AnimatedAlign(
                duration: Duration(milliseconds: ANIM_DURATION),
                alignment: Alignment(0, iconYAlign),
                curve: Curves.easeIn,
                child: AnimatedOpacity(
                    duration: Duration(milliseconds: ANIM_DURATION),
                    opacity: iconAlpha,
                    child: IconButton(
                        icon: Icon(
                          widget.icon,
                          size: 28.0,
                          color: Color(0xFFE5E9FB),
                        ),
                        highlightColor: Colors.transparent,
                        splashColor: Colors.transparent,
                        onPressed: () {
                          widget.currentClicked();
                        })))));
  }
}

main.dart

import 'package:flutter/material.dart';
import 'fancy_tab_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Tutorial',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.blue),
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  createState() => _HomeState();
}

class _HomeState extends State<HomePage> with SingleTickerProviderStateMixin {
  _buildGradientContainer(double width, double heigth) {
    return Align(
        alignment: Alignment.topLeft,
        child: Container(
            width: width / 1.5,
            height: heigth,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [
                      Color(0xFFE5E9FB),
                      Color(0xFFffffff),
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    stops: [0.2, 1.0]))));
  }

  _buildTitle(double height) {
    return Container(
        padding: EdgeInsets.only(top: 50.0, left: 70.0, right: 10.0),
        child: Align(
            alignment: Alignment.centerLeft,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Flutter',
                      style: TextStyle(
                          fontSize: 28.0, fontFamily: 'Montserrat-Bold')),
                  Text('Flutter is cross platform language.',
                      style: TextStyle(
                          fontSize: 14.0, fontFamily: 'Montserrat-Medium'))
                ])));
  }

  _buildListView(double height) {
    return Container(
        height: 450.0,
        margin: EdgeInsets.only(top: 20.0),
        child: ListView.builder(
            itemCount: 5,
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.only(left: 50.0),
            physics: BouncingScrollPhysics(),
            itemBuilder: (context, index) {
              return Padding(
                  padding:
                      EdgeInsets.symmetric(vertical: 20.0, horizontal: 15.0),
                  child: SizedBox(
                      width: 230.0,
                      child: Stack(fit: StackFit.expand, children: <Widget>[
                        Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(12.0),
                                boxShadow: [
                              BoxShadow(
                                  color: Colors.black12,
                                  offset: Offset(2.0, 10.0),
                                  blurRadius: 10.0)
                            ])),
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              SizedBox(height: 12.0),
                              Image.asset("assets/imgs/image_01.png",
                                  height: 200.0, width: 172.0),
                              SizedBox(height: 12.0),
                              Padding(
                                  padding: EdgeInsets.all(12.0),
                                  child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        SizedBox(height: 30.0),
                                        Text('126 \$',
                                            style: TextStyle(
                                                fontSize: 30.0,
                                                fontWeight: FontWeight.bold,
                                                fontFamily: 'Montserrat-Bold')),
                                        SizedBox(height: 30.0),
                                        Text('Hemes Armchair',
                                            style: TextStyle(
                                                fontSize: 16.0,
                                                fontWeight: FontWeight.bold,
                                                fontFamily: 'Montserrat-Bold')),
                                        Text('NEW SALE',
                                            style: TextStyle(
                                                fontSize: 14.0,
                                                color: Colors.grey,
                                                fontFamily:
                                                    'Montserrat-Medium'))
                                      ]))
                            ])
                      ])));
            }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Home",
                style: TextStyle(inherit: true, color: Colors.black)),
            // brightness: Brightness.light,
            backgroundColor: Colors.transparent,
            centerTitle: true,
            elevation: 0.0,
            iconTheme: IconThemeData(color: Colors.black)),
        backgroundColor: Colors.white,
        body: LayoutBuilder(builder: (context, constraints) {
          var width = constraints.maxWidth;
          var height = constraints.maxHeight;
          return Stack(fit: StackFit.expand, children: [
            _buildGradientContainer(width, height),
            SingleChildScrollView(
                child: Column(children: <Widget>[
              _buildTitle(height),
              _buildListView(height)
            ]))
          ]);
        }),
        bottomNavigationBar: FancyTabBar());
  }
}

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