Search + Channel Videos (#2)

* Adds a bottom bar with an additional top videos tab

* Add search

* Circular ripple effect around search icon

* Improve display of Video lists

* Remove demo vids

* Revert the changes to gradle

* Update pubspec.yaml

android/app/build.gradle

@@ -43,6 +43,7 @@ flutter {
 }
 
 dependencies {
+    compile 'com.android.support:appcompat-v7:+'
     androidTestCompile 'com.android.support:support-annotations:25.0.0'
     androidTestCompile 'com.android.support.test:runner:0.5'
     androidTestCompile 'com.android.support.test:rules:0.5'

android/app/src/main/AndroidManifest.xml

@@ -16,7 +16,7 @@
          In most cases you can leave this as-is, but you if you want to provide
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
-    <application android:name="io.flutter.app.FlutterApplication" android:label="flitch" android:icon="@mipmap/ic_launcher">
+    <application android:name="io.flutter.app.FlutterApplication" android:label="Flitch" android:icon="@mipmap/ic_launcher">
         <activity android:name=".MainActivity"
                   android:launchMode="singleTop"
                   android:theme="@android:style/Theme.Black.NoTitleBar"
@@ -28,5 +28,8 @@
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
+
+        <activity android:name="com.flutter_webview_plugin.WebviewActivity"
+                  android:parentActivityName=".MainActivity" android:theme="@style/FlitchTheme" />
     </application>
 </manifest>

android/app/src/main/res/values-v21/flitch_theme.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="FlitchTheme" parent="@android:style/Theme.DeviceDefault">
+        <item name="android:colorPrimary">#673AB7</item>
+        <item name="android:colorPrimaryDark">#4d2b89</item>
+        <item name="android:colorAccent">#9E9E9E</item>
+    </style>
+</resources>

android/app/src/main/res/values/flitch_theme.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="FlitchTheme" parent="@android:style/Theme.DeviceDefault">
+        <item name="android:actionBarStyle">@style/FlitchActionBarTheme</item>
+    </style>
+
+    <style name="FlitchActionBarTheme" parent="@android:style/Widget.DeviceDefault.ActionBar">
+        <item name="android:background">#673AB7</item>
+        <item name="android:backgroundStacked">?attr/colorPrimary</item>
+        <item name="android:backgroundSplit">?attr/colorPrimary</item>
+    </style>
+</resources>

lib/main.dart

@@ -2,11 +2,11 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+import 'package:flitch/src/services.dart';
 import 'package:flutter/widgets.dart';
-import 'package:twitch/twitch.dart';
 
+import 'package:twitch/twitch.dart';
 import 'src/application.dart';
-import 'src/services.dart';
 
 // Please register a different client ID before publishing:
 // https://www.twitch.tv/settings/connections
@@ -15,8 +15,6 @@ import 'src/services.dart';
 const _twitchClientId = '6gtkhkgt33mb3hujfq5f4vc0mrn4kc';
 
 void main() {
-  setUpServices(
-    twitch: new Twitch(new TwitchHttp(clientId: _twitchClientId)),
-  );
+  Services.setup(new Twitch(new TwitchHttp(clientId: _twitchClientId)));
   runApp(new FlitchApp());
 }

lib/src/application.dart

@@ -4,14 +4,14 @@
 
 import 'package:flutter/material.dart';
 
-import 'views/home.dart';
+import 'package:flitch/src/screens/home.dart';
 
 class FlitchApp extends MaterialApp {
   FlitchApp()
       : super(
           debugShowCheckedModeBanner: false,
           title: 'Flitch',
-          home: const HomeWidget(),
+          home: const HomeScreen(),
           theme: _twitchTheme,
         );
 }

lib/src/screens/channel.dart

@@ -0,0 +1,22 @@
+// Copyright 2017, Google Inc.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:flitch/src/services.dart';
+import 'package:flitch/src/widgets/videos.dart';
+import 'package:flutter/material.dart';
+import 'package:twitch/twitch.dart';
+
+class ChannelScreen extends StatelessWidget {
+  final Channel channel;
+
+  const ChannelScreen(this.channel);
+
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+        appBar: new AppBar(
+            title: new Text("Videos from ${channel.name}")),
+        body: new VideosList(Services.twitch.getChannelVideos(channel.id)));
+  }
+}

lib/src/views/home.dart → lib/src/screens/home.dart

@@ -2,32 +2,33 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-import 'package:flitch/src/widgets/top_videos.dart';
+import 'package:flitch/src/screens/search.dart';
+import 'package:flitch/src/services.dart';
+import 'package:flitch/src/widgets/videos.dart';
 import 'package:flutter/material.dart';
-import '../services.dart' as services;
-import '../widgets/game.dart';
+import '../widgets/top_games.dart';
 
-class HomeWidget extends StatefulWidget {
-  const HomeWidget();
+class HomeScreen extends StatefulWidget {
+  const HomeScreen();
 
   @override
   State<StatefulWidget> createState() {
     return new HomeWidgetState();
   }
 }
 
-class HomeWidgetState extends State<HomeWidget> {
+class HomeWidgetState extends State<HomeScreen> {
   int _currentIndex = 0;
-  final List<Screen> _screens = [
-    new Screen(
+  final List<Tab> _tabs = [
+    new Tab(
       title: 'Top Games',
       body: new TopGameList(),
       key: new Key('TopGamesList'),
       icon: Icons.games,
     ),
-    new Screen(
+    new Tab(
       title: 'Top Videos',
-      body: new TopVideosList(services.twitch),
+      body: new VideosList(Services.twitch.getTopVideos()),
       key: new Key('TopVideosList'),
       icon: Icons.videocam,
     ),
@@ -40,11 +41,23 @@ class HomeWidgetState extends State<HomeWidget> {
     return new Scaffold(
         appBar: new AppBar(
           title: new Text('Flitch'),
+          actions: [
+            new IconButton(
+                icon: new Icon(Icons.search),
+                padding: new EdgeInsets.fromLTRB(16.0, 0.0, 12.0, 0.0),
+                onPressed: () async {
+                  await Navigator.push(
+                      context,
+                      new MaterialPageRoute(
+                          builder: (context) => new SearchScreen()));
+                },
+                tooltip: 'Search'),
+          ],
         ),
         body: new Stack(
-            children: (_screens
+            children: (_tabs
                 // Get all inactive screens
-                .where((screen) => _screens.indexOf(screen) != _currentIndex)
+                .where((screen) => _tabs.indexOf(screen) != _currentIndex)
                 // Place them on the bottom of the Stack, and fade em out
                 .map((screen) => new AnimatedOpacity(
                     opacity: 0.0,
@@ -56,27 +69,27 @@ class HomeWidgetState extends State<HomeWidget> {
                   ..add(new AnimatedOpacity(
                       opacity: 1.0,
                       duration: transitionDuration,
-                      child: _screens[_currentIndex].body,
-                      key: _screens[_currentIndex].key)))),
+                      child: _tabs[_currentIndex].body,
+                      key: _tabs[_currentIndex].key)))),
         bottomNavigationBar: new BottomNavigationBar(
             currentIndex: _currentIndex,
             onTap: (currentIndex) {
               setState(() {
                 _currentIndex = currentIndex;
               });
             },
-            items: _screens
+            items: _tabs
                 .map((item) => new BottomNavigationBarItem(
                     icon: new Icon(item.icon), title: new Text(item.title)))
                 .toList()));
   }
 }
 
-class Screen {
+class Tab {
   final Widget body;
   final IconData icon;
   final String title;
   final Key key;
 
-  Screen({this.body, this.icon, this.title, this.key});
+  Tab({this.body, this.icon, this.title, this.key});
 }

lib/src/screens/search.dart

@@ -0,0 +1,55 @@
+// Copyright 2017, Google Inc.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:flitch/src/widgets/search_channels.dart';
+import 'package:flutter/material.dart';
+
+class SearchScreen extends StatefulWidget {
+  const SearchScreen();
+
+  @override
+  State<StatefulWidget> createState() {
+    return new SearchScreenState();
+  }
+}
+
+class SearchScreenState extends State<SearchScreen> {
+  String _query = "";
+
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+        appBar: new AppBar(
+          title: new Container(
+            padding: new EdgeInsets.only(right: 12.0),
+            child: new TextField(
+                onSubmitted: (query) {
+                  setState(() {
+                    _query = query;
+                  });
+                },
+                autofocus: true,
+                decoration: new InputDecoration(
+                  hideDivider: true,
+                  hintText: "Search channels...",
+                  hintStyle: new TextStyle(
+                    color: new Color.fromARGB(120, 255, 255, 255),
+                    fontSize: 18.0,
+                    fontWeight: FontWeight.normal,
+                  ),
+                ),
+                style: new TextStyle(
+                    color: Colors.white,
+                    fontSize: 18.0,
+                    fontWeight: FontWeight.normal)),
+          ),
+        ),
+        body: _query.isEmpty
+            ? new Container()
+            : new SearchChannelsList(
+                _query,
+                key: new Key(_query),
+              ));
+  }
+}

lib/src/services.dart

@@ -4,14 +4,14 @@
 
 import 'package:twitch/twitch.dart';
 
-Twitch _twitch;
+class Services {
+  static final Services _singleton = new Services._internal();
+  static final Twitch twitch = _singleton._twitch;
+  Twitch _twitch;
 
-/// Sets up services for the entire application.
-void setUpServices({
-  Twitch twitch,
-}) {
-  _twitch = twitch;
-}
+  Services._internal();
 
-/// Returns the Twitch service.
-Twitch get twitch => _twitch;
+  static void setup(Twitch twitch) {
+    _singleton._twitch = twitch;
+  }
+}