Flutter实现带动画效果的底部导航class TabBarHome extends StatelessWidget {
const TabBarHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: const Text('示例'),
),
bottomNavigationBar: const FancyTabBar(),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'示例',
)
],
),
),
);
}
}import 'package:flutter/material.dart';
import 'TabItem.dart';
import 'package:vector_math/vector_math.dart' as vector;
class FancyTabBar extends StatefulWidget {
const FancyTabBar({Key? key}) : super(key: key);
@override
_FancyTabBarState createState() => _FancyTabBarState();
}
class _FancyTabBarState extends State<FancyTabBar>
with TickerProviderStateMixin {
late AnimationController _animationController;
late Tween<double> _positionTween;
late Animation<double> _positionAnimation;
late AnimationController _fadeOutController;
late Animation<double> _fadeFabOutAnimation;
late Animation<double> _fadeFabInAnimation;
double fabIconAlpha = 1;
IconData nextIcon = Icons.search;
IconData activeIcon = Icons.search;
int currentSelected = 1;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: ANIM_DURATION));
_fadeOutController = AnimationController(
vsync: this, duration: const Duration(milliseconds: (ANIM_DURATION ~/ 5)));
_positionTween = Tween<double>(begin: 0, end: 0);
_positionAnimation = _positionTween.animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut))
..addListener(() {
setState(() {});
});
_fadeFabOutAnimation = Tween<double>(begin: 1, end: 0).animate(
CurvedAnimation(parent: _fadeOutController, curve: Curves.easeOut))
..addListener(() {
setState(() {
fabIconAlpha = _fadeFabOutAnimation.value;
});
})
..addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed) {
setState(() {
activeIcon = nextIcon;
});
}
});
_fadeFabInAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.8, 1, curve: Curves.easeOut)))
..addListener(() {
setState(() {
fabIconAlpha = _fadeFabInAnimation.value;
});
});
}
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 65,
margin: const EdgeInsets.only(top: 45),
decoration: const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.black12, offset: Offset(0, -1), blurRadius: 8)
]),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TabItem(
selected: currentSelected == 0,
iconData: Icons.home,
title: "首页",
callbackFunction: () {
setState(() {
nextIcon = Icons.home;
currentSelected = 0;
});
_initAnimationAndStart(_positionAnimation.value, -1);
}),
TabItem(
selected: currentSelected == 1,
iconData: Icons.settings_rounded,
title: "设置",
callbackFunction: () {
setState(() {
nextIcon = Icons.settings_rounded;
currentSelected = 1;
});
_initAnimationAndStart(_positionAnimation.value, 0);
}),
TabItem(
selected: currentSelected == 2,
iconData: Icons.person,
title: "我的",
callbackFunction: () {
setState(() {
nextIcon = Icons.person;
currentSelected = 2;
});
_initAnimationAndStart(_positionAnimation.value, 1);
})
],
),
),
IgnorePointer(
child: Container(
decoration: const BoxDecoration(color: Colors.transparent),
child: Align(
heightFactor: 1,
alignment: Alignment(_positionAnimation.value, 0),
child: FractionallySizedBox(
widthFactor: 1 / 3,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
height: 90,
width: 90,
child: ClipRect(
clipper: HalfClipper(),
child: Container(
child: Center(
child: Container(
width: 70,
height: 70,
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8)])
),
),
)),
),
SizedBox(
height: 70,
width: 90,
child: CustomPaint(
painter: HalfPainter(),
)),
SizedBox(
height: 60,
width: 60,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PURPLE,
border: Border.all(
color: Colors.white,
width: 5,
style: BorderStyle.none)),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Opacity(
opacity: fabIconAlpha,
child: Icon(
activeIcon,
color: Colors.white,
),
),
),
),
)
],
),
),
),
),
),
],
);
}
_initAnimationAndStart(double from, double to) {
_positionTween.begin = from;
_positionTween.end = to;
_animationController.reset();
_fadeOutController.reset();
_animationController.forward();
_fadeOutController.forward();
}
}
class HalfClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
final rect = Rect.fromLTWH(0, 0, size.width, size.height / 2);
return rect;
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return true;
}
}
class HalfPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Rect beforeRect = Rect.fromLTWH(0, (size.height / 2) - 10, 10, 10);
final Rect largeRect = Rect.fromLTWH(10, 0, size.width - 20, 70);
final Rect afterRect =
Rect.fromLTWH(size.width - 10, (size.height / 2) - 10, 10, 10);
final path = Path();
path.arcTo(beforeRect, vector.radians(0), vector.radians(90), false);
path.lineTo(20, size.height / 2);
path.arcTo(largeRect, vector.radians(0), -vector.radians(180), false);
path.moveTo(size.width - 10, size.height / 2);
path.lineTo(size.width - 10, (size.height / 2) - 10);
path.arcTo(afterRect, vector.radians(180), vector.radians(-90), false);
path.close();
canvas.drawPath(path, Paint()..color = Colors.white);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
import 'package:flutter/material.dart';
class TabItem extends StatefulWidget {
TabItem(
{required this.selected,
required this.iconData,
required this.title,
required this.callbackFunction});
String title;
IconData iconData;
bool selected;
Function callbackFunction;
@override
_TabItemState createState() => _TabItemState();
}
const double ICON_OFF = -3;
const double ICON_ON = 0;
const double TEXT_OFF = 3;
const double TEXT_ON = 1;
const double ALPHA_OFF = 0;
const double ALPHA_ON = 1;
const int ANIM_DURATION = 300;
const Color PURPLE = Color(0xFF57A4F0);
class _TabItemState extends State<TabItem> {
double iconYAlign = ICON_ON;
double textYAlign = TEXT_OFF;
double iconAlpha = ALPHA_ON;
@override
void initState() {
super.initState();
_setIconTextAlpha();
}
@override
void didUpdateWidget(TabItem oldWidget) {
super.didUpdateWidget(oldWidget);
_setIconTextAlpha();
}
_setIconTextAlpha() {
setState(() {
iconYAlign = (widget.selected) ? ICON_OFF : ICON_ON;
textYAlign = (widget.selected) ? TEXT_ON : TEXT_OFF;
iconAlpha = (widget.selected) ? ALPHA_OFF : ALPHA_ON;
});
}
@override
Widget build(BuildContext context) {
return Expanded(
child: Stack(
fit: StackFit.expand,
children: [
Container(
height: double.infinity,
width: double.infinity,
child: AnimatedAlign(
duration: Duration(milliseconds: ANIM_DURATION),
alignment: Alignment(0, textYAlign),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
widget.title,
style: TextStyle(fontWeight: FontWeight.w600),
),
)),
),
Container(
height: double.infinity,
width: double.infinity,
child: AnimatedAlign(
duration: Duration(milliseconds: ANIM_DURATION),
curve: Curves.easeIn,
alignment: Alignment(0, iconYAlign),
child: AnimatedOpacity(
duration: Duration(milliseconds: ANIM_DURATION),
opacity: iconAlpha,
child: IconButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
alignment: Alignment(0, 0),
icon: Icon(
widget.iconData,
color: PURPLE,
),
onPressed: () {
widget.callbackFunction();
},
),
),
),
)
],
),
);
}
}