Build an architecture bit by bit. Architecture is very important for development and has a fixed pattern. First, it is not easy to produce bugs and is conducive to understanding the project and development architecture. For an APP, the common architecture is generally in the form of Tabbar at the bottom, or in the form of drawers. Most apps at the bottom of Tabbar are tiled with a protruding piece in the middle.

Ordinary Tabbar

The simpler code is posted directly

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: normalBottomBar(),
    );
  }
  normalBottomBar() {
    returnBottomNavigationBar(// BottomNavigationBarItem: <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, / / the default:8.0
      type: BottomNavigationBarType.fixed,
      iconSize: 30,
      selectedFontSize: 12// The default is yes14, did not select yes14
      onTap: _onItemTapped,
    );
  }
  _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
Copy the code

A Tabbar protruding from the middle

This effect exists in the official Material style library, but I feel that it does not match the current popular style, so I packaged a Tabbar that is close to the current popular style. The initial effect is like this:The raised button encapsulates the following code snippet:

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: 'test', // Long press to pop-up onPressed: () {
                widget.onTap();
              }),
        )],); }} // Home page reference: @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: CenterNavigationItem(
        onTap: () {
          setState(() {
            _selectedIndex = 1;
          });
        },
      ),
      bottomNavigationBar: normalBottomBar(),
    );
  }
Copy the code

Feeling or almost mean, is the bottom line and line directly connected not smooth

Tabbar with animated effects

The idea for a further modification is to use CustomPainter to draw a semicircle. The effect is as follows:Code snippet:

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; }}Copy the code

Add to the code wrapped around the raised button:

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: [// This location joins ！！！！！！！！！！ 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: 'test', // Long press to pop-up onPressed: () { widget.onTap(); }),
        )],); }}].); }}Copy the code

And that’s the end result. And you can’t just go on the Internet and look up how people build Tabbar. One of the open source code found on Github added animation. Motion – Tab – Bar. After analyzing a wave of code, I took a look at the results as follows:

I modified it slightly to save it for possible use in future projects. Over ~ Welcome to discuss

one more thing…

  • 1. Route Management
  • 2. International management
  • 3. Data persistence management
  • 4. Responsive management