BottomNavigationBar
のウィジェットを使用しましたmaterial.dart
。選択した に背景の影を付けたいBottomNavigationBarItem
。望ましい出力はこのようなものです。出力が次のような
次のコードを作成しました。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shoppingapp/views/screens/cart/cart.dart';
import 'package:shoppingapp/views/screens/profile/profile.dart';
class BottomNavBar extends StatefulWidget {
const BottomNavBar({Key? key}) : super(key: key);
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
List<BottomNavigationBarItem> items = [
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
label: "Home",
backgroundColor: Colors.black),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag_outlined),
label: "Cart",
backgroundColor: Colors.black),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.heart),
label: "Wishlist",
backgroundColor: Colors.black),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled),
label: "Profile",
backgroundColor: Colors.black)
];
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Home',
style: optionStyle,
),
Cart(),
Text(
'Wishlist',
style: optionStyle,
),
Profile(),
];
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
boxShadow: [
BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
),
child: BottomNavigationBar(
items: items,
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
showSelectedLabels: true,
showUnselectedLabels: false,
selectedItemColor: Colors.white,
iconSize: 30,
onTap: _onItemTapped,
backgroundColor: Colors.white,
),
),
);
}
}