anydev/anyway
0
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

UI elements using the new structs #8

Merged
remoll merged 37 commits from feature/unify-api-frontend into main 2024-06-23 19:21:50 +00:00
Conversation 0 Commits 37 Files Changed 172 +92 -76
3 changed files with 92 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9a5ae95d97 - Show all commits

93
frontend/lib/modules/landmark_card.dart
View File

@@ -15,58 +15,63 @@ class _LandmarkCardState extends State<LandmarkCard> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
ThemeData theme = Theme.of(context); ThemeData theme = Theme.of(context);
return Card( return Container(
shape: RoundedRectangleBorder( height: 160,
borderRadius: BorderRadius.circular(15.0), child: Card(
), shape: RoundedRectangleBorder(
child: Row( borderRadius: BorderRadius.circular(15.0),
children: [ ),
Container( elevation: 5,
width: 160, clipBehavior: Clip.antiAliasWithSaveLayer,
height: 160, child: Row(
decoration: BoxDecoration( crossAxisAlignment: CrossAxisAlignment.start,
borderRadius: BorderRadius.only( children: [
topLeft: Radius.circular(15.0), Container( // the image on the left
bottomLeft: Radius.circular(15.0), // inherit the height of the parent container
), height: double.infinity,
image: DecorationImage( // force a fixed width
image: NetworkImage(widget.landmark.imageURL), width: 160,
child: Image.network(
widget.landmark.imageURL,
// cover the whole container meaning the image will be cropped
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
), ),
), Flexible(
Padding( child: Padding(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(10),
child: Column(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Row(
widget.landmark.name, children: [
style: TextStyle( Flexible(
fontSize: 18, child: Text(
fontWeight: FontWeight.bold, widget.landmark.name,
), style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
maxLines: 2,
),
)
],
),
Row(
children: [
Flexible(
child: Text(
"${widget.landmark.name} (${widget.landmark.type.name})",
style: const TextStyle(fontSize: 14),
),
)
]
), ),
], ],
), ),
SizedBox(height: 5), ),
Text(
"${widget.landmark.name} (${widget.landmark.type.name})",
style: TextStyle(fontSize: 14),
),
],
), ),
), ],
),
// Align(
// alignment: Alignment.topRight,
// child: Icon(Icons.push_pin, color: theme.primaryColor),
// ),
],
), ),
); );
} }

69
frontend/lib/modules/landmarks_overview.dart
View File

@@ -42,10 +42,13 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
} else { } else {
children = [Center(child: CircularProgressIndicator())]; children = [Center(child: CircularProgressIndicator())];
} }
return Center( return Padding(
child: Column( padding: const EdgeInsets.all(10),
mainAxisAlignment: MainAxisAlignment.center, child: Center(
children: children, child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
), ),
); );
}, },
@@ -56,46 +59,54 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
Widget landmarksWithSteps(List<Landmark> landmarks) { Widget landmarksWithSteps(List<Landmark> landmarks) {
List<Widget> children = []; List<Widget> children = [];
for (Landmark landmark in landmarks) { for (int i = 0; i < landmarks.length; i++) {
children.add(LandmarkCard(landmark)); children.add(LandmarkCard(landmarks[i]));
children.add(stepBetweenLandmarks()); if (i < landmarks.length - 1) {
Widget step = stepBetweenLandmarks(landmarks[i], landmarks[i + 1]);
children.add(step);
}
} }
return Column( return Column(
children: children.sublist(0, children.length - 1) children: children
); );
} }
Widget stepBetweenLandmarks() { Widget stepBetweenLandmarks(Landmark before, Landmark after) {
// This is a simple widget that draws a line between landmark-cards // This is a simple widget that draws a line between landmark-cards
// It's a vertical dotted line // It's a vertical dotted line
// Next to the line is the icon for the mode of transport (walking for now) and the estimated time // Next to the line is the icon for the mode of transport (walking for now) and the estimated time
// There is also a button to open the navigation instructions as a new intent // There is also a button to open the navigation instructions as a new intent
return Row( return Container(
children: [ margin: EdgeInsets.all(10),
Container( padding: EdgeInsets.all(10),
width: 50, decoration: BoxDecoration(
height: 50, border: Border(
decoration: BoxDecoration( left: BorderSide(width: 3.0, color: Colors.black),
border: Border( ),
left: BorderSide(width: 1.0, color: Colors.black), // gradient: LinearGradient(
), // begin: Alignment.topLeft,
), // end: Alignment.bottomRight,
child: Column( // colors: [Colors.grey, Colors.white, Colors.white],
// ),
),
child: Row(
children: [
Column(
children: [ children: [
Icon(Icons.directions_walk), Icon(Icons.directions_walk),
Text("5 min", style: TextStyle(fontSize: 10)), Text("5 min", style: TextStyle(fontSize: 10)),
], ],
), ),
), Spacer(),
Spacer(), ElevatedButton(
ElevatedButton( onPressed: () {
onPressed: () { // Open navigation instructions
// Open navigation instructions },
}, child: Text("Navigate"),
child: Text("Navigate"), ),
), ],
], ),
); );
} }

4
frontend/lib/pages/profile.dart
View File

@@ -51,7 +51,7 @@ class ImportanceSliders extends StatefulWidget {
class _ImportanceSlidersState extends State<ImportanceSliders> { class _ImportanceSlidersState extends State<ImportanceSliders> {
UserPreferences _prefs = UserPreferences(); final UserPreferences _prefs = UserPreferences();
@override @override
void initState() { void initState() {
@@ -80,7 +80,7 @@ class _ImportanceSlidersState extends State<ImportanceSliders> {
}, },
) )
), ),
margin: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 0), margin: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 0),
shadowColor: Colors.grey, shadowColor: Colors.grey,
)); ));
} }