Skip to content

Instantly share code, notes, and snippets.

@mjohnsullivan
Created November 28, 2019 19:59
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save mjohnsullivan/88aff7ae0ab228450e4acab7a910324e to your computer and use it in GitHub Desktop.
Save mjohnsullivan/88aff7ae0ab228450e4acab7a910324e to your computer and use it in GitHub Desktop.
A curved Flutter AppBar where widgets scroll nicely beneath the curved portion
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(home: MyHomePage()),
);
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
const curveHeight = 50.0;
return Scaffold(
appBar: AppBar(
shape: const MyShapeBorder(curveHeight),
),
body: ListView(
padding: const EdgeInsets.only(top: curveHeight),
children: List.generate(
100,
(i) => Text('This is item $i in this list'),
),
),
);
}
}
class MyShapeBorder extends ContinuousRectangleBorder {
const MyShapeBorder(this.curveHeight);
final double curveHeight;
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) => Path()
..lineTo(0, rect.size.height)
..quadraticBezierTo(
rect.size.width / 2,
rect.size.height + curveHeight * 2,
rect.size.width,
rect.size.height,
)
..lineTo(rect.size.width, 0)
..close();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment