Added IBM Plex sans as custom font, added more properties to the gradient button

This commit is contained in:
Mariano Uvalle 2019-03-08 21:37:56 -06:00
parent 85f49f1133
commit 8918c67006
3 changed files with 29 additions and 3 deletions

View file

@ -9,6 +9,7 @@ class App extends StatelessWidget {
home: LoginScreen(), home: LoginScreen(),
theme: ThemeData( theme: ThemeData(
canvasColor: Color.fromRGBO(23, 25, 29, 1.0), canvasColor: Color.fromRGBO(23, 25, 29, 1.0),
fontFamily: 'IBM Plex Sans',
), ),
); );
} }

View file

@ -14,11 +14,20 @@ class LoginScreen extends StatelessWidget {
child: Center( child: Center(
child: Logo(), child: Logo(),
), ),
flex: 4, flex: 3,
), ),
Expanded( Expanded(
child: Center( child: Center(
child: GradientButton(), child: GradientButton(
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
),
), ),
flex: 1, flex: 1,
), ),

View file

@ -1,17 +1,33 @@
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class GradientButton extends StatelessWidget { class GradientButton extends StatelessWidget {
final double radius;
final Widget child;
final double height;
final double width;
GradientButton({
this.radius = 4,
@required this.child,
this.height,
this.width,
});
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ConstrainedBox( return ConstrainedBox(
constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0), constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0),
child: Container( child: Container(
width: width,
height: height,
padding: EdgeInsets.all(5), padding: EdgeInsets.all(5),
child: Center( child: Center(
widthFactor: 1.0, widthFactor: 1.0,
heightFactor: 1.0, heightFactor: 1.0,
child: Text('My custom Button'), child: child,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radius),
gradient: LinearGradient( gradient: LinearGradient(
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,