How to use clip path with sliver app bar in flutter - flutter

Question

Can anyone explain me how to change clip path of sliver app bar in flutter

Answer 1

class MyClipper extends CustomClipper<Path> {
#override Path getClip(Size size) {
final radius = 32.0;
final r = Offset.zero & size;
final r1 = Rect.fromCircle(center: r.bottomRight - Offset(radius, radius * 2), radius: radius);
final r2 = Rect.fromCircle(center: r.bottomLeft + Offset(radius, 0), radius: radius);
return Path()
..moveTo(r.topLeft.dx, r.topLeft.dy)
..lineTo(r.topRight.dx, r.topRight.dy)
..arcTo(r1, 0, pi / 2, false)
..arcTo(r2, -pi / 2, -pi / 2, false);
}
#override bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}
Answer owner: pskink

Answer 2

You can use that, my design supporting auto resize clip path and working perfectly
import 'package:flutter/material.dart';
import 'package:unfpa/base/base_stateful_state.dart';
import 'package:unfpa/utils/constants.dart';
import 'package:unfpa/utils/custom_clip_path.dart';
import 'package:unfpa/utils/custom_clip_path_two.dart';
class TestWidget extends StatefulWidget {
TestWidget({Key key}) : super(key: key);
#override
_TestWidgetState createState() => _TestWidgetState();
}
class _TestWidgetState extends BaseStatefulState<TestWidget> {
final ScrollController _sliverScrollController = ScrollController();
ValueNotifier<bool> isPinned = ValueNotifier(false);
Size size;
#override
void initState() {
super.initState();
_sliverScrollController.addListener(() {
if (!isPinned.value &&
_sliverScrollController.hasClients &&
_sliverScrollController.offset > kToolbarHeight) {
isPinned.value = true;
} else if (isPinned.value &&
_sliverScrollController.hasClients &&
_sliverScrollController.offset < kToolbarHeight) {
isPinned.value = false;
}
});
}
#override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
controller: _sliverScrollController,
slivers: <Widget>[
ValueListenableBuilder(
valueListenable: isPinned,
builder: (context, value, child) {
return SliverAppBar(
elevation: 0,
backgroundColor: Colors.red,
leading: IconButton(
iconSize: 48,
color: Colors.white,
icon: Icon(Icons.close),
onPressed: () => Navigator.of(context).pop()),
primary: true,
pinned: true,
stretch: true,
title: Visibility(
visible: value,
child: Text(
"Sliver AppBar Title",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 22.0,
color: Colors.white,
),
),
),
titleSpacing: 0,
);
}),
SliverList(
delegate: SliverChildListDelegate([
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
transform: Matrix4.translationValues(0.0, -2.0, 0.0),
alignment: Alignment.center,
child: ClipPath(
clipper: ClipPathClass(),
child: Container(
padding: EdgeInsets.only(bottom:20),
width: size.width,
color: Colors.yellow,
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 25),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: kToolbarTopMargin),
Text(
"Expanded Sliver title",
style: TextStyle(
fontSize: 30.0,
color: Colors.white,
),
),
SizedBox(
height: 5,
),
Text(
"Expanded sliver description",
style: TextStyle(
fontSize: 17,
color: Colors.white,
height: 1.3,
fontWeight: FontWeight.w700,
),
)
],
),
),
),
),
),
],
)
])),
],
));
}
}
CustomClipPathClass
import 'package:flutter/material.dart';
class ClipPathClass extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height - 30);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
var secondPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}