[j Flutter] BottomNavigationBar -> CurvedNavigationBar 적용하기

bottombar에 CurvedNavigationBar를 사용해보자.

 

 

1. CurvedNavigationBar 패키지를 설치해준다.

 

pub.dev/packages/curved_navigation_bar/install

 

curved_navigation_bar | Flutter Package

 

2. 총 5개의 페이지를 만들어준다. 

ex )  

import 'package:flutter/material.dart';

class MessageScreen extends StatefulWidget {
  @override
  _MessageScreenState createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

3. scaffold 안에 CurvedNavigationBar를 추가해준다. 

int selectedIndex = 0;

bottomNavigationBar: CurvedNavigationBar(
          color: Colors.deepOrangeAccent, //bar색상
          backgroundColor: Colors.amberAccent, //선택 색상
          index: selectedIndex,
          items: [
            Icon(
              Icons.home,
              size: 30,
            ),
            Icon(
              Icons.rss_feed,
              size: 30,
            ),
            Icon(
              Icons.messenger,
              size: 30,
            ),
            Icon(
              Icons.shopping_cart,
              size: 30,
            ),
            Icon(
              Icons.person,
              size: 30,
            ),
          ],
          onTap: (index) {
            setState(() {
              selectedIndex = index;
            });
          },
          animationCurve: Curves.easeInBack,
          animationDuration: const Duration(milliseconds: 300),
        ),

 

4. body부분을 추가해준다. screen 화면 

- swipe가 없는 버전

  final screen = [
    HomeScreen(),
    FeedScreen(),
    MessageScreen(),
    CartScreen(),
    AccountScreen()
  ];

body: screen[selectedIndex]

 

-swipe가 있는 버전 - > PageView를 사용한다.

 

//swipe
  var _pageController = PageController();
  
  body:  PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() {
              selectedIndex = index;
            });
          },
          children: screen,
        )

 

 

5. 전체 소스

 

import 'package:flutter/material.dart';
import 'package:flutter_drg_test/screen/account.dart';
import 'package:flutter_drg_test/screen/cart.dart';
import 'package:flutter_drg_test/screen/feed.dart';
import 'package:flutter_drg_test/screen/home.dart';
import 'package:flutter_drg_test/screen/message.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;
  final screen = [
    HomeScreen(),
    FeedScreen(),
    MessageScreen(),
    CartScreen(),
    AccountScreen()
  ];

  //swipe
  var _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CurvedNavigationBar'),
          backgroundColor: Colors.blue,
        ),
        bottomNavigationBar: CurvedNavigationBar(
          color: Colors.deepOrangeAccent, //bar색상
          backgroundColor: Colors.amberAccent, //선택 색상
          index: selectedIndex,
          items: [
            Icon(
              Icons.home,
              size: 30,
            ),
            Icon(
              Icons.rss_feed,
              size: 30,
            ),
            Icon(
              Icons.messenger,
              size: 30,
            ),
            Icon(
              Icons.shopping_cart,
              size: 30,
            ),
            Icon(
              Icons.person,
              size: 30,
            ),
          ],
          onTap: (index) {
            setState(() {
              selectedIndex = index;
            });
          },
          animationCurve: Curves.easeInBack,
          animationDuration: const Duration(milliseconds: 300),
        ),
        body: screen[selectedIndex]

        // PageView(
        //   controller: _pageController,
        //   onPageChanged: (index) {
        //     setState(() {
        //       selectedIndex = index;
        //     });
        //   },
        //   children: screen,
        // ),
        );
  }
}

 

 

 

**** 실행화면 ****

 

CurvedNavigationBar 실행화면