Skip to content

Instantly share code, notes, and snippets.

@slightfoot
Created May 1, 2018 19:27
Show Gist options
  • Save slightfoot/7fdcf4311614c899ff9f519e36505531 to your computer and use it in GitHub Desktop.
Save slightfoot/7fdcf4311614c899ff9f519e36505531 to your computer and use it in GitHub Desktop.
Semi Rounded Button in Flutter.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:meta/meta.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData.dark(),
home: new Material(
color: const Color(0xff679790),
child: new Center(
child: new SizedBox(
width: 200.0,
height: 70.0,
child: new SemiRoundedBorderButton(
borderSide: const BorderSide(color: const Color(0xffDDE9E8), width: 2.0),
radius: const Radius.circular(8.0),
background: const Color(0xFF83ADA8),
child: new Center(child: new Text('Testing')),
),
),
),
),
);
}
}
class SemiRoundedBorderButton extends StatelessWidget {
final BorderSide borderSide;
final Radius radius;
final Color background;
final Widget child;
const SemiRoundedBorderButton({
Key key,
@required this.borderSide,
@required this.radius,
@required this.background,
@required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return new ClipRect(
clipper: new SemiRoundedBorderClipper(borderSide.width + 1.0),
child: new DecoratedBox(
decoration: new ShapeDecoration(
color: background,
shape: new RoundedRectangleBorder(
side: borderSide,
borderRadius: new BorderRadius.only(
topLeft: radius,
topRight: radius,
),
),
),
child: child,
),
);
}
}
class SemiRoundedBorderClipper extends CustomClipper<Rect> {
final double borderStrokeWidth;
const SemiRoundedBorderClipper(this.borderStrokeWidth);
@override
Rect getClip(Size size) {
return new Rect.fromLTRB(0.0, 0.0, size.width, size.height - borderStrokeWidth);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
if (oldClipper.runtimeType != SemiRoundedBorderClipper) return true;
return (oldClipper as SemiRoundedBorderClipper).borderStrokeWidth != borderStrokeWidth;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment