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();
}
A curved Flutter AppBar where widgets scroll nicely beneath the curved portion
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.