FLUTTER - Simple UI Screen of Favorites Teams and Series from ESPN
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ESPN teams & trophy favourites screen',
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
centerTitle: true,
backgroundColor: Colors.blue,
title: Text(
'Any more favourites?',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.search,
size: 25.0,
color: Colors.white,
),
)
],
),
backgroundColor: Colors.blue,
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 5.0),
child: Column(
children: <Widget>[
Container(
height: 550.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
1,
),
color: Colors.white),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
EdgeInsets.fromLTRB(20.0, 15.0, 0.0, 0.0),
child: Row(
children: <Widget>[
Text(
'Suggested',
style: TextStyle(
color: Colors.blue,
fontSize: 15.0,
fontWeight: FontWeight.bold),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 120.0),
child: Column(
children: <Widget>[
Container(
width: 200.0,
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 1.0),
itemCount: 9,
itemBuilder: (BuildContext context,
int index) {
return Card(
elevation: 0.0,
child: Container(
height: 90.0,
width: 90.0,
child: Material(
shape: OutlineInputBorder(
borderRadius:
BorderRadius
.circular(10),
borderSide: BorderSide(
color:
Colors.grey)),
child: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Container(
height: 30.0,
width: 40.0,
child: Image.asset(
//Download image from yourside
'assets/images/ind.jpg',
fit: BoxFit.fill,
),
),
SizedBox(height: 5.0),
Text(
'India',
style: TextStyle(
color: Colors
.grey[500],
fontSize: 15.0,
fontWeight:
FontWeight
.bold),
)
],
),
),
),
),
);
}))
],
),
)
],
)
],
),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 20.0, 20.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
child: Text(
'Finish',
style: TextStyle(color: Colors.white),
),
onTap: () {
debugPrint('Tapped Finish');
},
)
],
),
)
],
),
Row(
children: <Widget>[
Column(
children: <Widget>[
SizedBox(
height: 60.0,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Text('ICC World Cup'),
onTap: () {
debugPrint('WC');
},
),
),
),
),
Container(
height: 2.0,
width: 150.0,
color: Colors.white,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Text('IPL'),
onTap: () {
debugPrint('IPL');
},
),
),
),
),
Container(
height: 2.0,
width: 150.0,
color: Colors.white,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Text('Ranji Trophy'),
onTap: () {
debugPrint('RT');
},
),
),
),
),
Container(
height: 2.0,
width: 150.0,
color: Colors.white,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Syed Mushtaq'),
Text('Ali Trophy')
],
),
onTap: () {
debugPrint('SM');
},
),
),
),
),
Container(
height: 2.0,
width: 150.0,
color: Colors.white,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Text('Duleep Trophy'),
onTap: () {
debugPrint('DT');
},
),
),
),
),
Container(
height: 2.0,
width: 150.0,
color: Colors.white,
),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(color: Colors.grey[400])),
child: Container(
height: 80.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.grey[300]
),
child: Center(
child: GestureDetector(
child: Text(''),
onTap: () {
debugPrint('emtpy');
},
),
),
),
),
],
)
],
)
],
),
);
}
}
No comments:
Post a Comment