import 'package:ambient/firebase.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'CustomSearchDelegate.dart';
import '../homepage.dart';
import 'package:google_fonts/google_fonts.dart';
/*
Klasse & Screen zur Klassifizierung der Farben zu den Genres.
Es gibt eine graue Default Seite wenn keine Farbe ausgewählt ist.
Wenn eine Farbe ausgewählt wird, kann man das Genre dazu auswählen.
Die Klassifizierung wird dann in der Datenbank aktualisiert
*/
class ClassificationPage extends StatefulWidget {
const ClassificationPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _ClassificationPageState();
}
class _ClassificationPageState extends State<ClassificationPage> {
final String id = (FirebaseAuth.instance.currentUser?.uid.toString())!+'_genres';
Color _ambientBackgroundColor = Colors.grey.withOpacity(0.5);
String genreValue = '';
bool _redSelected = false;
bool _orangeSelected = false;
bool _yellowSelected = false;
bool _greenSelected = false;
bool _whiteSelected = false;
bool _blueSelected = false;
bool _pinkSelected = false;
bool _purpleSelected = false;
bool _brownSelected = false;
bool _blackSelected = false;
bool _errorText = false;
@override
Widget build(BuildContext context) {
Firebase.initializeApp();
print("User");
print(FirebaseAuth.instance.currentUser?.uid.toString());
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
color: _ambientBackgroundColor,
child: Column(
children: [
const SizedBox(height: 40,),
SizedBox( height: 50, width: 300,
child: Text('Ambient!',
style:
GoogleFonts.cabin(
fontSize: 40.0, color: Colors.white.withOpacity(0.85)),),),
const SizedBox(height: 20,),
SizedBox(
height: 80,
width: 300,
child : Text('Select the genre that fits to the emotion of each color',
style:
GoogleFonts.cabin(
fontSize: 20.0, color: Colors.white.withOpacity(0.85),),),),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.only(topLeft: Radius.circular(50),topRight: Radius.circular(50)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],),
child: ListView(
children: <Widget>[
GestureDetector(
onTap: () async {
String genre = await changeFirebase().getGenreByHex('FF0000');
print('Get genre by hex ' + genre);
if(!_redSelected){closeAll(); setState(() => _redSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.red;
if (!_redSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _redSelected ?
selectedColor("Red", Colors.red, Colors.white.withOpacity(0.9),
"rock","latin", "blues",
'Strong emotions, love, energie') : noSelection("Red")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: (){
if(!_orangeSelected){closeAll(); setState(() => _orangeSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.orange;
if (!_orangeSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _orangeSelected ?
selectedColor("Orange", Colors.orange, Colors.white.withOpacity(0.9),
"soul", "jazz", "indie-pop", 'warmth, energie, fall') : noSelection("Orange")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_yellowSelected){closeAll(); setState(() => _yellowSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.yellow;
if (!_yellowSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _yellowSelected ?
selectedColor("Yellow", Colors.yellow, Colors.white,
"pop", "funk", "country", 'happiness, optimism, warmth') : noSelection("Yellow")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_greenSelected){closeAll(); setState(() => _greenSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.green;
if (!_greenSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _greenSelected ?
selectedColor("Green", Colors.green, Colors.white.withOpacity(0.9),
"ambient", "classical", "new-age", 'calmness, growth, nature') : noSelection("Green")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: (){
if(!_whiteSelected){closeAll(); setState(() => _whiteSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.grey.withOpacity(0.5);
if (!_whiteSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _whiteSelected ?
selectedColor("White", Colors.white, Colors.grey.withOpacity(0.7),
"classical", "ambient", "piano", 'calmness, peace, serenity') : noSelection("White")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_blueSelected){closeAll(); setState(() => _blueSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.blue;
if (!_blueSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _blueSelected ?
selectedColor( "Blue", Colors.blue, Colors.white.withOpacity(0.9),
"blues", "rainy-day", "indie-pop", 'calm, Gelassenheit, sadness') : noSelection("Blue")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_pinkSelected){closeAll(); setState(() => _pinkSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.pinkAccent;
if (!_pinkSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _pinkSelected ?
selectedColor(
"Pink", Colors.pink, Colors.white.withOpacity(0.9),
"pop", "k-pop", "r-n-b", 'romance, charm, nostalgia') : noSelection("Pink")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_purpleSelected){closeAll(); setState(() => _purpleSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.purple;
if (!_purpleSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _purpleSelected ?
selectedColor("Purple", Colors.purple, Colors.white.withOpacity(0.9),
"rock", "classical", "hip-hop", 'luxury, spirituality, ambition') : noSelection("Purple")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_brownSelected){closeAll(); setState(() => _brownSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.brown;
if (!_brownSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _brownSelected ?
selectedColor("Brown", Colors.brown, Colors.white.withOpacity(0.9),
"country", "folk", "reggae", 'warmth, security, nostalgia, calm') : noSelection("Brown")
)
,),
const SizedBox(height: 20,),
GestureDetector(
onTap: () {
if(!_blackSelected){closeAll(); setState(() => _blackSelected = true); }
else{closeAll();}
_ambientBackgroundColor = Colors.black87;
if (!_blackSelected){_ambientBackgroundColor = Colors.grey.withOpacity(0.5);}},
child: Container(
child: _blackSelected ?
selectedColor("Black", Colors.black87, Colors.white.withOpacity(0.7),
"metal", "classical", "rock", 'melancholy, power, noble') : noSelection("Black")
)
,),
const SizedBox(height: 20,),
Align(
alignment: Alignment.center,
child: Container(
width: 200, height: 40,
child : StreamBuilder(
//Es wird in der Datenbank geprüft, ob zu allen Farben ein Genre ausgewählt wurde
stream: FirebaseFirestore.instance.collection('classification').doc(id).snapshots(),
builder: (BuildContext context,
AsyncSnapshot snapshot) {
return ElevatedButton(
style:ButtonStyle(
backgroundColor: MaterialStatePropertyAll<Color>(Colors.white.withOpacity(0.9))),
child: const Text(
"Save", style: TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),),
onPressed: () {
print(changeFirebase().checkIfEverythingSelected(snapshot).toString());
if (changeFirebase().checkIfEverythingSelected(snapshot)) {
Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
}
else{
setState(() {
_errorText = true;
});
}
});
}))),
Container(
child: _errorText ?
const Text('Not everything is selected!',
textAlign: TextAlign.center,
style: TextStyle( fontSize: 20, color: Colors.red),)
: null
),
const SizedBox(height: 40,)
]),),)]
)
));
}
Text errorText(){
return const Text(
'Not Everything is selected',
style: TextStyle(fontSize: 20, color: Colors.red)
);
}
//wenn die Farbe nicht ausgewählt ist, wird kein Genre-Auswahl dargestellt und die Farben sind grau
Align noSelection(String colorText) {
return Align(
alignment: Alignment.center,
child:Container(
width: 320,
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Colors.grey.shade300, width: 1),
borderRadius: BorderRadius.circular(10),),
child: Column(
children: [
SizedBox(height: 50,),
Row(
children: [
const SizedBox(width: 25),
Text(colorText,
style: GoogleFonts.cabin(fontSize: 20.0, color: Colors.grey.shade400,)),]),
Row(
children: [
const SizedBox(width: 25),
StreamBuilder(
stream: FirebaseFirestore.instance.collection('classification').doc(id).snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),);}
return Text(changeFirebase().checkForNull(snapshot.data.data()[colorText]), textAlign: TextAlign.center,
style: GoogleFonts.cabin(fontSize: 40.0, color: Colors.grey.shade400,),);
}),]),
SizedBox(height: 5,)])));}
//Wenn eine Farbe ausgewählt wird, werden die Farben entsprechend angepasst
//Und man kann ein Genre zu dieser Farbe auswählen
Align selectedColor(String colorText, Color color, Color textColor, String rec1, String rec2, String rec3, String infoText) {
return Align(
alignment: Alignment.center,
child:Container(
width: 320,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.4),
blurRadius: 10.0,
spreadRadius: 2.0,
offset: const Offset(0.0, 0.0),)]),
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child : IconButton(onPressed:(){
_showMyDialog(colorText, infoText);},
alignment: Alignment.centerRight,
icon: Icon( Icons.info_outline, color: textColor.withOpacity(0.7), size: 35,),),
),
SizedBox(height: 0,),
Row(
children: [
const SizedBox(width: 25),
Text(colorText,
style: GoogleFonts.cabin(fontSize: 20.0, color: textColor,)),]),
Row(
children: [
const SizedBox(width: 25),
StreamBuilder(
stream: FirebaseFirestore.instance.collection('classification').doc(id).snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
return
Text(changeFirebase().checkForNull(snapshot.data.data()[colorText]), textAlign: TextAlign.center,
style: GoogleFonts.cabin(fontSize: 40.0, color: textColor),);
}
),]),
const SizedBox(height: 20,),
Container(
width: 290,
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search, color: textColor),
hintText: 'search for genres',
hintStyle: TextStyle(
fontSize: 20, color: textColor)),
style: TextStyle(fontSize: 20, color: textColor),
onTap: () {
showSearch(
context: context,
delegate: CustomSearchDelegate(colorText),
);
changeFirebase().updateColorGenre(colorText, genreValue);},
),
),
const SizedBox(height: 50),
Text("Recommendation", style: TextStyle(
fontSize: 20, color: textColor)),
Column(
children: [
const SizedBox(height: 20,),
Row(
children: [
const SizedBox(width: 40,),
recommendationLabel(colorText, rec1, textColor),
]
),
const SizedBox(height: 20,),
Row(
children: [
const SizedBox(width: 40,),
recommendationLabel(colorText, rec2, textColor),
]
),
const SizedBox(height: 20,),
Row(
children: [
const SizedBox(width: 40,),
recommendationLabel(colorText, rec3, textColor),
]
),
const SizedBox(height: 50,)
]
)])));
}
GestureDetector recommendationLabel(String colorText, String rec, Color textColor) {
return GestureDetector(
onTap: () {
changeFirebase().updateColorGenre(colorText, rec);
closeAll();},
child:Container(
child: Row(
children: [
Container(
width: 240,
height: 40,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
child: Align(
alignment: Alignment.center,
child: Text
(rec, textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: textColor)
),
)
)])),
);
}
//Info Dialog zur Erklärung der Farben-Emotionen
Future<void> _showMyDialog(String colorText, String infoText) {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text (colorText),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(infoText),
],),
),
actions: <Widget>[
TextButton(
child: const Text('Okay'),
onPressed: () {
Navigator.of(context).pop();
},),
],);
},);}
closeAll(){
_ambientBackgroundColor = Colors.grey.withOpacity(0.5);
setState(() {
_redSelected = false;
_orangeSelected = false;
_yellowSelected = false;
_greenSelected = false;
_whiteSelected = false;
_blueSelected = false;
_pinkSelected = false;
_purpleSelected = false;
_brownSelected = false;
_blackSelected = false;
});
_ambientBackgroundColor = Colors.grey.withOpacity(0.5);
}
}