From 1515ce1b16a7c1cc6478a32209b261cf576e2a59 Mon Sep 17 00:00:00 2001 From: oltimaloku Date: Tue, 6 Feb 2024 00:30:02 -0800 Subject: [PATCH 1/3] color fixes --- client/lib/global_variables.dart | 5 ++--- client/lib/home_router.dart | 7 +++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/lib/global_variables.dart b/client/lib/global_variables.dart index 82c99a5..0b2edec 100644 --- a/client/lib/global_variables.dart +++ b/client/lib/global_variables.dart @@ -2,14 +2,13 @@ import 'package:flutter/material.dart'; import 'package:flutter_dotenv/flutter_dotenv.dart'; class GlobalVariables { - static String get URI => dotenv.env['SERVER_URI'] ?? 'http://localhost:3000'; static String get GOOGLE_API_KEY => dotenv.env['GOOGLE_API_KEY'] ?? ''; // COLORS static const accentColor = Colors.red; - static const backgroundColor = Color.fromRGBO(255, 255, 255, 1); - static const foregroundColor = Color.fromRGBO(17, 45, 78, 1); + static const backgroundColor = Color.fromRGBO(12, 12, 12, 1); + static const foregroundColor = Color.fromRGBO(33, 33, 33, 1); static const primaryColor = Color.fromRGBO(2, 11, 30, 1); static const secondaryColor = Color.fromRGBO(63, 114, 175, 1); diff --git a/client/lib/home_router.dart b/client/lib/home_router.dart index 88664f8..8243aa6 100644 --- a/client/lib/home_router.dart +++ b/client/lib/home_router.dart @@ -40,9 +40,8 @@ class _HomeRouterState extends State { extendBody: true, floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( - foregroundColor: - GlobalVariables.secondaryColor, //Color.fromARGB(255, 3, 179, 0), - backgroundColor: const Color.fromARGB(255, 10, 10, 10), + foregroundColor: Colors.black, //Color.fromARGB(255, 3, 179, 0), + backgroundColor: GlobalVariables.secondaryColor, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(50.0)), ), @@ -68,7 +67,7 @@ class _HomeRouterState extends State { ), bottomNavigationBar: BottomAppBar( height: 64, - color: const Color.fromARGB(255, 10, 10, 10), + color: const Color.fromARGB(255, 12, 12, 12), shape: const CircularNotchedRectangle(), child: Container( child: Row( From c3ff25f26823c5ab421c13237c2a4e54e9d977b1 Mon Sep 17 00:00:00 2001 From: oltimaloku Date: Tue, 6 Feb 2024 00:52:08 -0800 Subject: [PATCH 2/3] Refactored geo sphere widget and added styling to match background --- .../geo_sphere/views/geo_spheres_view.dart | 97 +++---------------- .../geo_sphere/widgets/geo_sphere_widget.dart | 96 ++++++++++++++++++ 2 files changed, 110 insertions(+), 83 deletions(-) create mode 100644 client/lib/features/geo_sphere/widgets/geo_sphere_widget.dart diff --git a/client/lib/features/geo_sphere/views/geo_spheres_view.dart b/client/lib/features/geo_sphere/views/geo_spheres_view.dart index dad4eec..acc069a 100644 --- a/client/lib/features/geo_sphere/views/geo_spheres_view.dart +++ b/client/lib/features/geo_sphere/views/geo_spheres_view.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:georeal/features/gallery/views/geo_sphere_gallery.dart'; +import 'package:georeal/features/geo_sphere/widgets/geo_sphere_widget.dart'; import 'package:georeal/global_variables.dart'; import 'package:provider/provider.dart'; @@ -15,15 +15,19 @@ class GeoSphereView extends StatelessWidget { //final geoSphereViewModel = // Provider.of(context, listen: false); return Scaffold( - backgroundColor: const Color.fromARGB(255, 18, 18, 26), + appBar: AppBar( + title: const Text( + "GeoSpheres in your area", + style: TextStyle( + color: GlobalVariables.secondaryColor, + fontWeight: FontWeight.bold), + ), + backgroundColor: GlobalVariables.backgroundColor, + ), + backgroundColor: GlobalVariables.backgroundColor, body: SafeArea( child: Column( children: [ - const Text( - "Geo spheres in your area", - style: GlobalVariables.headerStyle, - ), - const Divider(), Expanded( child: Consumer( builder: (context, geoSphereViewModel, child) { @@ -31,82 +35,9 @@ class GeoSphereView extends StatelessWidget { itemCount: geoSphereViewModel.geoSpheres.length, itemBuilder: (context, index) { var geoSphere = geoSphereViewModel.geoSpheres[index]; - return GestureDetector( - child: Container( - decoration: BoxDecoration( - border: Border.all(color: Colors.transparent)), - child: Column( - children: [ - Padding( - padding: const EdgeInsets.fromLTRB(20, 8, 20, 8), - child: Row( - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text( - geoSphere.name, - style: GlobalVariables.headerStyle, - ), - Row( - children: [ - FutureBuilder( - future: - geoSphereViewModel.getNeighborhood( - geoSphere.latitude, - geoSphere.longitude), - builder: (BuildContext context, - AsyncSnapshot snapshot) { - if (snapshot.connectionState == - ConnectionState.waiting) { - return const CircularProgressIndicator(); - } else if (snapshot.hasError) { - return const Text('Error'); - } else { - return Text( - snapshot.data ?? 'Unknown'); - } - }, - ), - const Text(","), - const SizedBox( - width: 8, - ), - FutureBuilder( - future: geoSphereViewModel - .getDistanceToGeoSphere(geoSphere), - builder: (BuildContext context, - AsyncSnapshot snapshot) { - if (snapshot.connectionState == - ConnectionState.waiting) { - return const CircularProgressIndicator(); - } else if (snapshot.hasError) { - return const Text('Error'); - } else { - return Text( - '${snapshot.data.toString()} km' ?? - 'Unknown'); - } - }, - ), - ], - ), - ], - ), - ), - const Divider(), - ], - ), - ), - // Takes you to the gallery of the selected geo sphere - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - GeoSphereGallery(geoSphere: geoSphere), - ), - ); - }, + return Padding( + padding: const EdgeInsets.fromLTRB(20, 8, 20, 8), + child: GeoSphereWidget(geoSphere: geoSphere), ); }, ); diff --git a/client/lib/features/geo_sphere/widgets/geo_sphere_widget.dart b/client/lib/features/geo_sphere/widgets/geo_sphere_widget.dart new file mode 100644 index 0000000..08d7083 --- /dev/null +++ b/client/lib/features/geo_sphere/widgets/geo_sphere_widget.dart @@ -0,0 +1,96 @@ +import 'package:flutter/material.dart'; +import 'package:georeal/global_variables.dart'; +import 'package:provider/provider.dart'; + +import '../../../models/geo_sphere_model.dart'; +import '../../gallery/views/geo_sphere_gallery.dart'; +import '../view_model/geo_sphere_view_model.dart'; + +class GeoSphereWidget extends StatelessWidget { + final GeoSphere geoSphere; + const GeoSphereWidget({super.key, required this.geoSphere}); + + @override + Widget build(BuildContext context) { + final geoSphereViewModel = Provider.of(context); + return GestureDetector( + child: Container( + height: 50, + decoration: const BoxDecoration( + color: Color.fromRGBO(22, 24, 31, 1), + borderRadius: BorderRadius.all( + Radius.circular(10), + ), + ), + child: Padding( + padding: const EdgeInsets.fromLTRB(20, 8, 20, 8), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + geoSphere.name, + style: const TextStyle( + color: GlobalVariables.secondaryColor, + fontWeight: FontWeight.bold), + ), + Row( + children: [ + FutureBuilder( + future: geoSphereViewModel.getNeighborhood( + geoSphere.latitude, geoSphere.longitude), + builder: + (BuildContext context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.waiting) { + return const CircularProgressIndicator(); + } else if (snapshot.hasError) { + return const Text('Error'); + } else { + return Text( + snapshot.data ?? 'Unknown', + style: const TextStyle(color: Colors.white), + ); + } + }, + ), + const Text( + ",", + style: TextStyle(color: Colors.white), + ), + const SizedBox( + width: 8, + ), + FutureBuilder( + future: + geoSphereViewModel.getDistanceToGeoSphere(geoSphere), + builder: + (BuildContext context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.waiting) { + return const CircularProgressIndicator(); + } else if (snapshot.hasError) { + return const Text('Error'); + } else { + return Text( + '${snapshot.data.toString()} km' ?? 'Unknown', + style: const TextStyle(color: Colors.white), + ); + } + }, + ), + ], + ), + ], + ), + ), + ), + // Takes you to the gallery of the selected geo sphere + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => GeoSphereGallery(geoSphere: geoSphere), + ), + ); + }, + ); + } +} From 67e9be312a01cfd7defcb61aaf0986420a6eaeeb Mon Sep 17 00:00:00 2001 From: oltimaloku Date: Tue, 6 Feb 2024 00:52:22 -0800 Subject: [PATCH 3/3] Changed styling of gallery --- .../gallery/views/geo_sphere_gallery.dart | 2 ++ .../gallery/widgets/gallery_navbar.dart | 19 ++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/client/lib/features/gallery/views/geo_sphere_gallery.dart b/client/lib/features/gallery/views/geo_sphere_gallery.dart index ac07fbd..bf33022 100644 --- a/client/lib/features/gallery/views/geo_sphere_gallery.dart +++ b/client/lib/features/gallery/views/geo_sphere_gallery.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:georeal/features/gallery/view_model/gallery_view_model.dart'; import 'package:georeal/features/gallery/widgets/gallery_navbar.dart'; +import 'package:georeal/global_variables.dart'; import 'package:georeal/models/geo_sphere_model.dart'; import 'package:provider/provider.dart'; @@ -23,6 +24,7 @@ class GeoSphereGallery extends StatelessWidget { galleryViewModel.getPhotosFromGallery(geoSphere.geoSphereId); return Scaffold( + backgroundColor: GlobalVariables.backgroundColor, body: SafeArea( child: Column( children: [ diff --git a/client/lib/features/gallery/widgets/gallery_navbar.dart b/client/lib/features/gallery/widgets/gallery_navbar.dart index 3f1fc26..3e63096 100644 --- a/client/lib/features/gallery/widgets/gallery_navbar.dart +++ b/client/lib/features/gallery/widgets/gallery_navbar.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:georeal/global_variables.dart'; import 'package:provider/provider.dart'; import '../../../models/geo_sphere_model.dart'; @@ -22,9 +23,18 @@ class GalleryNavBar extends StatelessWidget { Navigator.pop(context); }, iconSize: 24, - icon: const Icon(Icons.arrow_back_ios_new_rounded), + icon: const Icon( + Icons.arrow_back_ios_new_rounded, + color: Colors.white, + ), + ), + Text( + geoSphere.name, + style: const TextStyle( + fontSize: 20, + color: GlobalVariables.secondaryColor, + fontWeight: FontWeight.bold), ), - Text(geoSphere.name, style: const TextStyle(fontSize: 20)), IconButton( onPressed: () async { final confirmDelete = await showDialog( @@ -57,7 +67,10 @@ class GalleryNavBar extends StatelessWidget { } }, iconSize: 24, - icon: const Icon(Icons.delete_rounded), + icon: const Icon( + Icons.delete_rounded, + color: Colors.white, + ), ), ], );