我怎样才能制作这样的自定义导航栏?
我已经尝试过这个
在主页上
class CustomNavigationBar extends StatelessWidget {
final List<NavigationDestination> destinations;
final int selectedIndex;
final Function(int index) onDestinationSelected;
const CustomNavigationBar({
Key? key,
required this.destinations,
required this.selectedIndex,
required this.onDestinationSelected,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green, // You can customize the background color
height: 60, // Adjust the height as needed
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(
destinations.length,
(index) => GestureDetector(
onTap: () => onDestinationSelected(index),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
destinations[index].icon,
color: index == selectedIndex ? Colors.white : Colors.black,
),
if (destinations[index].label != null)
Text(
destinations[index].label!,
style: TextStyle(
color: index == selectedIndex ? Colors.white : Colors.black,
),
),
],
),
),
),
),
);
}
}
在主页上
final List<NavigationDestination> destinations = [
NavigationDestination(icon: Icons.home, label: 'Home'),
NavigationDestination(icon: Icons.search, label: 'Search'),
NavigationDestination(icon: Icons.shopping_cart, label: 'Cart'),
];
我已经尝试过这个
至少我需要任何帮助来了解我该如何做这个蛇形导航栏
我已经尝试了很多,我读过它,但我绝对做不到
尝试下面的代码:
import 'package:flutter/material.dart';
class CustomNavigationBar extends StatelessWidget {
final List<NavigationDestination> destinations;
final int selectedIndex;
final Function(int index) onDestinationSelected;
const CustomNavigationBar({
super.key,
required this.destinations,
required this.selectedIndex,
required this.onDestinationSelected,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.symmetric(horizontal: 16.0),
decoration: BoxDecoration(
color: const Color(0xFF017620),
borderRadius: BorderRadius.circular(30.0),
),
height: 60.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(
destinations.length,
(index) {
bool isSelected = index == selectedIndex;
return GestureDetector(
onTap: () => onDestinationSelected(index),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: isSelected
? const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
)
: null,
padding: EdgeInsets.all(isSelected ? 8.0 : 0.0),
child: Icon(
destinations[index].icon,
color: isSelected ? Colors.green : Colors.white,
),
),
],
),
);
},
),
),
);
}
}
class NavigationDestination {
final IconData icon;
final String? label;
NavigationDestination({required this.icon, this.label});
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
bottomNavigationBar: CustomNavigationBar(
destinations: [
NavigationDestination(icon: Icons.home, label: 'Home'),
NavigationDestination(icon: Icons.note, label: 'Notes'),
NavigationDestination(
icon: Icons.calendar_today, label: 'Calendar'),
NavigationDestination(icon: Icons.person, label: 'Profile'),
],
selectedIndex: 0,
onDestinationSelected: (index) {
// todo: handle destination selection...
},
),
body: const Center(child: Text('Content goes here')),
),
);
}
}