Fantasy App Responsive UI:
main.dart
import 'package:flutter/material.dart';
import 'home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
home.dartimport 'package:fantacy_app/Cricket.dart';
import 'package:fantacy_app/Football.dart';
import 'package:fantacy_app/Notifi.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
var width;
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text("Fantasy App"),
backgroundColor: Colors.pink,
actions: <Widget>[
IconButton(
icon: Icon(Icons.account_balance_wallet),
onPressed: () {
return showGeneralDialog(
context: context,
barrierDismissible: true,
transitionDuration: Duration(milliseconds: 500),
barrierLabel: MaterialLocalizations.of(context).dialogLabel,
barrierColor: Colors.black.withOpacity(0.5),
pageBuilder: (context, _, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Card(
child: ListView(
shrinkWrap: true,
children: <Widget>[
SizedBox(
height: 15,
),
Container(
margin: EdgeInsets.only(
left: 20,
right: 20,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('TOTAL CASH BALANCE'),
RaisedButton.icon(
color: Colors.lightGreen,
onPressed: () {},
icon: Icon(
Icons.add_circle,
color: Colors.white,
),
label: Text(
"Add Cash",
style: TextStyle(color: Colors.white),
),
),
],
),
),
// SizedBox(
// height: 5,
// ),
Container(
margin: EdgeInsets.only(left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
Icons.monetization_on,
color: Colors.green,
),
SizedBox(
width: 5,
),
Text(
"500.10",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(
height: 15,
),
Divider(
height: 5,
color: Colors.black,
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text("Winning Cash!"),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Icons.monetization_on,
color: Colors.green,
),
SizedBox(
width: 3,
),
Text("100"),
],
),
],
),
Column(
children: [
Text("Bonus Cash"),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Icons.monetization_on,
color: Colors.green,
),
SizedBox(
width: 3,
),
Text("50"),
],
),
],
),
Column(
children: [
Text("Deposit Cash"),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Icons.monetization_on,
color: Colors.green,
),
SizedBox(
width: 3,
),
Text("30"),
],
),
],
),
],
),
SizedBox(
height: 15,
),
// Divider(
// height: 5,
// color: Colors.black,
// ),
// SizedBox(
// height: 10,
// ),
Container(
margin: EdgeInsets.only(
top: 10,
),
color: Colors.grey.shade300,
child: ListTile(
trailing: RaisedButton.icon(
color: Colors.yellow,
onPressed: () {},
icon: Icon(
Icons.move_to_inbox,
color: Colors.black,
),
label: Text(
"Earn More",
style: TextStyle(color: Colors.black),
),
),
leading: RaisedButton.icon(
color: Colors.yellow,
onPressed: () {},
icon: Icon(
Icons.share,
color: Colors.black,
),
label: Text(
"Share",
style: TextStyle(color: Colors.black),
),
),
),
),
],
),
),
),
],
);
},
transitionBuilder:
(context, animation, secondaryAnimation, child) {
return SlideTransition(
position: CurvedAnimation(
parent: animation,
curve: Curves.easeInOutSine,
).drive(Tween<Offset>(
begin: Offset(0, -1.0),
end: Offset.zero,
)),
child: child,
);
},
);
},
),
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Notifi()));
},
),
],
bottom: PreferredSize(
child: Container(
child: TabBar(
tabs: [
Container(
width: width * 0.2,
child: Row(
children: <Widget>[
Tab(text: "Cricket"),
SizedBox(width: 5),
Tab(
child: Icon(
Icons.brightness_1,
size: 9,
),
),
],
)),
Container(width: width * 0.2, child: Tab(text: "Football")),
// Container(width: width * 0.2, child: Tab(text: "Baseball")),
// Container(width: width * 0.2, child: Tab(text: "Basketball")),
// Container(width: width * 0.2, child: Tab(text: "Kabaddi")),
],
controller: _tabController,
isScrollable: true,
),
),
preferredSize: Size.fromHeight(60.0),
),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Matches"),
),
BottomNavigationBarItem(
icon: Icon(Icons.supervised_user_circle),
title: Text("My Leagues"),
),
BottomNavigationBarItem(
icon: Icon(Icons.monetization_on),
title: Text("Rewards"),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_pin),
title: Text("Account"),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text("More"),
),
],
selectedItemColor: Colors.pink,
unselectedItemColor: Colors.blueGrey,
type: BottomNavigationBarType.fixed,
),
body: TabBarView(
children: [
Cricket(),
Football(),
// Baseball(),
// Basketball(),
// Kabbadi(),
],
controller: _tabController,
),
);
}
}Cricket.dartimport 'package:fantacy_app/Football.dart';
import 'package:flutter/material.dart';
class Cricket extends StatefulWidget {
@override
_CricketState createState() => _CricketState();
}
class _CricketState extends State<Cricket> {
final List<String> Match = <String>[
'Match 1',
'Match 2',
'Match 3',
'Match 4',
'Match 5',
'Match 6',
];
final List<String> Time = <String>[
'5m 15s',
'1d 25m',
'2d 13m',
'3d 10m',
'4d 40m',
'5d 11m',
];
final List<String> Team1 = <String>[
'RCB',
'CSK',
'SRH',
'MI',
'DEL',
'KKR',
'RR',
'PNJ',
];
final List<String> Team2 = <String>[
'MI',
'PNJ',
'RCB',
'RR',
'KKR',
'CSK',
'SRH',
'DEL'
];
final List<String> Live = <String>[
'Live',
'',
'',
'',
'',
'',
'',
'',
];
final List<int> colorCodes = <int>[
400,
0,
0,
0,
0,
0,
0,
0,
];
final List<String> Image1 = <String>[
"images/logo.jpg",
"images/banner.jpg",
"images/logo.jpg",
"images/banner.jpg",
"images/banner.jpg",
"images/logo.jpg",
"images/banner.jpg",
"images/banner.jpg",
];
final List<String> Image2 = <String>[
"images/banner.jpg",
"images/logo.jpg",
"images/logo.jpg",
"images/banner.jpg",
"images/banner.jpg",
"images/logo.jpg",
"images/banner.jpg",
"images/banner.jpg",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade300,
body: ListView.separated(
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
itemCount: Match.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 115,
// color: Colors.amber[colorCodes[index]],
// child: Center(child: Text('${entries[index]}')),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 5),
height: 8,
width: 8,
decoration: BoxDecoration(
color: Colors.green[colorCodes[index]],
shape: BoxShape.circle,
),
),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text(
"${Live[index]}",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Container(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
child: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: CircleAvatar(
backgroundColor: Colors.grey.withOpacity(0.1),
backgroundImage:
ExactAssetImage("${Image1[index]}"))),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${Match[index]}",
style: TextStyle(
fontSize: 15, color: Colors.black87)),
SizedBox(
height: 4,
),
Container(
padding: EdgeInsets.all(2),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.only(
left: 8,
),
child: Text(
"${Team1[index]}",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
Text(
'IPL T20',
style: TextStyle(
fontSize: 18,
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(
right: 8,
),
child: Text("${Team2[index]}",
style: TextStyle(
fontWeight: FontWeight.bold),
textAlign: TextAlign.end),
),
),
],
),
),
SizedBox(
height: 8,
),
Text("${Time[index]}"),
],
),
),
Container(
width: 50,
height: 50,
child: CircleAvatar(
backgroundColor: Colors.grey,
backgroundImage:
ExactAssetImage("${Image2[index]}"),
),
),
],
),
),
],
),
),
),
);
},
separatorBuilder: (BuildContext context, int index) =>
PopupMenuDivider(),
),
);
}
}Football.dartimport 'package:fantacy_app/Football.dart';
import 'package:flutter/material.dart';
class Football extends StatefulWidget {
@override
_FootballState createState() => _FootballState();
}
class _FootballState extends State<Football> {
final List<String> Match = <String>[
'',
'',
'',
'',
'',
'',
];
final List<String> Time = <String>[
'5m 15s',
'1d 25m',
'2d 13m',
'3d 10m',
'4d 40m',
'5d 11m',
];
final List<String> Team1 = <String>[
'FUL',
'CRY',
'LIV',
'WHU',
'TOT',
];
final List<String> Team2 = <String>[
'ARS',
'SOU',
'LEU',
'NEW',
'EVE',
];
final List<String> Live = <String>[
'Live',
'',
'',
'',
'',
'',
'',
'',
];
final List<int> colorCodes = <int>[
400,
0,
0,
0,
0,
0,
0,
0,
];
final List<String> Image1 = <String>[
"images/2a.jpg",
"images/3a.jpg",
"images/4a.jpg",
"images/banner.jpg",
"images/3a.jpg",
"images/2a.jpg",
"images/banner.jpg",
"images/4a.jpg",
];
final List<String> Image2 = <String>[
"images/5a.jpg",
"images/logo.jpg",
"images/p1.jpg",
"images/banner.jpg",
"images/p2.jpg",
"images/p3.jpg",
"images/banner.jpg",
"images/2a.jpg",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade300,
body: ListView.separated(
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
itemCount: Match.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 115,
// color: Colors.amber[colorCodes[index]],
// child: Center(child: Text('${entries[index]}')),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 5),
height: 8,
width: 8,
decoration: BoxDecoration(
color: Colors.green[colorCodes[index]],
shape: BoxShape.circle,
),
),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text(
"${Live[index]}",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Container(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
child: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: CircleAvatar(
backgroundColor: Colors.grey.withOpacity(0.1),
backgroundImage:
ExactAssetImage("${Image1[index]}"))),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${Match[index]}",
style: TextStyle(
fontSize: 15, color: Colors.black87)),
SizedBox(
height: 4,
),
Container(
padding: EdgeInsets.all(2),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.only(
left: 8,
),
child: Text(
"${Team1[index]}",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
Text(
'ENGLISH LEAGUE',
style: TextStyle(
fontSize: 14,
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(
right: 8,
),
child: Text("${Team2[index]}",
style: TextStyle(
fontWeight: FontWeight.bold),
textAlign: TextAlign.end),
),
),
],
),
),
SizedBox(
height: 8,
),
Text("${Time[index]}"),
],
),
),
Container(
width: 50,
height: 50,
child: CircleAvatar(
backgroundColor: Colors.grey,
backgroundImage:
ExactAssetImage("${Image2[index]}"),
),
),
],
),
),
],
),
),
),
);
},
separatorBuilder: (BuildContext context, int index) =>
PopupMenuDivider(),
),
);
}
}Notification.dartimport 'package:flutter/material.dart';
class Notifi extends StatefulWidget {
@override
_NotifiState createState() => _NotifiState();
}
class _NotifiState extends State<Notifi> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Notifications"),
backgroundColor: Colors.pink,
),
body: Center(
child: Text("No Notifications"),
),
);
}
}
0 Comments