FlutterのBubbleBottomBar実装

最近はFlutterで遊んでいます。（スマホアプリﾀﾉｼｲﾈ!!!!!）

ほぼ公式のとおりなので備忘録程度に。

pubspec.yamlに追加。

...
dependencies:
 bubble_bottom_bar: ^1.2.0

最初のDartファイル作るとこんな感じに（当方StatefulとStatelessの使い分けもできず、ｵﾏｼﾞﾅｲと思って使っている初学者です😭）

class HomePage extends StatefulWidget {

 @override
 _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
 
 }

importも忘れずに…！

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

Scaffoldで画面内の処理をゴリゴリ書いていきます…！

@override  
Widget build(BuildContext context) {
   return new Scaffold(
     appBar: AppBar(
       title: Text("HomePage"),
     body: Center(
       child: InfoPage(),
     ),
     bottomNavigationBar: BubbleBottomBar(
       opacity: .2,
       currentIndex: currentIndex,
     //ボタンタップしたらchangePageの処理をする
       onTap: changePage,
       borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
       elevation: 10,
       fabLocation: BubbleBottomBarFabLocation.end, //new
       hasNotch: true, //new
       hasInk: true, //new, gives a cute ink effect
       inkColor: Colors.white, //optional, uses theme color if not specified
       items: <BubbleBottomBarItem>[
         BubbleBottomBarItem(
             backgroundColor: Colors.red,
             icon: Icon(
               Icons.home,
               color: Colors.black,
             ),
             activeIcon: Icon(
               Icons.home,
               color: Colors.red,
             ),
             title: Text("Page1")),
         BubbleBottomBarItem(
             backgroundColor: Colors.pinkAccent,
             icon: Icon(
               Icons.music_note,
               color: Colors.black,
             ),
             activeIcon: Icon(
               Icons.music_note,
               color: Colors.pinkAccent,
             ),
             title: Text("Page2")),
         BubbleBottomBarItem(
             backgroundColor: Colors.red,
             icon: Icon(
               Icons.chat_bubble_outline,
               color: Colors.black,
             ),
             activeIcon: Icon(
               Icons.chat_bubble_outline,
               color: Colors.red,
             ),
             title: Text("Page3")),
       ],
     ),
     backgroundColor: Colors.white,
   );
 }

}        

ボタンタップ後の画面遷移を changePage で実装していきます

void changePage(int index) {
   setState(() {
     currentIndex = index;
   });
   if (currentIndex == 0) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => ProfilePage()));
   } else if (currentIndex == 1) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => TinderLikePage()));
   } else if (currentIndex == 2) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => ChatList()));
   }
 }

class _InfoPageState extends State<InfoPage> {
 int currentIndex;

 void initState() {
   super.initState();
   currentIndex = 0;
 }

 void dispose() {
   super.dispose();
 }

 //https://stackoverflow.com/questions/59366680/adding-onpressed-or-ontab-to-bubblebottombaritem-in-flutter
 void changePage(int index) {
   setState(() {
     currentIndex = index;
   });
   if (currentIndex == 0) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => ProfilePage()));
   } else if (currentIndex == 1) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => TinderLikePage()));
   } else if (currentIndex == 2) {
     Navigator.push(
         context, MaterialPageRoute(builder: (context) => ChatList()));
   }
 }

bubble_bottom_bar - Dart API docs