[Flutter] BottomNavigationBarのボタンをオリジナルにする方法

こんにちわ。いせきです〜〜〜
久しぶりのFlutterの投稿です！！

今回は、BottomNavigationBarの押すところを色々な形に変更できるとわかったので、共有しようと思います〜〜。

コード紹介

＊補足＊
写真や背景の調整のため、iconのサイズやcolorをいじっています。

BottomNavigationBarItem(icon: Icon(Icons.add,color: Colors.black,),label: ''),
BottomNavigationBarItem(icon: Text('タブ!?'), label: ''),
BottomNavigationBarItem(icon: Image.network('https://cdn-images-1.medium.com/max/1200/1*ilC2Aqp5sZd1wi0CopD1Hw.png',width: 40,height: 40,),label: ''),

写真

解説

BottomNavigationBarItemのiconの引数は、iconDataかと思っていましたが、Widgetだったので、Widgetなら基本的に使うことができます。

ソースコード

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          Container(
            alignment: Alignment.center,
            child: const Text('１ページ'),
          ),
          Container(
            alignment: Alignment.center,
            child: const Text('２ページ'),
          ),
          Container(
            alignment: Alignment.center,
            child: const Text('３ページ'),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: const Icon(Icons.add,color: Colors.black,),label: ''),
          BottomNavigationBarItem(icon: const Text('タブ!?'), label: ''),
          BottomNavigationBarItem(icon: Image.network('https://cdn-images-1.medium.com/max/1200/1*ilC2Aqp5sZd1wi0CopD1Hw.png',width: 40,height: 40,),label: ''),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

最後に、

便利だね。。てっきりそれ用のDart Packageを探そうと思っていました。ありがたや

参考文献