Flutter bottom floating button (imitating the bottom of the salted fish app)

Education is not a code of ethics, nor is it a code of conduct for elementary school students. In fact, it is not tied to education, social development, or economic level. It is a kind of understanding, it is not easy to be considerate of others, and to be considerate of others' situations and habits.

First come to Kangkang today's effect:

效果图(1.1):

analysis:

• Use Scaffold to complete the overall layout
• Use PageView + floatingActionButton + bottomNavigationBar to complete the construction of the bottom navigation bar
• Set the location of the FloatButton button by setting floatingActionButtonLocation

Build the overall layout

 //用来标识当前点击按钮下标
 int _index = 0;
	
  PageController _pageController;

  @override
  void initState() {
    
    
    //初始化PageView控制器
    _pageController = PageController();
  }
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: initPageView(),
      ),
      
      //初始化floatingActionButton
      floatingActionButton: initFloatingActionButton(),

      //初始化底部Button按钮
      bottomNavigationBar: initBottomNavigationBar(),
    );
  }

PageView layout:

 /*
   * PageView布局 
   */
  PageView initPageView() {
    
    
    return PageView(
      controller: _pageController,
      onPageChanged: (index) {
    
    
        setState(() {
    
    
          _index = index;
        });
      },
      children: [
        initPageViewItem("11"),
        initPageViewItem("22"),
        initPageViewItem("33"),
        initPageViewItem("44"),
        initPageViewItem("55"),
      ],
    );
  }

	initPageViewItem(String s) {
    
    
	    return Container(
	      child: Center(
	        child: Text(s),
	      ),
	    );
	  }

• PageView sets the current Button to follow changes through the pageController.jumpToPage(int ); method in PageController (PageView controller)

FloatingActionButton button code:

 Widget initFloatingActionButton() {
    
    
    return FloatingActionButton(
      backgroundColor: Colors.grey,
      //阴影
      elevation: 10,
      onPressed: () {
    
    
        setState(() {
    
    
         // 按钮跟随button同步
          _pageController.jumpToPage(_index);
        });
      },
      child: Icon(Icons.android),
    );
  }

Button button at the bottom:

(Use BottomNavigationBar)

BottomNavigationBar initBottomNavigationBar() {
    
    
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      //Button按钮跟随滑动
      currentIndex: _index,
      onTap: (index) {
    
    
        setState(() {
    
    
          _index = index;
        });
        _pageController.jumpToPage(_index);
      },

      items: [
        initBottomNavigationBarItem("11", Icons.colorize, _index == 0),
        initBottomNavigationBarItem("22", Icons.cancel, _index == 1),
        initBottomNavigationBarItem("00", Icons.cancel, _index == 2),
        initBottomNavigationBarItem("33", Icons.android, _index == 3),
        initBottomNavigationBarItem("43", Icons.ios_share, _index == 4),
      ],
    );
  }

  /// [s] 当前标题
  /// [icon] 当前图片
  /// [isCheck] 是否选中  
  initBottomNavigationBarItem(String s, IconData icon, bool isSelect) {
    
    
    return BottomNavigationBarItem(
      title: Text(
        s,
        style: TextStyle(color: isSelect ? Colors.lightGreen : Colors.grey),
      ),
      icon: Icon(
        icon,
        color: isSelect ? Colors.lightGreen : Colors.grey,
      ),
    );
  }

Take a look at the current renderings:

效果图(1.2):

Set FloatButton position

@override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
   		 .....
     	 //Float位于导航栏之间
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        .....
    );
  }

Set the location of Float through the floatingActionButtonLocation: parameter

centerDocked	centerFloat	miniStartFloat
centerTop	endDocked	startTop

There are still many parameters here, so I will list them for you:

here are you using:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Let the FloatButton be located between the bottom buttons;

FloatButton optimization

Finally, you can use Container to wrap FloatButton, and set a white background color for FloatButton to be more realistic;

 Container initFloatingActionButton() {
    
    
    return Container(
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 3),
          borderRadius: BorderRadius.circular(40)),
      child: FloatingActionButton(
        backgroundColor: _index == 2 ? Colors.yellow : Colors.grey,
        elevation: 10,
        onPressed: () {
    
    
          setState(() {
    
    
            _index = 2;
            _pageController.jumpToPage(_index);
          });
        },
        child: Icon(Icons.android),
      ),
    );
  }

Complete code

you may also like:

Android raised toggle button (imitating the bottom of the Xianyu App)

Go to the Flutter catalog to see more

Originality is not easy, your likes are your greatest support for me, please like to support it~