- list grid view

- hardware key clicks

Author: Bhavik Makwana

lib/ExampleNameItem.dart

@@ -1,52 +1,58 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_examples/models/ExapmleNames.dart';
+import 'package:meta/meta.dart';
 
+/// A [ExampleNameItem] to display a [ExampleNames].
 class ExampleNameItem extends StatelessWidget {
-  const ExampleNameItem(this.exampleNames);
-
   final ExampleNames exampleNames;
+  final ValueChanged<ExampleNames> onTap;
+
+  const ExampleNameItem({
+    Key key,
+    @required this.exampleNames,
+    this.onTap,
+  })
+      : assert(exampleNames != null),
+        super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return _buildTiles(exampleNames, context);
-  }
-
-  Widget _buildTiles(ExampleNames root, BuildContext context) {
-    return Column(
-      children: <Widget>[
-        Card(
-          shape:
-          RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
-          elevation: 4.0,
-          child: Container(
-            decoration: new BoxDecoration(
-              border: new Border(
-                left: new BorderSide(
-                  width: 4.0,
-                  color: Colors.lightGreen,
-                ),
-              ),
+    return Card(
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
+      elevation: 4.0,
+      child: Container(
+        decoration: new BoxDecoration(
+          border: new Border(
+            left: new BorderSide(
+              width: 4.0,
+              color: Colors.lightGreen,
             ),
-            child: new ListTile(
-                contentPadding: EdgeInsets.only(left: 16.0, right: 16.0),
-                title: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    Expanded(
-                      child: new Text(
-                        root.title,
-                        softWrap: true,
-                      ),
-                    ),
-                    new Icon(Icons.chevron_right)
-                  ],
+          ),
+        ),
+        child: InkWell(
+          onTap: () {
+            Navigator.pushNamed(context, "/${exampleNames.title}");
+          },
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisSize: MainAxisSize.max,
+            children: <Widget>[
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: new Text(
+                    exampleNames.title,
+                  ),
                 ),
-                onTap: () {
-                  Navigator.pushNamed(context, "/${exampleNames.title}");
-                }),
+              ),
+              new Icon(
+                Icons.chevron_right,
+              ),
+            ],
           ),
         ),
-      ],
+      ),
     );
   }
 }

lib/main.dart

@@ -7,6 +7,7 @@ import 'package:flutter_examples/ui/app_bar/AppBarExample.dart';
 import 'package:flutter_examples/ui/bottomnavigation/BottomNavigation.dart';
 import 'package:flutter_examples/ui/collapsibletoolbar/CollapsibleToolbar.dart';
 import 'package:flutter_examples/ui/drawer/NavigationDrawer.dart';
+import 'package:flutter_examples/ui/hardwarekey/RawKeyboardDemo.dart';
 import 'package:flutter_examples/ui/progressbutton/ProgressButton.dart';
 import 'package:flutter_examples/ui/staggeredanimation/StaggerDemo.dart';
 import 'package:flutter_examples/ui/stepper/StepperExample.dart';
@@ -47,6 +48,8 @@ class MyApp extends StatelessWidget {
               StaggerDemo(title: Strings.staggerDemoTitle),
           Strings.stepperExampleRoute: (BuildContext context) =>
               StepperExample(title: Strings.stepperExampleTitle),
+          Strings.hardwareKeyExampleRoute: (BuildContext context) =>
+              RawKeyboardDemo(title: Strings.hardwareKeyExampleTitle),
         });
   }
 }
@@ -79,6 +82,8 @@ class _MyHomePageState extends State<MyHomePage>
     super.dispose();
   }
 
+  bool status = false;
+
   bool get _status {
     final AnimationStatus status = _controller.status;
     return status == AnimationStatus.completed ||
@@ -94,6 +99,9 @@ class _MyHomePageState extends State<MyHomePage>
           new IconButton(
             onPressed: () {
               _controller.fling(velocity: _status ? -2.0 : 2.0);
+              setState(() {
+                status = _status;
+              });
             },
             icon: new AnimatedIcon(
               icon: AnimatedIcons.view_list,
@@ -105,16 +113,36 @@ class _MyHomePageState extends State<MyHomePage>
       body: new Column(
         children: <Widget>[
           Expanded(
-            child: new ListView.builder(
-              itemBuilder: (BuildContext context, int index) =>
-                  new ExampleNameItem(names[index]),
-              itemCount: names.length,
-            ),
+            child: _buildExampleItemsWidget(_status),
           ),
         ],
       ),
     );
   }
+
+  _buildExampleItemsWidget(bool status) {
+    if (status) {
+      return new ListView.builder(
+        itemBuilder: (BuildContext context, int index) =>
+        new ExampleNameItem(
+          exampleNames: names[index],
+        ),
+        itemCount: names.length,
+      );
+    } else {
+      return GridView.builder(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 2,
+          childAspectRatio: 3.0,
+        ),
+        itemBuilder: (BuildContext context, int index) =>
+        new ExampleNameItem(
+          exampleNames: names[index],
+        ),
+        itemCount: names.length,
+      );
+    }
+  }
 }
 
 // The list displayed by this app.
@@ -129,4 +157,5 @@ final List<ExampleNames> names = <ExampleNames>[
   new ExampleNames(Strings.progressButtonTitle),
   new ExampleNames(Strings.staggerDemoTitle),
   new ExampleNames(Strings.stepperExampleTitle),
+  new ExampleNames(Strings.hardwareKeyExampleTitle),
 ];

lib/ui/hardwarekey/RawKeyboardDemo.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class RawKeyboardDemo extends StatefulWidget {
+  final String title;
+
+  RawKeyboardDemo({Key key, this.title}) : super(key: key);
+
+  @override
+  _HardwareKeyDemoState createState() => new _HardwareKeyDemoState();
+}
+
+class _HardwareKeyDemoState extends State<RawKeyboardDemo> {
+  final FocusNode _focusNode = new FocusNode();
+  RawKeyEvent _event;
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _handleKeyEvent(RawKeyEvent event) {
+    setState(() {
+      _event = event;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final TextTheme textTheme = Theme.of(context).textTheme;
+    return Scaffold(
+      appBar: new AppBar(
+        title: new Text(widget.title),
+      ),
+      body: Center(
+        child: new RawKeyboardListener(
+          focusNode: _focusNode,
+          onKey: _handleKeyEvent,
+          child: new AnimatedBuilder(
+            animation: _focusNode,
+            builder: (BuildContext context, Widget child) {
+              if (!_focusNode.hasFocus) {
+                return new GestureDetector(
+                  onTap: () {
+                    FocusScope.of(context).requestFocus(_focusNode);
+                  },
+                  child: new Text('Tap to focus', style: textTheme.display1),
+                );
+              }
+
+              if (_event == null)
+                return new Text('Press Volume key', style: textTheme.display1);
+
+              int flags;
+              int codePoint;
+              int keyCode;
+              int scanCode;
+              int metaState;
+              final RawKeyEventData data = _event.data;
+
+              if (data is RawKeyEventDataAndroid) {
+                flags = data.flags;
+                codePoint = data.codePoint;
+                keyCode = data.keyCode;
+                scanCode = data.scanCode;
+                metaState = data.metaState;
+              }
+
+              return new Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  new Text('${_event.runtimeType}', style: textTheme.subhead),
+                  new Text('flags: $flags', style: textTheme.subhead),
+                  new Text('codePoint: $codePoint', style: textTheme.subhead),
+                  new Text('keyCode: $keyCode', style: textTheme.subhead),
+                  new Text('scanCode: $scanCode', style: textTheme.subhead),
+                  new Text('metaState: $metaState', style: textTheme.subhead),
+                ],
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/utils/Strings.dart

@@ -22,6 +22,7 @@ class Strings {
   static const String progressButtonExampleRoute = "/Progress Button";
   static const String staggerDemoExampleRoute = "/Stagger Animation";
   static const String stepperExampleRoute = "/Stepper Example";
+  static const String hardwareKeyExampleRoute = "/Hardware Key Example";
 
   ///Strings
   //Titles
@@ -37,4 +38,5 @@ class Strings {
   static const String progressButtonTitle = "Progress Button";
   static const String staggerDemoTitle = "Stagger Animation";
   static const String stepperExampleTitle = "Stepper Example";
+  static const String hardwareKeyExampleTitle = "Hardware Key Example";
 }