「Flutter/UI/BottomNavigationBar」の版間の差分

2019年5月17日 (金) 14:00時点における最新版

公式に参考になるコードが有る https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart

サンプル

フッターのナビを選択するとアイコンの色が円形に広がるアニメーションがついてる

class _ListPageState extends State<ArticleListPage>
    with TickerProviderStateMixin
{
  int _currentIndex = 0;
  BottomNavigationBarType _type = BottomNavigationBarType.shifting;
  List<NavigationIconView> _navigationViews;

  @override
  void initState() {
    print('initState');
    _navigationViews = <NavigationIconView>[
      NavigationIconView(
        icon: const Icon(Icons.access_alarm),
        title: 'Alarm',
        color: Colors.deepPurple,
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: CustomIcon(),
        icon: CustomInactiveIcon(),
        title: 'Box',
        color: Colors.deepOrange,
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: const Icon(Icons.cloud),
        icon: const Icon(Icons.cloud_queue),
        title: 'Cloud',
        color: Colors.teal,
        vsync: this,
      ),
      NavigationIconView(
      activeIcon: const Icon(Icons.favorite),
      icon: const Icon(Icons.favorite_border),
      title: 'Favorites',
      color: Colors.indigo,
      vsync: this,
      ),
      NavigationIconView(
      icon: const Icon(Icons.event_available),
      title: 'Event',
      color: Colors.pink,
      vsync: this,
      ),
    ];
    _navigationViews[_currentIndex].controller.value = 1.0;
  }
  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
      items: _navigationViews
          .map<BottomNavigationBarItem>((NavigationIconView navigationView) => navigationView.item)
          .toList(),
      currentIndex: _currentIndex,
      type: _type,
      //iconSize: 4.0,
      onTap: (int index) {
        setState(() {
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
        });
      },
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("$widget.title"),
          actions: _buildAppBarActionButton()
      ),
      ),
      bottomNavigationBar: botNavBar,
    );
  }