Skip to content

Instantly share code, notes, and snippets.

@tarek360
Last active February 7, 2020 08:46
Show Gist options
  • Save tarek360/4ff471f4b125b24469d1386650163ace to your computer and use it in GitHub Desktop.
Save tarek360/4ff471f4b125b24469d1386650163ace to your computer and use it in GitHub Desktop.
Social rounded buttons with text - github, facebook, twitter, google
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Widget Catalog',
home: Scaffold(
body: SizedBox.expand(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SocialRoundedButtonsWithText(),
Text(
'Part of:\ntarek360.github.io/Flutter-Custom-Widget-Catalog',
textAlign: TextAlign.center,
)
],
),
),
),
);
}
}
class SocialRoundedButtonsWithText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(children: [
SocialButton(
color: SocialColors.facebook,
icon: VectorIcon(VectorIcons.facebook, color: Colors.white),
text: 'Facebook Sign In',
onPressed: () {}),
SocialButton(
color: SocialColors.twitter,
icon: VectorIcon(VectorIcons.twitter, color: Colors.white),
text: 'Twitter Sign In',
onPressed: () {}),
SocialButton(
color: SocialColors.github,
icon: VectorIcon(VectorIcons.github, color: Colors.white),
text: 'Github Sign In',
onPressed: () {}),
SocialButton(
color: SocialColors.google,
icon: VectorIcon(VectorIcons.google, color: Colors.white),
text: 'Google Sign In',
onPressed: () {}),
]);
}
}
class SocialButton extends StatelessWidget {
final Widget icon;
final Color color;
final VoidCallback onPressed;
final String text;
SocialButton(
{@required this.icon,
this.color,
@required this.onPressed,
@required this.text});
@override
Widget build(BuildContext context) {
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
final Color buttonColor = color ?? buttonTheme.colorScheme.primary;
return SizedBox(
width: 200,
child: MaterialButton(
child: Row(
children: [
icon,
SizedBox(width: 8),
Text(text,
style: Theme.of(context).textTheme.button.copyWith(
color: Colors.white,
))
],
),
onPressed: onPressed,
color: buttonColor,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
),
);
}
}
class VectorIcons {
VectorIcons._();
static VectorIconData get facebook => FacebookVectorIcon();
static VectorIconData get twitter => TwitterVectorIcon();
static VectorIconData get github => GithubVectorIcon();
static VectorIconData get google => GoogleVectorIcon();
}
class FacebookVectorIcon extends VectorIconData {
@override
Path get path => Path()
..moveTo(73.233, 32.380)
..lineTo(57.408, 32.380)
..lineTo(57.408, 22.002)
..cubicTo(57.408, 18.104, 59.992, 17.195, 61.811, 17.195)
..lineTo(72.979, 17.195)
..lineTo(72.979, 0.060)
..lineTo(57.599, -0.000)
..cubicTo(40.526, -0.000, 36.640, 12.780, 36.640, 20.958)
..lineTo(36.640, 32.380)
..lineTo(26.767, 32.380)
..lineTo(26.767, 50.037)
..lineTo(36.640, 50.037)
..lineTo(36.640, 100.000)
..lineTo(57.408, 100.000)
..lineTo(57.408, 50.037)
..lineTo(71.422, 50.037)
..lineTo(73.233, 32.380)
..close();
@override
Size get size => Size(100.0, 100.0);
}
class TwitterVectorIcon extends VectorIconData {
@override
Path get path => Path()
..moveTo(100.000, 18.987)
..cubicTo(96.324, 20.621, 92.367, 21.723, 88.216, 22.216)
..cubicTo(92.455, 19.679, 95.705, 15.660, 97.237, 10.865)
..cubicTo(93.273, 13.218, 88.884, 14.925, 84.209, 15.847)
..cubicTo(80.468, 11.860, 75.135, 9.367, 69.235, 9.367)
..cubicTo(57.906, 9.367, 48.720, 18.552, 48.720, 29.883)
..cubicTo(48.720, 31.489, 48.901, 33.054, 49.252, 34.558)
..cubicTo(32.201, 33.702, 17.082, 25.535, 6.963, 13.122)
..cubicTo(5.197, 16.151, 4.186, 19.675, 4.186, 23.438)
..cubicTo(4.186, 30.555, 7.807, 36.836, 13.312, 40.514)
..cubicTo(9.951, 40.407, 6.786, 39.483, 4.019, 37.946)
..cubicTo(4.017, 38.032, 4.017, 38.119, 4.017, 38.206)
..cubicTo(4.017, 48.145, 11.089, 56.435, 20.476, 58.323)
..cubicTo(18.754, 58.790, 16.942, 59.041, 15.070, 59.041)
..cubicTo(13.747, 59.041, 12.462, 58.913, 11.209, 58.672)
..cubicTo(13.822, 66.822, 21.397, 72.755, 30.374, 72.920)
..cubicTo(23.352, 78.423, 14.508, 81.703, 4.894, 81.703)
..cubicTo(3.240, 81.703, 1.606, 81.606, -0.000, 81.415)
..cubicTo(9.082, 87.239, 19.865, 90.633, 31.450, 90.633)
..cubicTo(69.188, 90.633, 89.822, 59.372, 89.822, 32.261)
..cubicTo(89.822, 31.371, 89.804, 30.484, 89.765, 29.603)
..cubicTo(93.772, 26.717, 97.251, 23.102, 100.000, 18.987)
..close();
@override
Size get size => Size(100.0, 100.0);
}
class GoogleVectorIcon extends VectorIconData {
@override
Path get path => Path()
..moveTo(50.988, 42.844)
..cubicTo(50.964, 48.525, 50.988, 54.207, 51.012, 59.888)
..cubicTo(60.537, 60.199, 70.085, 60.055, 79.610, 60.199)
..cubicTo(75.409, 81.325, 46.667, 88.176, 31.461, 74.379)
..cubicTo(15.824, 62.276, 16.564, 35.730, 32.821, 24.487)
..cubicTo(44.184, 15.415, 60.346, 17.659, 71.708, 25.513)
..cubicTo(76.173, 21.383, 80.350, 16.967, 84.384, 12.384)
..cubicTo(74.931, 4.840, 63.329, -0.531, 50.988, 0.042)
..cubicTo(25.230, -0.818, 1.549, 21.741, 1.120, 47.499)
..cubicTo(-0.528, 68.554, 13.318, 89.203, 32.869, 96.651)
..cubicTo(52.348, 104.147, 77.318, 99.038, 89.756, 81.540)
..cubicTo(97.968, 70.487, 99.734, 56.260, 98.779, 42.892)
..cubicTo(82.833, 42.772, 66.910, 42.796, 50.988, 42.844)
..close();
@override
Size get size => Size(100.0, 100.0);
}
class GithubVectorIcon extends VectorIconData {
@override
Path get path => Path()
..moveTo(67.278, 57.117)
..cubicTo(63.376, 57.117, 60.211, 61.493, 60.211, 66.896)
..cubicTo(60.211, 72.299, 63.376, 76.677, 67.278, 76.677)
..cubicTo(71.178, 76.677, 74.341, 72.299, 74.341, 66.896)
..cubicTo(74.342, 61.493, 71.178, 57.117, 67.278, 57.117)
..close()
..moveTo(91.877, 31.665)
..cubicTo(92.682, 29.680, 92.722, 18.403, 88.432, 7.609)
..cubicTo(88.432, 7.609, 78.587, 8.688, 63.692, 18.909)
..cubicTo(60.571, 18.047, 55.284, 17.615, 50.000, 17.615)
..cubicTo(44.716, 17.615, 39.432, 18.046, 36.307, 18.908)
..cubicTo(21.412, 8.688, 11.571, 7.609, 11.571, 7.609)
..cubicTo(7.279, 18.403, 7.317, 29.680, 8.123, 31.665)
..cubicTo(3.080, 37.140, 0.000, 43.715, 0.000, 52.699)
..cubicTo(0.000, 91.755, 32.401, 92.382, 40.580, 92.382)
..cubicTo(42.432, 92.382, 46.111, 92.386, 50.000, 92.391)
..cubicTo(53.889, 92.386, 57.571, 92.382, 59.420, 92.382)
..cubicTo(67.599, 92.382, 100.000, 91.755, 100.000, 52.699)
..cubicTo(100.000, 43.715, 96.920, 37.140, 91.877, 31.665)
..close()
..moveTo(50.153, 87.580)
..lineTo(49.848, 87.580)
..cubicTo(29.349, 87.580, 13.386, 85.133, 13.386, 65.211)
..cubicTo(13.386, 60.440, 15.070, 56.010, 19.070, 52.334)
..cubicTo(25.745, 46.208, 37.034, 49.452, 49.848, 49.452)
..lineTo(50.154, 49.452)
..cubicTo(62.968, 49.452, 74.261, 46.209, 80.933, 52.334)
..cubicTo(84.933, 56.010, 86.616, 60.440, 86.616, 65.211)
..cubicTo(86.615, 85.133, 70.652, 87.580, 50.153, 87.580)
..close()
..moveTo(32.722, 57.117)
..cubicTo(28.822, 57.117, 25.659, 61.493, 25.659, 66.896)
..cubicTo(25.659, 72.299, 28.822, 76.677, 32.722, 76.677)
..cubicTo(36.626, 76.677, 39.789, 72.299, 39.789, 66.896)
..cubicTo(39.788, 61.493, 36.625, 57.117, 32.722, 57.117)
..close();
@override
Size get size => Size(100.0, 100.0);
}
class VectorIcon extends StatelessWidget {
final VectorIconData data;
final Color color;
final double size;
VectorIcon(this.data, {this.color, this.size});
@override
Widget build(BuildContext context) {
final IconThemeData iconTheme = IconTheme.of(context);
final double iconSize = size ?? iconTheme.size;
final double iconOpacity = iconTheme.opacity;
Color iconColor = color ?? iconTheme.color;
if (iconOpacity != 1.0)
iconColor = iconColor.withOpacity(iconColor.opacity * iconOpacity);
return CustomPaint(
size: Size(iconSize, iconSize),
painter: _VectorIconPainter(data, iconColor),
);
}
}
class _VectorIconPainter extends CustomPainter {
_VectorIconPainter(this.iconData, this.fillColor);
final VectorIconData iconData;
final Color fillColor;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = fillColor;
canvas.scale(
size.width / iconData.size.width, size.height / iconData.size.height);
canvas.drawPath(iconData.path, paint);
}
@override
bool shouldRepaint(_VectorIconPainter old) => old.iconData != iconData;
}
abstract class VectorIconData {
Path get path;
Size get size;
}
class SocialColors {
SocialColors._();
static const github = const Color(0xFF272727);
static const google = const Color(0xFFEA4335);
static const facebook = const Color(0xFF3B5998);
static const twitter = const Color(0xFF1DA1F2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment