FLUTTER - Simple UI Screen Series Page from ESPN cricinfo Cricket App:
Source Code:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'UI of ESPN cricinfo series page',
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
//ONLY UI Design
//I have created list
class Series {
Series({this.image, this.seriesname});
Widget image;
String seriesname;
}
List<Series> _series = <Series>[
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: "Womens's T20 World Cup",
),
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: 'Austrlia v India',
),
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: 'Pakistan v New Zealand',
),
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: 'Sri Landa v England',
),
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: 'Bangladesh v West Indies',
),
Series(
image: Icon(
Icons.brightness_1,
size: 40.0,
color: Colors.red,
),
seriesname: 'New Zealand A v India A',
),
];
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
Row(
children: <Widget>[
Text(
'ESPN',
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontStyle: FontStyle.italic),
),
Text(
' cricinfo',
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
//fontStyle: FontStyle.italic
fontWeight: FontWeight.bold),
),
SizedBox(width: 130.0)
],
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.search,
size: 25.0,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.settings,
size: 25.0,
),
),
],
),
backgroundColor: Colors.grey[300],
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 10.0),
Container(
height: 180.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'FAORITES',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[900],
fontWeight: FontWeight.bold),
),
InkWell(
child: Text(
'Edit',
style: TextStyle(
color: Colors.blue, fontSize: 15.0),
),
)
],
),
),
SizedBox(height: 15.0),
Container(
height: 5.0,
color: Colors.blue,
),
SizedBox(height: 10.0),
Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blue,
child: Image.asset(
'assets/images/ind.jpg',
height: 30.0,
width: 25.0),
),
SizedBox(height: 5.0),
Text(
'INDIA',
style: TextStyle(
color: Colors.grey, fontSize: 15.0),
)
],
),
),
],
),
Container(
height: 80.0,
padding: EdgeInsets.all(5.0),
child: Center(
child: RotatedBox(
quarterTurns: 1,
child: Divider(
color: Colors.grey,
),
),
),
),
Column(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.grey[200],
child: Icon(
Icons.add,
color: Colors.grey,
),
),
SizedBox(height: 5.0),
Text(
'Add',
style: TextStyle(
color: Colors.grey, fontSize: 15.0),
)
],
)
],
)
],
),
)
],
),
SizedBox(height: 10.0,),
Column(
children: <Widget>[
Container(
height: 330.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(15.0, 15.0, 0.0, 0.0),
child: Text('ALL SERIES',
style: TextStyle(
color: Colors.grey[900],
fontSize: 18.0,
fontWeight: FontWeight.bold
),),
),
],
),
Container(
height: 20.0,
padding: EdgeInsets.all(20.0),
child: Center(
child: RotatedBox(
quarterTurns: 0,
child: Divider(
color: Colors.grey
),
),
),
),
Column(
children: <Widget>[
ListView.builder(
itemExtent: 40.0,
shrinkWrap: true,
itemCount: _series.length,
itemBuilder: (BuildContext context, int index) {
final series = _series[index];
return ListTile(
leading: series.image,
title: Text(series.seriesname),
);
},
)
],
)
],
),
)
],
)
],
)
],
),
bottomNavigationBar: BottomNavigationBar(
//type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text('Home',
style: TextStyle(
color: Colors.grey
),),
icon: Icon(Icons.home,
color: Colors.grey,)
),
BottomNavigationBarItem(
title: Text('Scores',
style: TextStyle(
color: Colors.grey
),),
icon: Icon(Icons.score,
color: Colors.grey,)
),
//icons wil be different
BottomNavigationBarItem(
title: Text('Series',
style: TextStyle(
color: Colors.grey
),),
icon: Icon(Icons.screen_rotation,
color: Colors.grey,)
),
],
),
);
}
}
No comments:
Post a Comment