フラッターBottomNavigationBar

フラッターシリーズ全体のディレクトリ

BottomNavigationBarナビゲーションコントロールの下

プロパティ	説明
BottomNavigationBarItem	複数の項目、
iconSize	アイコンのサイズ
currentIndex	デフォルトで選択されたいくつかの最初の
ONTAP	変更を選択して、コールバック
fixedColor	フォントの色を選択= BottomNavigationBarType.fixedタイプするとき
タイプ	スタイル修正：シフト：

import 'package:flutter/material.dart';

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BottomNavigationBar();
}

class _BottomNavigationBar extends State<BottomNavigationBarDemo> {
  int _selectIndex = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text(
              '微信',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '通讯录',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '发现',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '我',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
        ],
        iconSize: 24,
        currentIndex: _selectIndex,
        onTap: (index) {
          setState(() {
            _selectIndex = index;
          });
        },
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

効果：