Skip to content

Instantly share code, notes, and snippets.

@vijayinyoutube

vijayinyoutube/DashBoard-3.dart

Last active April 15, 2020 13:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vijayinyoutube/f87ed8cc3924c03dfdb703b6b6dc90dd to your computer and use it in GitHub Desktop.
Save vijayinyoutube/f87ed8cc3924c03dfdb703b6b6dc90dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DashBoard-3.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyPage(),
);
}
}
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
var deviceWidth = MediaQuery.of(context).size.width;
return Scaffold(
body: SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipPath(
clipper: MyClipper(),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
height: 300,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFF3383CD),
Color(0xFF11249F),
],
),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"DashBoard",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
Icon(
Icons.menu,
color: Colors.white,
),
],
),
),
Flexible(
child: Align(
alignment: Alignment.topLeft,
child: Image(
image: AssetImage('assets/bird.png'),
),
),
),
],
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(
"Get Stronger",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
SizedBox(height: 25),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height / 5,
color: Colors.transparent,
padding: EdgeInsets.symmetric(horizontal: 10),
child: SingleChildScrollView(
child: Wrap(
children: <Widget>[
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xF25FFFFF),
Color(0xFF2508FF),
Color(0xFF2508FF),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
//width: deviceWidth/2.5,
//height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.accessibility_new,
size: 40,
color: Colors.white,
),
title: Text(
"Jumping Jacks",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
SizedBox(width: 15),
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xFFFFAB00),
Color(0xFFFF1744),
Color(0xFFFF1744),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
width: deviceWidth / 2.5,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.airline_seat_legroom_normal,
size: 40,
color: Colors.white,
),
title: Text(
"Sit Ups ",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
SizedBox(height: 80),
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xFFFF9800),
Color(0xFF9C2700),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
width: 150,
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.directions_bike,
size: 40,
color: Colors.white,
),
title: Text(
"Cycling",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
SizedBox(width: 15),
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xFF76FF03),
Color(0xFF9C27B0),
Color(0xFF4A148C),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
width: 150,
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.pool,
size: 40,
color: Colors.white,
),
title: Text(
"Swim ",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
SizedBox(height: 80),
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xFFEC407A),
Color(0xFFFFC107),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
width: 150,
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.message,
size: 40,
color: Colors.white,
),
title: Text(
"Message Card",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
SizedBox(width: 15),
Container(
width: (deviceWidth - 35) / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8,
0.0), // 10% of the width, so there are ten blinds.
colors: [
Color(0xFFEC407A),
Color(0xFFFFC107),
], // whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
child: new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
color: Colors.transparent,
child: Container(
width: 150,
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.message,
size: 40,
color: Colors.white,
),
title: Text(
"Message Card",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
),
],
),
),
),
//Text("Hai"),
//SfRadialGauge(),
new Divider(
color: Colors.red,
height: 25,
),
],
),
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 80);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 80);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment