Added Material Themeing

Colours are now specified universally in the Colours.dart file, and imported into a theme in accordance with the updated material design specification. Form fields now use the outline display type.
swiftinitdotcom · May 11, 2018 · cb9d33e · cb9d33e
1 parent 49c27a7
commit cb9d33e
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -23,4 +23,4 @@ The screenshots below show the form used to add new events, which includes autom
 * Flutter
 * Firebase Firestore, Firebase Auth, Firebase Analytics and Firesbase Messaging
 * Flutter Barcode Scan package which is a wrapper for dm77/barcodescanner on android and mikebuss/MTBBarcodeScanner on iOS
-* Spotify Web API and Web Playback SDK
+* Spotify Web API and Web Playback SDK
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:firebase_messaging/firebase_messaging.dart';
 import 'pages/signin_page.dart';
+import 'utils/colours.dart';
 
 void main() => runApp(new MyApp());
 
@@ -14,6 +15,21 @@ class MyApp extends StatelessWidget {
       title: 'Event App',
       home: new SignInPage(),
       debugShowCheckedModeBanner: false,
+      theme: _mainAppTheme(),
+    );
+  }
+
+  ThemeData _mainAppTheme () {
+    return ThemeData.light().copyWith(
+      accentColor: AppColours.secondaryCyan,
+      buttonColor: AppColours.primaryCharcoal,
+      primaryColor: AppColours.primaryCharcoal,
+      bottomAppBarColor: AppColours.secondaryCyanDark,
+      primaryColorDark: AppColours.primaryCharcoalDark,
+      primaryColorLight: AppColours.primaryCharcoalLight,
+      secondaryHeaderColor: AppColours.primaryCharcoalLight,
+      canvasColor: AppColours.secondaryCyanDark,
+      backgroundColor: AppColours.background,
     );
   }
 }
diff --git a/lib/pages/add_event_page.dart b/lib/pages/add_event_page.dart
@@ -64,35 +64,49 @@ class AddEventPageState extends State<AddEventPage> {
         child: new Padding(
           padding: const EdgeInsets.all(8.0),
           child: new Form(
-            autovalidate: true,
+            //autovalidate: true,
             key: _formKey,
             child: new Column(
               children: <Widget>[
-                new TextFormField(
-                  decoration: new InputDecoration(labelText: "Event Name"),
-                  validator: (val) => val.length < 5 ? "Event name is too short" : null,
-                  onSaved: (val) => _eventName = val,
+                new Padding(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: new TextFormField(
+                    decoration: new InputDecoration(
+                        labelText: "Event Name",
+                      border: new OutlineInputBorder(),
+                    ),
+                    validator: (val) => val.length < 5 ? "Event name is too short" : null,
+                    onSaved: (val) => _eventName = val,
+                  ),
                 ),
                 new TextFormField(
-                  decoration: new InputDecoration(labelText: "Description"),
+                  decoration: new InputDecoration(
+                      labelText: "Description",
+                      border: new OutlineInputBorder(),
+                  ),
                   validator: (val) => val.isEmpty ? "Event description should not be empty" : null,
                   maxLines: 6,
                   onSaved: (val) => _description = val,
                 ),
                 new CalendarPicker(_startTimeController),
                 new CalendarPicker(_endTimeController),
-                new TextFormField(
-                  decoration: new InputDecoration(
-                    labelText: "Lattitude",
-                    icon: new Icon(Icons.map)
+                new Padding(
+                  padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
+                  child: new TextFormField(
+                    decoration: new InputDecoration(
+                      labelText: "Lattitude",
+                      //icon: new Icon(Icons.map),
+                      border: new OutlineInputBorder(),
+                    ),
+                    validator: (val) => double.parse(val, (e) => null) == null ? "Invalid longitude. Should be number." : null,
+                    onSaved: (val) => _latitude = double.parse(val, (e) => null),
                   ),
-                  validator: (val) => double.parse(val, (e) => null) == null ? "Invalid longitude. Should be number." : null,
-                  onSaved: (val) => _latitude = double.parse(val, (e) => null),
                 ),
                 new TextFormField(
                   decoration: new InputDecoration(
                     labelText: "Longitude",
-                    icon: new Icon(Icons.map)
+                    //icon: new Icon(Icons.map),
+                    border: new OutlineInputBorder(),
                   ),
                   validator: (val) => double.parse(val, (e) => null) == null ? "Invalid longitude. Should be number." : null,
                   onSaved: (val) => _longitude = double.parse(val, (e) => null),

diff --git a/lib/pages/event_page.dart b/lib/pages/event_page.dart
@@ -23,10 +23,8 @@ class EventPage extends StatefulWidget{
 }
 
 class EventPageState extends State<EventPage> with SingleTickerProviderStateMixin {
-
   TabController controller;
 
-
   @override
   void initState() {
     super.initState();
@@ -58,7 +56,6 @@ class EventPageState extends State<EventPage> with SingleTickerProviderStateMixi
         floatingActionButton: widget._canScan ? new FloatingActionButton(
           onPressed: () => widget.fabOnPress(context),
           child: new Icon(Icons.camera_alt),
-          backgroundColor: Colors.cyanAccent,
         ) : new Container(),
         body: new TabBarView(
             controller: controller,
@@ -69,7 +66,7 @@ class EventPageState extends State<EventPage> with SingleTickerProviderStateMixi
             ],
         ),
         bottomNavigationBar: new Material(
-          color: Colors.greenAccent,
+          //color: Colors.greenAccent,
           child: new TabBar(
             controller: controller,
             tabs: <Tab>[

diff --git a/lib/pages/event_page_tabs/event_main_tab.dart b/lib/pages/event_page_tabs/event_main_tab.dart
@@ -4,6 +4,7 @@ import 'package:qr_flutter/qr_flutter.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:http/http.dart' as http;
 import 'package:firebase_auth/firebase_auth.dart';
+import '../../utils/colours.dart';
 
 
 class EventMainTabPage extends StatefulWidget {
@@ -102,7 +103,7 @@ class EventMainTabPageState extends State<EventMainTabPage> with SingleTickerPro
                     },
                     child: _qrReady ? new QrImage(
                       data: _qrEntryCode,
-                      version: 5, foregroundColor: Colors.green[900],
+                      version: 5, foregroundColor: AppColours.primaryCharcoal,
                       size: MediaQuery.of(context).size.width/2.5,
                     ) :
                     new Text("Loading entry QR code..."),
@@ -119,7 +120,7 @@ class EventMainTabPageState extends State<EventMainTabPage> with SingleTickerPro
 
         // If set to display a full screen QR Code, the QR code goes full screen
         fullScreenQR ? new InkWell(
-          splashColor: Colors.greenAccent,
+          splashColor: AppColours.tick,
           onTap: () => this.setState(() => fullScreenQR = !fullScreenQR),
           child: new Container(
             color: Colors.white.withOpacity(1.0),

diff --git a/lib/pages/event_page_tabs/event_music_tab.dart b/lib/pages/event_page_tabs/event_music_tab.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import '../../widgets/event_music_list_card.dart';
 import 'event_music_search_page.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
+import '../../utils/colours.dart';
 
 class EventMusicPage extends StatefulWidget {
   final String _eventID;
@@ -20,7 +21,7 @@ class EventMusicPageState extends State<EventMusicPage>{
 
   ///Adds the song with [musicID] to the playlist when tapped
   void onMusicTap(String musicID) {
-    background = Colors.greenAccent;
+    background = AppColours.tick;
     Firestore.instance
         .collection('events').document(widget._eventID)
         .getCollection('music').document(musicID)

diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart
@@ -3,6 +3,7 @@ import '../widgets/event_list_card.dart';
 import 'event_page.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'add_event_page.dart';
+import '../utils/colours.dart';
 
 class HomePage extends StatefulWidget {
   @override
@@ -21,11 +22,11 @@ class HomePageState extends State<HomePage> with TickerProviderStateMixin{
     return new Scaffold(
       floatingActionButton: new FloatingActionButton(
         onPressed: () => addEvent(),
-        backgroundColor: Colors.amberAccent,
+        //backgroundColor: Colors.amberAccent,
         child: new Icon(Icons.add),
       ),
       body: new Material(
-        color: Colors.deepPurpleAccent,
+        color: AppColours.primaryCharcoalDark,
 
         // Get all events ordered by start time
         child: new StreamBuilder<QuerySnapshot>(

diff --git a/lib/pages/scan_barcode_page.dart b/lib/pages/scan_barcode_page.dart
@@ -5,6 +5,7 @@ import 'package:flutter/services.dart';
 import 'package:barcode_scan/barcode_scan.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import '../utils/ticket_status_enum.dart';
+import '../utils/colours.dart';
 
 class ScanBarcodePage extends StatefulWidget {
 
@@ -62,6 +63,7 @@ class ScanBarcodePageState extends State<ScanBarcodePage>{
 
   Widget build(BuildContext context) {
     return new Material(
+      color: AppColours.background,
       child: new Padding(
         padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 15.0),
         child: new Column(
@@ -84,7 +86,7 @@ class ScanBarcodePageState extends State<ScanBarcodePage>{
                       title: new Text(scannedTickets[index][0]),
                       subtitle: new Text(scannedTickets[index][1]),
                     ),
-                    color: scannedTickets[index][2] == TicketStatus.Verified ? Colors.white : scannedTickets[index][2] == TicketStatus.ScanFailed ? Colors.orangeAccent : Colors.redAccent,
+                    color: scannedTickets[index][2] == TicketStatus.Verified ? Colors.white : scannedTickets[index][2] == TicketStatus.ScanFailed ? AppColours.warning : AppColours.error,
                   );
                 }
               ),

diff --git a/lib/pages/signin_page.dart b/lib/pages/signin_page.dart
@@ -32,6 +32,9 @@ class SignInPage extends StatelessWidget {
       );
     }
 
+    print(googleUser);
+    print(await _auth.currentUser());
+
     if (await _auth.currentUser() != null)
       Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new HomePage()));
   }

diff --git a/lib/utils/colours.dart b/lib/utils/colours.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class AppColours {
+  static const primaryCharcoal = const Color(0xFF455a64);
+  static const primaryCharcoalLight = const Color(0xFF718792);
+  static const primaryCharcoalDark = const Color(0xFF1c313a);
+
+  static const secondaryCyan = const Color(0xFF00acc1);
+  static const secondaryCyanLight = const Color(0xFF5ddef4);
+  static const secondaryCyanDark = const Color(0xFF007c91);
+
+  static const tick = Colors.greenAccent;
+  static const error = Colors.redAccent;
+  static const warning = Colors.orangeAccent;
+
+  static const background = Colors.white;
+}
+
diff --git a/lib/widgets/event_guest_list_card.dart b/lib/widgets/event_guest_list_card.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
+import '../utils/colours.dart';
 
 class EventGuestListCard extends StatefulWidget {
   State<StatefulWidget> createState() => new EventGuestListCardState();
@@ -43,7 +44,7 @@ class EventGuestListCardState extends State<EventGuestListCard> {
     ) :
     new Card(
       child: new ListTile(
-        leading: widget._going ? const Icon(Icons.check, color: Colors.greenAccent,) : const Icon(Icons.clear, color: Colors.redAccent,),
+        leading: widget._going ? const Icon(Icons.check, color: AppColours.tick,) : const Icon(Icons.clear, color: AppColours.error,),
         title: new Text(_fName),
         subtitle: new Text(_lName),
       ),

diff --git a/lib/widgets/event_list_card.dart b/lib/widgets/event_list_card.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../pages/event_page.dart';
+import '../utils/colours.dart';
 
 class EventCard extends StatefulWidget {
   @override
@@ -27,7 +28,7 @@ class EventCardController extends State<EventCard> {
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             new ListTile(
-              leading: const Icon(Icons.check, color: Colors.greenAccent,),
+              leading: const Icon(Icons.check, color: AppColours.tick,),
               title: new Text(widget._name),
               subtitle: new Text(widget._description.length < 35 ? widget._description : widget._description.substring(0, 30) + "..."),
             ),