Flutter button at the bottom of Flutter mimics the bottom of salty Fish APP

  • Build the overall layout
  • PageView layout:
  • FloatingActionButton
  • Bottom Button:
  • Sets the FloatButton position
  • FloatButton optimization

Education is not a code of ethics, nor is it a code of conduct for primary school students. In fact, it is not linked to the level of education, social development and economic level. It is more a kind of understanding, understanding of others’ difficulties, the situation and habits of others.

First, kangkang’s effect today:

Rendering (1.1) :

Analysis:

  • Scaffolding is used to complete the Scaffold layout
  • Use PageView + floatingActionButton + bottomNavigationBar to build the bottomNavigationBar
  • By setting the floatingActionButtonLocation to set FloatButton button position

Build the overall layout

 // Used to identify the subscript of the currently clicked button
 int _index = 0;
	
  PageController _pageController;

  @override
  void initState(a) {
    // Initialize the PageView controller
    _pageController = PageController();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: initPageView(),
      ),
      
      // Initialize floatingActionButton
      floatingActionButton: initFloatingActionButton(),

      // Initialize the bottom Button
      bottomNavigationBar: initBottomNavigationBar(),
    );
  }
Copy the code

PageView layout:

 /* * PageView */
  PageView initPageView(a) {
    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),
	      ),
	    );
	  }
Copy the code
  • PageView through PageController (PageView controller) in PageController. JumpToPage (int); Method to set the current Button to follow changes

FloatingActionButton

 Widget initFloatingActionButton(a) {
    return FloatingActionButton(
      backgroundColor: Colors.grey,
      / / the shadow
      elevation: 10,
      onPressed: () {
        setState(() {
         // The button synchronizes with the button
          _pageController.jumpToPage(_index);
        });
      },
      child: Icon(Icons.android),
    );
  }
Copy the code

Bottom Button:

(using BottomNavigationBar)

BottomNavigationBar initBottomNavigationBar(a) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      //Button Button follow slide
      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] The current title
  /// [icon] Current image
  /// [isCheck] Specifies whether to check
  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,
      ),
    );
  }
Copy the code

Take a look at the current rendering:

Rendering (1.2) :

Sets the FloatButton position

@override
  Widget build(BuildContext context) {
    return Scaffold(
   		 .....
     	 //Float is between the navigation barsfloatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ..... ) ; }Copy the code

Through floatingActionButtonLocation: parameter to set the position of the Float

centerDocked centerFloat miniStartFloat
centerTop endDocked startTop

There are a lot of parameters here, so LET me give you some examples:



Here’s how to use:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Copy the code

Let FloatButton sit between the bottom buttons;

FloatButton optimization

Finally, you can use Container to wrap FloatButton with a white background to make FloatButton more realistic.


 Container initFloatingActionButton(a) {
    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),
      ),
    );
  }
Copy the code

The complete code

What do you like?

Android raised toggle button (mimics bottom of Salted Fish App)

Go to the Flutter directory to see more

Original is not easy, your thumbs up is the biggest support for me, thumbs up to support it ~