Created
January 2, 2019 17:05
-
-
Save ajaybeniwal/1c32a5ee7cb8460a367a458429a265b8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'create_connection.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter App', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
initialRoute: '/', | |
routes: { | |
'/': (context) => MyHomePage(), | |
'/create': (context) => CrateConnection(), | |
}, | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
MyHomePage({Key key, this.title}) : super(key: key); | |
final String title; | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
int getColorHexFromStr(String colorStr) { | |
colorStr = "FF" + colorStr; | |
colorStr = colorStr.replaceAll("#", ""); | |
int val = 0; | |
int len = colorStr.length; | |
for (int i = 0; i < len; i++) { | |
int hexDigit = colorStr.codeUnitAt(i); | |
if (hexDigit >= 48 && hexDigit <= 57) { | |
val += (hexDigit - 48) * (1 << (4 * (len - 1 - i))); | |
} else if (hexDigit >= 65 && hexDigit <= 70) { | |
// A..F | |
val += (hexDigit - 55) * (1 << (4 * (len - 1 - i))); | |
} else if (hexDigit >= 97 && hexDigit <= 102) { | |
// a..f | |
val += (hexDigit - 87) * (1 << (4 * (len - 1 - i))); | |
} else { | |
throw new FormatException("An error occurred when converting a color"); | |
} | |
} | |
return val; | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
bottomNavigationBar: BottomAppBar( | |
shape: CircularNotchedRectangle(), | |
notchMargin: 4.0, | |
child: new Row( | |
mainAxisSize: MainAxisSize.max, | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: <Widget>[ | |
IconButton(icon: Icon(Icons.home), color: Colors.blue, onPressed: () {},), | |
IconButton(icon: Icon(Icons.person), onPressed: () {},color: Colors.blue), | |
], | |
), | |
), | |
floatingActionButton: FloatingActionButton( | |
onPressed: () { | |
Navigator.push( | |
context, | |
MaterialPageRoute( | |
builder: (BuildContext context) => CrateConnection(), | |
)); | |
}, | |
tooltip: 'Add Connection', | |
child: Icon(Icons.add), | |
), | |
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, | |
// floatingActionButton: FancyFab(), | |
appBar: PreferredSize( | |
child: AppBar( | |
backgroundColor: Color(getColorHexFromStr('#FDD148')), | |
elevation: 0.0, | |
), | |
preferredSize: Size.fromHeight(0.0)), | |
body: ListView( | |
children: <Widget>[ | |
Column(children: <Widget>[ | |
Stack(children: <Widget>[ | |
Container( | |
height: 180.0, | |
color: Color(getColorHexFromStr('#FDD148')), | |
), | |
Column(crossAxisAlignment: CrossAxisAlignment.start, children: < | |
Widget>[ | |
SizedBox(height: 15.0), | |
Padding( | |
padding: EdgeInsets.only(left: 15.0), | |
child: Text( | |
'Hello, Ajay', | |
style: TextStyle( | |
fontSize: 30.0, fontWeight: FontWeight.bold), | |
), | |
), | |
SizedBox(height: 15.0), | |
Padding( | |
padding: const EdgeInsets.only(left: 15.0), | |
child: Text( | |
'Provider you would like to connect?', | |
style: TextStyle( | |
fontSize: 23.0, fontWeight: FontWeight.bold), | |
), | |
), | |
SizedBox(height: 25.0), | |
Padding( | |
padding: EdgeInsets.only(left: 15.0, right: 15.0), | |
child: Material( | |
elevation: 5.0, | |
borderRadius: BorderRadius.circular(8.0), | |
child: Container( | |
height: 75.0, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(8.0), | |
color: Colors.white), | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.spaceEvenly, | |
children: <Widget>[ | |
Container( | |
height: 75.0, | |
width: MediaQuery.of(context).size.width / 4, | |
child: Column( | |
children: <Widget>[ | |
Container( | |
height: 50.0, | |
width: 50.0, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
image: AssetImage( | |
'assets/google.png'))), | |
), | |
Text( | |
'Google', | |
) | |
], | |
), | |
), | |
Container( | |
height: 75.0, | |
width: MediaQuery.of(context).size.width / 4, | |
child: Column( | |
children: <Widget>[ | |
Container( | |
height: 50.0, | |
width: 50.0, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
image: AssetImage( | |
'assets/windows.png'))), | |
), | |
Text( | |
'Microsoft', | |
) | |
], | |
), | |
), | |
Container( | |
height: 75.0, | |
width: MediaQuery.of(context).size.width / 3, | |
child: Column( | |
children: <Widget>[ | |
Container( | |
height: 50.0, | |
width: 50.0, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
image: AssetImage( | |
'assets/amazon.png'))), | |
), | |
Text( | |
'Amazon', | |
) | |
], | |
), | |
), | |
])), | |
), | |
), | |
]), | |
]), | |
]), | |
SizedBox( | |
height: 20, | |
), | |
Padding( | |
padding: const EdgeInsets.only(left: 16.0, right: 16.0), | |
child: Container( | |
child: Text("All Connections", | |
style: TextStyle( | |
fontSize: 23.0, | |
fontWeight: FontWeight.bold, | |
color: Colors.black87))), | |
), | |
Padding( | |
padding: | |
const EdgeInsets.symmetric(horizontal: 0, vertical: 12.0), | |
child: Container( | |
height: 100, | |
child: ListView( | |
scrollDirection: Axis.horizontal, | |
children: <Widget>[ | |
numberCard("13", "Connected"), | |
numberCard("5", "Queued"), | |
numberCard("7", "Deleted"), | |
numberCard("14", "Pending"), | |
], | |
), | |
), | |
), | |
SizedBox( | |
height: 10, | |
), | |
Padding( | |
padding: const EdgeInsets.only(left: 16.0, right: 16.0), | |
child: Container( | |
child: Text("Recent Connections", | |
style: TextStyle( | |
fontSize: 23.0, | |
fontWeight: FontWeight.bold, | |
color: Colors.black87))), | |
), | |
SizedBox( | |
height: 20, | |
), | |
itemCard('Google Cloud', 'assets/slack.png', "Pending Approval"), | |
itemCard( | |
'AWS Direct Connect', 'assets/windows.png', "Pending Approval"), | |
Padding( | |
padding: const EdgeInsets.only(top: 16.0, bottom: 16.0, left:16.0, right: 16.0), | |
child: Text("Frequently Connected To", | |
style: TextStyle(fontSize: 23.0, fontWeight: FontWeight.bold)), | |
), | |
Padding( | |
padding: const EdgeInsets.only(bottom: 16.0), | |
child: Container( | |
height: 185, | |
child: ListView( | |
scrollDirection: Axis.horizontal, | |
padding: EdgeInsets.symmetric(horizontal: 8.0), | |
children: <Widget>[ | |
frequentCard("assets/amazon.png", "Amzon Web Services"), | |
frequentCard("assets/google.png", "Google Cloud"), | |
frequentCard("assets/windows.png", "Microsoft Azure") | |
], | |
), | |
), | |
) | |
], | |
)); | |
} | |
Widget frequentCard(String asset, String title) { | |
return Container( | |
height: 185, | |
width: 200, | |
margin: EdgeInsets.symmetric(horizontal: 8.0), | |
decoration: BoxDecoration( | |
border: Border.all(color: Color(getColorHexFromStr('#e4e4e4'))), | |
borderRadius: BorderRadius.circular(8.0)), | |
child: Column(children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.symmetric(vertical: 8.0), | |
child: Image.asset( | |
asset, | |
height: 40.0, | |
), | |
), | |
Text(title, | |
style: | |
TextStyle(color: Colors.black87, fontWeight: FontWeight.bold)), | |
SizedBox( | |
height: 10, | |
), | |
Container( | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Column(children: <Widget>[ | |
Text("2", | |
style: TextStyle( | |
color: Colors.black87, fontWeight: FontWeight.bold)), | |
Text("Services", | |
style: TextStyle( | |
color: Colors.black38, fontWeight: FontWeight.w400)), | |
]), | |
), | |
Container( | |
height: 30.0, | |
width: 1.0, | |
color: Color(getColorHexFromStr('#e4e4e4'))), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Column( | |
children: <Widget>[ | |
Text("2", | |
style: TextStyle( | |
color: Colors.black87, | |
fontWeight: FontWeight.bold)), | |
Text("Locations", | |
style: TextStyle( | |
color: Colors.black38, | |
fontWeight: FontWeight.w400)), | |
], | |
), | |
) | |
], | |
), | |
), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Container( | |
height: 30, | |
decoration: BoxDecoration( | |
border: Border.all(color: Color(getColorHexFromStr('#009aff'))), | |
borderRadius: BorderRadius.circular(16.0)), | |
child: Center( | |
child: Text("Connect", | |
style: | |
TextStyle(color: Color(getColorHexFromStr('#009aff')))), | |
), | |
), | |
) | |
]), | |
); | |
} | |
Widget numberCard(String number, String title) { | |
return Container( | |
width: 120, | |
child: Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Material( | |
elevation: 2.0, | |
borderRadius: BorderRadius.circular(4.0), | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: <Widget>[ | |
Container( | |
child: Text(number, | |
overflow: TextOverflow.ellipsis, | |
style: TextStyle( | |
fontSize: 18.0, | |
fontWeight: FontWeight.bold, | |
color: Colors.black38))), | |
Container( | |
margin: const EdgeInsets.only(top: 10), | |
child: Text( | |
title, | |
overflow: TextOverflow.clip, | |
maxLines: 1, | |
)), | |
], | |
)), | |
)); | |
} | |
Widget itemCard(String title, String imgPath, String description) { | |
return Padding( | |
padding: EdgeInsets.only( | |
left: 15.0, | |
right: 15.0, | |
), | |
child: Card( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Row(children: <Widget>[ | |
Expanded( | |
child: Padding( | |
padding: const EdgeInsets.only(left: 8.0), | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Container( | |
padding: const EdgeInsets.only(top: 8.0, bottom: 4.0), | |
child: Text( | |
title, | |
style: TextStyle( | |
fontWeight: FontWeight.bold, fontSize: 18.0), | |
), | |
), | |
Text( | |
description, | |
style: TextStyle( | |
color: Colors.grey[500], | |
), | |
), | |
], | |
), | |
), | |
) | |
]), | |
), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Row(children: <Widget>[ | |
Container( | |
child: Row(children: <Widget>[ | |
Image.asset("assets/server.png"), | |
Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
Text("California"), | |
Text("Origin"), | |
], | |
) | |
]), | |
), | |
Expanded( | |
child: Padding( | |
padding: const EdgeInsets.symmetric(horizontal: 8.0), | |
child: Column( | |
children: <Widget>[ | |
Container( | |
height: 6.0, | |
color: Colors.blue, | |
) | |
], | |
), | |
), | |
), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.end, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.only(right: 8.0), | |
child: Container( | |
child: Row(children: <Widget>[ | |
Image.asset("assets/cloud.png"), | |
Padding( | |
padding: const EdgeInsets.only(left: 8.0), | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
Text("Google Direct"), | |
Text("Destination"), | |
], | |
), | |
) | |
]), | |
), | |
), | |
], | |
) | |
]), | |
), | |
ButtonTheme.bar( | |
// make buttons use the appropriate styles for cards | |
child: ButtonBar( | |
children: <Widget>[ | |
FlatButton( | |
child: const Text('ACCEPT'), | |
onPressed: () {/* ... */}, | |
), | |
FlatButton( | |
child: const Text('DELETE'), | |
onPressed: () {/* ... */}, | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment