`import 'package:flutter/material.dart';
import 'CustomAppBar.dart';
import 'CustomShapeClipper.dart';
import 'package:intl/intl.dart';
void main() => runApp(MaterialApp(
title: 'Eventik',
debugShowCheckedModeBanner: true,
home: HomeScreen(),
theme: appTheme,
));
//Colors for the clip-path gradient
Color firstColor = Color(0xFF00FFFF);
Color secondColor = Color(0xFF00D5FF);
//Define a theme
ThemeData appTheme =
ThemeData(primaryColor: Color(0xFFF3791A), fontFamily: 'Oxygen');
//Definition of a list
List locations = ['Mulungushi (MU)', 'UNZA', 'CBU'];
//DropDown Const style
const TextStyle dropdownTextStyle =
TextStyle(color: Colors.black, fontSize: 16.0);
const TextStyle dropdownMenuItemTextStyle =
TextStyle(color: Colors.black, fontSize: 16.0);
//number format
final formatCurrency = NumberFormat.simpleCurrency();
class HomeScreen extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
// TODO: implement build
return
Scaffold(
bottomNavigationBar: CustomAppBar(),
body: Column(
children: [
HomeScreenTopPart(),
homeScreenBottomPart,
],
),
}
}
class HomeScreenTopPart extends StatefulWidget {
@OverRide
_HomeScreenTopPart createState() => _HomeScreenTopPart();
}
class _HomeScreenTopPart extends State {
//Variable for selected location
var selectedLocationIndex = 0;
var isInCampusSelected = true;
@OverRide
Widget build(BuildContext context) {
// TODO: implement build
return Stack(
children: [
ClipPath(
clipper: CustomShapeClipper(),
child: Container(
height: 400.0,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [firstColor, secondColor])),
child: Column(
children: [
SizedBox(
height: 50.0,
),
Padding(
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Icon(
Icons.location_on,
color: Colors.white,
),
SizedBox(
width: 16.0,
),
PopupMenuButton(
onSelected: (index) {
selectedLocationIndex = index;
print(locations[selectedLocationIndex]);
},
child: Row(
children: [
Text(
locations[selectedLocationIndex],
style: dropdownTextStyle,
),
Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
],
),
itemBuilder: (BuildContext context) =>
<PopupMenuItem>[
PopupMenuItem(
child: Text(
locations[0],
style: dropdownMenuItemTextStyle,
),
value: 0,
),
PopupMenuItem(
child: Text(
locations[1],
style: dropdownMenuItemTextStyle,
),
value: 1,
),
PopupMenuItem(
child: Text(
locations[2],
style: dropdownMenuItemTextStyle,
),
value: 2,
),
],
),
Spacer(),
Icon(
Icons.settings,
color: Colors.white,
),
],
),
),
SizedBox(
height: 40.0,
),
Text(
'Events you can attend',
style: TextStyle(fontSize: 24.0, color: Colors.white),
textAlign: TextAlign.center,
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.all(31.0),
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: TextField(
controller: TextEditingController(text: locations[0]),
style: dropdownMenuItemTextStyle,
cursorColor: appTheme.primaryColor,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 20.0, vertical: 15.0),
suffixIcon: Material(
elevation: 2.0,
borderRadius:
BorderRadius.all(Radius.circular(30.0)),
child: Icon(
Icons.search,
color: Colors.black,
),
),
border: InputBorder.none,
),
),
),
),
SizedBox(
height: 3.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
child: ChoiceChip(
Icons.schedule, "In-Campus", isInCampusSelected),
onTap: () {
setState(() {
isInCampusSelected = true;
});
},
),
SizedBox(
width: 20.0,
),
InkWell(
child: ChoiceChip(
Icons.school, "Off-Campus", !isInCampusSelected),
onTap: () {
setState(() {
isInCampusSelected = false;
});
},
),
],
)
],
)),
),
],
);
}
}
class ChoiceChip extends StatefulWidget {
//Defining variables for choice chips
final IconData iconData;
final String text;
final bool isSelected;
ChoiceChip(this.iconData, this.text, this.isSelected);
@OverRide
_ChoiceChipState createState() => _ChoiceChipState();
}
class _ChoiceChipState extends State {
@OverRide
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
decoration: widget.isSelected
? BoxDecoration(
color: Colors.black.withOpacity(0.15),
borderRadius: BorderRadius.all(Radius.circular(20.0)))
: null,
child: Row(
children: [
Icon(widget.iconData),
SizedBox(
width: 8.0,
),
Text(
widget.text,
style: TextStyle(color: Colors.black, fontSize: 15.0),
)
],
),
);
}
}
const TextStyle viewAllTextStyle =
TextStyle(color: Colors.orange, fontSize: 16.0);
var homeScreenBottomPart = Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Text(
'Current Top Events',
style: dropdownMenuItemTextStyle,
),
Spacer(),
Text(
'View all (10)',
style: viewAllTextStyle,
),
],
),
),
Container(
height: 210.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: eventsCard,
),
)
],
);
//create a list for city cards
List eventsCard = [
EventsCard(
"assets/images/MU.jpeg", "Red Carpet", "Sep 2019", "45", "130", "100"),
EventsCard("assets/images/CBU.jpg", "Miss-CBU", "Nov 2019", "35", "230", "200"),
EventsCard("assets/images/athens.jpg", "Hackathon", "Oct 2019", "50", "180", "110"),
];
class EventsCard extends StatelessWidget {
final String imagePath, eventName, monthYear, discount, oldPrice, newPrice;
EventsCard(this.imagePath, this.eventName, this.monthYear, this.discount,
this.oldPrice, this.newPrice);
@OverRide
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
children: [
Container(
height: 210.0,
width: 160.0,
child: Image.asset(
imagePath,
fit: BoxFit.cover,
),
),
Positioned(
left: 0.0,
bottom: 0.0,
width: 160.0,
height: 60.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.black,
Colors.black.withOpacity(0.1),
])),
),
),
Positioned(
left: 10.0,
bottom: 10.0,
right: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
eventName,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18.0,
),
),
Text(
monthYear,
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.white,
fontSize: 16.0,
),
),
],
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 6.0,
),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
),
child: Text(
"$discount%",
style:
TextStyle(fontSize: 14.0, color: Colors.black),
)),
],
),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 5.0,
),
Text(
'${formatCurrency.format(newPrice)}',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
SizedBox(
width: 5.0,
),
Text(
'${formatCurrency.format(oldPrice)}',
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.normal),
),
],
)
],
),
);
}
}
`