Flutter the floating button FloatingActionButton

FloatingActionButton referred FAB, floating buttons can be implemented, can achieve a similar projection free navigation app bottom fish.

Common properties

FloatingActionButton common property, with the flutter of the common attributes most of the other buttons is the same, but there are special:

• child: the child view, generally Icon, does not recommend the use of text
• tooltip FAB: a long time to be displayed, but also accessibility
• backgroundColor: Background Color
• elevation: Shadow not click time
• hignlightElevation: When you click a shadow value, default 12.0
• onPressed: Click event callbacks
• shape: and the like may define the shape FAB
• mini: mini whether it is the default type false 

Basic use

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            print('FloatingActionButton');
          },
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[],
    );
  }
}

By default, it will generate a floating blue button at the bottom right of the page, we can on this basis, color, location and other attributes to be amended:

  

 Combined with bottomNavigationBar of FloatingActionButton

 By combining FloatingActionButton and bottomNavigationBar, we can achieve a similar bottom navigation free of fish App:

 

To achieve the above effect, there is a need to add bottomNavigationBar in front on the basis of:

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add,color: Colors.black,size: 40,),
          onPressed: (){
            print('FloatingActionButton');
          },
          backgroundColor: Colors.yellow
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      )
    );
  }
}

In this case, the button is floating above the bottomNavigationBar, so we can change the position of the floating button closer to the effect that the desired effect:

Now, a little bit better, but still not achieve the desired results, since the position can not change, then you can change the size to achieve the visual effect, as I said before, in order to adjust the size of the button is required in the outer sleeve button a Container, then change its size:

Container button and the outside is as big, but the free App fish inside, the outer layer of the button is also a circle of white border, is the need to Container is set to white, and leaving the pitch:

Now to achieve the effect, it can also be combined before bottomNavigationBar, add the appropriate button on the floating function:

 Codes: Click here (extraction code: axmg)