Code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class BottomNav5 extends StatefulWidget {
@override
BottomNav5State createState() => BottomNav5State();
}
class BottomNav5State extends State<BottomNav5> {
var currentIndex = 0;
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return Scaffold(
bottomNavigationBar: Container(
margin: EdgeInsets.all(20),
height: _width * .155,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.11),
blurRadius: 25,
offset: Offset(0, 10),
),
],
borderRadius: BorderRadius.circular(50),
),
child: ListView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: _width * .024),
itemBuilder: (context, index) => InkWell(
onTap: () {
setState(() {
currentIndex = index;
HapticFeedback.lightImpact();
});
},
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Stack(
children: [
SizedBox(
width: _width * .2125,
child: Center(
child: AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
height: index == currentIndex ? _width * .12 : 0,
width: index == currentIndex ? _width * .2125 : 0,
decoration: BoxDecoration(
color: index == currentIndex
? Colors.redAccent.withOpacity(.2)
: Colors.transparent,
borderRadius: BorderRadius.circular(50),
),
),
),
),
Container(
width: _width * .2125,
alignment: Alignment.center,
child: Icon(
listOfIcons[index],
size: _width * .076,
color: index == currentIndex
? Colors.redAccent
: Colors.black26,
),
),
],
),
),
),
),
);
}
List<IconData> listOfIcons = [
Icons.home_rounded,
Icons.favorite_rounded,
Icons.settings_rounded,
Icons.person_rounded,
];
}
0 Comments