Weird background shape of floating action button when pressed

I am having a hard time finding out why this docked floating action button behaves like this. When I press the floating action button, it shows a weird background shape when pressed.

Code:

floatingActionButton: Padding(
        padding: const EdgeInsets.only(top: 155),
        child: Container(
          height: 80,
          width: 100,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () => setState(() {_currentIndex=4;}),
              child: Tab(
                icon: Image.asset('images/scan.png'),
              ),
              backgroundColor: Colors.transparent,
              elevation: 0,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,