一步一步搭建Flutter开发架子-Tabbar

一点点搭建一个架构，架构对于开发比较重要，有固定的模式，第一不容易产生bug，并且有利于对于项目以及开发架构的理解。 对于一个app，常见的架构一般是底部有Tabbar形式，或者采用抽屉的形式，底部Tabbar大部分app都是平铺的，中间有一块凸出来的形式。

普通Tabbar

 比较简单代码直接贴出来了

 @override

  Widget build(BuildContext context) {

    return Scaffold(

      bottomNavigationBar: normalBottomBar(),

    );

  }

  normalBottomBar() {

    return BottomNavigationBar(

      // 底部导航

      items: <BottomNavigationBarItem>[

        BottomNavigationBarItem(

            icon: Icon(Icons.home),

            label: 'Home',

            activeIcon: Icon(Icons.access_alarm)),

        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'search'),

        BottomNavigationBarItem(icon: Icon(Icons.people), label: 'mine'),

      ],

      currentIndex: _selectedIndex,

      fixedColor: Colors.blue,

      elevation: 10, // default： 8.0

      type: BottomNavigationBarType.fixed,

      iconSize: 30,

      selectedFontSize: 12, // 默认是14，未选择是14

      onTap: _onItemTapped,

    );

  }

  _onItemTapped(int index) {

    setState(() {

      _selectedIndex = index;

    });

  }

中间凸出的Tabbar

官方的Material风格库中存在这种效果，不过个人感觉跟现在流行的风格有点不太匹配，所以封装了一个接近于现在流行风格的Tabbar。 刚开始的效果是这样的：  凸出的按钮封装了一下的代码片段：

import 'dart:math';


import 'package:flutter/material.dart';


class CenterNavigationItem extends StatefulWidget {

  CenterNavigationItem({Key key, this.onTap}) : super(key: key);


  final Function onTap;


  @override

  _CenterNavigationItemState createState() => _CenterNavigationItemState();

}


class _CenterNavigationItemState extends State<CenterNavigationItem> {

  @override

  Widget build(BuildContext context) {

    return Stack(

      children: [

        // CustomPaint(size: Size(76, 76), painter: MyPainter()),

        Container(

          width: 76,

          height: 76,

          padding: EdgeInsets.all(8),

          decoration: BoxDecoration(

              color: Color.fromRGBO(250, 250, 250, 1),

              borderRadius: BorderRadius.circular(38)),

          child: FloatingActionButton(

              child: Icon(Icons.add),

              // child: TextField(),

              tooltip: '测试', // 长按弹出提示

              onPressed: () {

                widget.onTap();

              }),

        ),

      ],

    );

  }

}

// 主页面引用：

@override

  Widget build(BuildContext context) {

    return Scaffold(

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      floatingActionButton: CenterNavigationItem(

        onTap: () {

          setState(() {

            _selectedIndex = 1;

          });

        },

      ),

      bottomNavigationBar: normalBottomBar(),

    );

  }

感觉还是差点意思， 在于底部线与线直接连接的不够平滑 

带有动画效果的Tabbar

继续改造一下的想法就是通过CustomPainter去画一个半圆。效果如下：  代码片段：

class MyPainter extends CustomPainter {

  @override

  paint(Canvas canvas, Size size) {

    Paint paint = Paint()

      ..isAntiAlias = false

      ..color = Colors.green

      ..strokeCap = StrokeCap.round

      ..strokeWidth = 0

      ..style = PaintingStyle.stroke;

    print(pi);

    canvas.drawArc(

        new Rect.fromCircle(center: Offset(38, 38), radius: size.width / 2),

        pi,

        2 * pi * 0.5,

        false,

        paint);

  }


  @override

  bool shouldRepaint(CustomPainter oldDelegate) {

    return false;

  }

}

在凸出的按钮封装的代码中添加：

class _CenterNavigationItemState extends State<CenterNavigationItem> {

  @override

  Widget build(BuildContext context) {

    return Stack(

      children: [

        CustomPaint(size: Size(76, 76), painter: MyPainter()),

        class _CenterNavigationItemState extends State<CenterNavigationItem> {

  @override

  Widget build(BuildContext context) {

    return Stack(

      children: [

        // 这个位置加入！！！！！！！！！！

        CustomPaint(size: Size(76, 76), painter: MyPainter()),

        Container(

          width: 76,

          height: 76,

          padding: EdgeInsets.all(8),

          decoration: BoxDecoration(

              color: Color.fromRGBO(250, 250, 250, 1),

              borderRadius: BorderRadius.circular(38)),

          child: FloatingActionButton(

              child: Icon(Icons.add),

              // child: TextField(),

              tooltip: '测试', // 长按弹出提示

              onPressed: () {

                widget.onTap();

              }),

        ),

      ],

    );

  }

}

      ],

    );

  }

}

最终就是这个效果。还有就是也不能闭门造车，上网搜搜大家都是怎么去构建Tabbar的。其中在github上发现一个加入了动画的开源代码。Motion-Tab-Bar。分析了一波代码，看了一眼效果如下： 

稍加修改了一下，留着以后项目可能用的上。over～欢迎讨论

one more thing...

• 1， 路由管理，
• 2， 国际化管理，
• 3， 数据持久化管理，
• 4， 响应式管理方法