|
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file |
|
// for details. All rights reserved. Use of this source code is governed by a |
|
// BSD-style license that can be found in the LICENSE file. |
|
|
|
import 'package:flutter/material.dart'; |
|
|
|
void main() => runApp(MyApp()); |
|
|
|
class MyApp extends StatelessWidget { |
|
@override |
|
Widget build(BuildContext context) { |
|
return MaterialApp( |
|
title: 'Flutter Demo', |
|
debugShowCheckedModeBanner: false, |
|
theme: ThemeData( |
|
primarySwatch: Colors.blue, |
|
), |
|
home: const MyHomePage(), |
|
); |
|
} |
|
} |
|
|
|
class MyHomePage extends StatelessWidget { |
|
const MyHomePage({Key? key}) : super(key: key); |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
return Scaffold( |
|
appBar: AppBar( |
|
title: const Text('CustomPainter'), |
|
), |
|
body: SingleChildScrollView( |
|
padding: const EdgeInsets.all(20), |
|
child: Column( |
|
children: [ |
|
Stack( |
|
children: [ |
|
Padding( |
|
padding: const EdgeInsets.only(top: 45), |
|
child: SizedBox( |
|
width: double.infinity, |
|
child: CustomPaint( |
|
size: const Size(double.infinity, 64), |
|
painter: ClipperNavbar(), |
|
), |
|
), |
|
), |
|
Align( |
|
alignment: Alignment.topCenter, |
|
child: Center( |
|
child: FloatingActionButton( |
|
onPressed: () {}, |
|
child: const Icon(Icons.home), |
|
), |
|
), |
|
), |
|
], |
|
), |
|
], |
|
), |
|
), |
|
); |
|
} |
|
} |
|
|
|
class ClipperNavbar extends CustomPainter { |
|
@override |
|
void paint(Canvas canvas, Size size) { |
|
Paint paint = Paint() |
|
..color = Colors.redAccent |
|
..style = PaintingStyle.fill; |
|
|
|
final double sw = size.width; |
|
final double sh = size.height; |
|
|
|
const double radius = 20; |
|
const double cradius = 45; // center radius width |
|
const double ipy = cradius / 3; |
|
|
|
Path path = Path() |
|
..moveTo(0, radius) |
|
..quadraticBezierTo(0, 0, radius, 0) // radius left |
|
..lineTo(sw / 2 - cradius, 0) |
|
..quadraticBezierTo( |
|
sw / 2 - cradius * 0.75, ipy / 3, sw / 2 - cradius * 0.5, ipy) |
|
..arcToPoint( |
|
Offset(sw / 2 + cradius * 0.5, ipy), |
|
radius: const Radius.circular(cradius), |
|
clockwise: false, |
|
) |
|
..quadraticBezierTo( |
|
sw / 2 + cradius * 0.75, ipy / 3, (sw / 2) + cradius, 0) |
|
..lineTo(sw - radius, 0) |
|
..quadraticBezierTo(sw, 0, sw, radius) // radius right |
|
..lineTo(sw, sh) |
|
..lineTo(0, sh) |
|
..close(); |
|
|
|
canvas.drawPath(path, paint); |
|
} |
|
|
|
@override |
|
bool shouldRepaint(CustomPainter oldDelegate) { |
|
return false; |
|
} |
|
} |