Skip to content

Instantly share code, notes, and snippets.

@stegrams
Last active April 25, 2020 21:15
Show Gist options
  • Select an option

  • Save stegrams/44fd77de9c38ab20c886ef04d55f5bc8 to your computer and use it in GitHub Desktop.

Select an option

Save stegrams/44fd77de9c38ab20c886ef04d55f5bc8 to your computer and use it in GitHub Desktop.
AppBar wave shaped by quadratic bezier. DartPad: https://dartpad.dev/44fd77de9c38ab20c886ef04d55f5bc8
// Credits to Matt Sullivan (@mjohnsullivan) for this status:
// https://twitter.com/mjohnsullivan/status/1200142882864324609
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
shape: Wave(
heightOffset: 50,
curvity: 80,
),
title: Text('Curved AppBar'),
),
body: Center(
child: Text('Hello, World!',
style: Theme.of(context).textTheme.headline3),
),
),
);
}
}
class Wave extends ContinuousRectangleBorder {
const Wave({this.heightOffset = 20, this.curvity = 50});
/// An offset in pixels to the standard AppBar height
final double heightOffset;
/// Curvity persent. 0% means straight line.
final double curvity;
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
double height = rect.size.height;
double width = rect.size.width;
return Path()
..lineTo(0, height + heightOffset)
..quadraticBezierTo(
width / 4,
height * (1 + curvity / 100) + heightOffset,
width / 2,
height + heightOffset,
)
..quadraticBezierTo(
width * 3 / 4,
height * (1 - curvity / 100) + heightOffset,
width,
height + heightOffset,
)
..lineTo(width, 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment