flutterでフッターを作る

初めましてblueです。

現在、ITベンチャー企業でwebキャンペーンシステムの開発を行なっています。

今回はflutterでフッターを作る方法について記事にしてみました！

使用する物

BottomNavigationBar class - material library - Dart API

実装コード

bottomNavigationBar: BottomNavigationBar(
       items: const [
         BottomNavigationBarItem(
           icon: Icon(Icons.home),
           label: 'Home',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.business),
           label: 'Business',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.school),
           label: 'School',
         ),
       ],
       currentIndex: _selectedIndex,
       selectedItemColor: Colors.amber[800],
       onTap: _onItemTapped,
     ),

コードの説明

■footerのタップされている場所を示す
※今回はメソッドを作っていて、タップされたところの色が変わります。

currentIndex: _selectedIndex,

■footerのアイコンの色を指定する

 ​selectedItemColor: Colors.amber[800],

全体コード

import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const Login(),
   );
 }
}

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

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

class LoginState extends State<Login>{
 int _selectedIndex = 0;
 
 void _onItemTapped(int index) {
   setState(() {
     _selectedIndex = index;
   });
 }

   
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: const Text('footer'),
       ),
       body: const Center(
           child: Text('footer')
       ),
     bottomNavigationBar: BottomNavigationBar(
       items: const [
         BottomNavigationBarItem(
           icon: Icon(Icons.home),
           label: 'Home',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.business),
           label: 'Business',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.school),
           label: 'School',
         ),
       ],
       currentIndex: _selectedIndex,
       selectedItemColor: Colors.amber[800],
       onTap: _onItemTapped,
     ),
     ),
   );
 }
}

実装画面