file organization + service screen layout

lib/main.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
 
-import 'openlp_remote_app.dart';
+import 'src/openlp_remote_app.dart';
 
 void main() => runApp(OpenLPRemoteApp());

lib/screens/service_screen.dart

@@ -1,15 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ServiceScreen extends StatefulWidget {
-  @override
-  _ServiceScreenState createState() => _ServiceScreenState();
-}
-
-class _ServiceScreenState extends State<ServiceScreen> {
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      child: Text('Nothing here...'),
-    );
-  }
-}

lib/src/models/plugin.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+class Plugin {
+  final String id;
+
+  Plugin(this.id) : assert(id != null);
+
+  IconData icon() {
+    switch (this.id) {
+      case 'songs':
+        return Icons.audiotrack;
+      case 'bibles':
+        return Icons.book;
+      case 'presentations':
+        return Icons.present_to_all;
+      case 'images':
+        return Icons.image;
+      case 'media':
+        return Icons.ondemand_video;
+      case 'custom':
+        return Icons.video_label;
+    }
+    return Icons.screen_share;
+  }
+}

lib/src/models/service_item.dart

@@ -0,0 +1,17 @@
+import 'plugin.dart';
+
+class ServiceItem {
+  final String id;
+  final Plugin plugin;
+  bool selected;
+  final String title;
+
+  ServiceItem({this.id, String plugin, this.selected, this.title})
+      : plugin = Plugin(plugin);
+
+  ServiceItem.fromJson(Map<String, dynamic> json)
+      : id = json['id'],
+        title = json['title'],
+        plugin = Plugin(json['plugin']),
+        selected = json['selected'];
+}

lib/src/openlp_remote_app.dart

@@ -4,6 +4,7 @@ import 'app_theme.dart';
 
 import 'widgets/bottom_navigation_bar.dart';
 import 'widgets/search_floating_button.dart';
+import 'widgets/service_listview.dart';
 
 class OpenLPRemoteApp extends StatefulWidget {
   @override
@@ -45,6 +46,13 @@ class _OpenLPRemoteAppState extends State<OpenLPRemoteApp>
             controller: tabController,
           ),
         ),
+        body: TabBarView(
+          controller: tabController,
+          children: <Widget>[
+            ServiceListView(),
+            Container(),
+          ],
+        ),
         floatingActionButton: searchActionButton,
         floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
         bottomNavigationBar: AppBottomNavigationBar(),

lib/src/widgets/bottom_navigation_bar.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:openlp_remote/widgets/show_alert_dialog.dart';
 
 import 'display_options_bottom_sheet.dart';
+import 'show_alert_dialog.dart';
 
 class _Action {
   IconData icon;

lib/src/widgets/service_listview.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+import '../models/service_item.dart';
+
+class ServiceListView extends StatefulWidget {
+  @override
+  _ServiceListViewState createState() => _ServiceListViewState();
+}
+
+class _ServiceListViewState extends State<ServiceListView> {
+  List<ServiceItem> serviceItems;
+
+  @override
+  void initState() {
+    serviceItems = [
+      ServiceItem(id: '1', plugin: 'songs', selected: false, title: 'Oceans'),
+      ServiceItem(
+          id: '2', plugin: 'bibles', selected: true, title: 'John 3:16'),
+      ServiceItem(
+          id: '3',
+          plugin: 'presentations',
+          selected: false,
+          title: 'Sunday service.pdf'),
+      ServiceItem(
+          id: '4', plugin: 'images', selected: false, title: 'Slogan.jpg'),
+      ServiceItem(
+          id: '5', plugin: 'media', selected: false, title: 'Video.mp4'),
+      ServiceItem(
+          id: '6', plugin: 'custom', selected: false, title: 'Custom alert'),
+    ];
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (serviceItems.isEmpty) {
+      return Center(
+        child: Container(
+          constraints: BoxConstraints(
+            maxHeight: 100,
+            maxWidth: 250,
+          ),
+          child: Text(
+            'Any item added to service.\n' +
+                'Please, add a new service item tapping the "New service item" button.',
+            textAlign: TextAlign.center,
+            style: TextStyle(color: Colors.black38),
+          ),
+        ),
+      );
+    }
+    return ListView.builder(
+      padding: EdgeInsets.only(bottom: 35),
+      itemCount: serviceItems.length,
+      itemBuilder: (context, i) {
+        ServiceItem item = serviceItems[i];
+        return Padding(
+            padding:
+                EdgeInsets.all(item.selected ? 15 : 25).copyWith(bottom: 0),
+            child: Card(
+              elevation: item.selected ? 10 : 1,
+              child: InkWell(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: <Widget>[
+                    AspectRatio(
+                      aspectRatio: 3 / 1,
+                      child: Container(
+                        color: Colors.black12,
+                        child: item.plugin.id == 'images'
+                            ? FittedBox(
+                                child:
+                                    Image.network('https://picsum.photos/500'),
+                                fit: BoxFit.cover,
+                              )
+                            : Icon(item.plugin.icon()),
+                      ),
+                    ),
+                    ListTile(
+                      title: Text(item.title),
+                      trailing: IconButton(
+                        icon: Icon(
+                          Icons.delete,
+                          color: Colors.red,
+                        ),
+                        onPressed: () {},
+                      ),
+                    ),
+                  ],
+                ),
+                onTap: () {},
+              ),
+            ));
+      },
+    );
+  }
+}