Newer
Older
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';
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(
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),),),),
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),
),
],),
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),
)
,),
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();}
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(
"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();}
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")
Align(
alignment: Alignment.center,
child: Container(
width: 200, height: 40,
//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))),
"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
),
)
));
}
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(
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) {
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
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),);
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
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)
),
)
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),
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
),
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);
}