[Flutter] 플로팅 버튼 중단부에 위치시키기 BottomApp, Floationg Action

이런걸 만들어보자.

int _selectedIndex = 0;

void _onItemTapped(int index) {

  setState(() {

    _selectedIndex = index;

  });

}

 

 

Scaffold(

bottomNavigationBar: BottomAppBar(

  shape: CircularNotchedRectangle(),

  child: Container(

    height: 60.0,

    child: Row(

      mainAxisAlignment: MainAxisAlignment.spaceAround,

      children: <Widget>[

        IconButton(

          icon: Icon(Icons.home),

          onPressed: () => _onItemTapped(0),

          color: _selectedIndex == 0

              ? Theme.of(context).primaryColor

              : Colors.grey,

        ),

        IconButton(

          icon: Icon(Icons.favorite),

          onPressed: () => _onItemTapped(1),

          color: _selectedIndex == 1

              ? Theme.of(context).primaryColor

              : Colors.grey,

        ),

        IconButton(

          icon: Icon(Icons.person),

          onPressed: () => _onItemTapped(2),

          color: _selectedIndex == 2

              ? Theme.of(context).primaryColor

              : Colors.grey,

        ),

        IconButton(

          icon: Icon(Icons.settings),

          onPressed: () => _onItemTapped(3),

          color: _selectedIndex == 3

              ? Theme.of(context).primaryColor

              : Colors.grey,

        ),

      ],

    ),

  ),

),

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

floatingActionButton: FloatingActionButton(

  onPressed: () {

    // Add your onPressed code here!

  },

  child: const Icon(Icons.add),

  elevation: 0,

),

// appBar: AppBar(

//   backgroundColor: FNC_GREY,

//   title: TextButton(onPressed: () {}, child: Text('FNC AERATOR')),

//   centerTitle: true,

//   actions: [

//     IconButton(onPressed: () {}, icon: Icon(Icons.menu_rounded)),

//   ],

// ),

body: Text('Home'));