[英]How to implement clip toolbar widget in flutter
This can easily be achieved by custompainter or customclipper.这可以通过 custompainter 或 customclipper 轻松实现。 here is an example.
这是一个例子。 I believe you can improve it to better.
我相信你可以把它改进得更好。
Widget for bottom navbar:底部导航栏的小部件:
Positioned(
bottom: 0,
child: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.amber,
child: Stack(children: [
AnimatedPositioned(
curve: Curves.bounceOut,
duration: const Duration(milliseconds: 300),
top: 10,
left: (MediaQuery.of(context).size.width / 3) * tab,
child: SizedBox(
width: MediaQuery.of(context).size.width / 3,
height: 50,
child: CustomPaint(
size: Size(MediaQuery.of(context).size.width / 3, 50),
painter: TabPainter(),
),
),
),
Positioned(
top: 59,
child: Container(
height: 2,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
Positioned(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 80,
child: Row(
children: [
Expanded(
child: IconButton(
icon: const Icon(Icons.abc),
onPressed: () {
setState(() {
tab = 0;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.add_box),
onPressed: () {
setState(() {
tab = 1;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.air),
onPressed: () {
setState(() {
tab = 2;
});
},
),
)
],
),
),
),
]),
),
)
Painter code:画家代码:
class TabPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
Path path = Path()
..moveTo(0, size.height)
..quadraticBezierTo(
size.width * 0.2, size.height, size.width * 0.15, size.height * 0.5)
..quadraticBezierTo(size.width * 0.1, 0, size.width * 0.3, 0)
..lineTo(size.width * 0.7, 0)
..quadraticBezierTo(
size.width * 0.9, 0, size.width * 0.85, size.height * 0.5)
..quadraticBezierTo(
size.width * 0.8, size.height, size.width * 1.1, size.height)
..close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
Output输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.