From 2cb0cb02d2513e0f4a8108a34f83f4196c642f3e Mon Sep 17 00:00:00 2001 From: Mary Date: Wed, 14 Mar 2018 12:12:17 -0700 Subject: [PATCH] Add demo code (#71) * add code snippets from screencasts * Adds Cupertino/Material demo * add copyright headers * add colors demo * add colors demo * add demo code * Remove extra newline * add orientation code * clean up code * 2 spaces --- .../solution_01_hello_rectangle/lib/main.dart | 48 +++++------ course/code-snippets/lesson_1_09_demo.dart | 43 ++++++++++ course/code-snippets/lesson_1_12_demo.dart | 82 +++++++++++++++++++ course/code-snippets/lesson_1_20_demo.dart | 63 ++++++++++++++ course/code-snippets/lesson_2_02_demo.dart | 46 +++++++++++ .../unit_converter/lib/category_route.dart | 16 ++-- 6 files changed, 262 insertions(+), 36 deletions(-) create mode 100644 course/code-snippets/lesson_1_09_demo.dart create mode 100644 course/code-snippets/lesson_1_12_demo.dart create mode 100644 course/code-snippets/lesson_1_20_demo.dart create mode 100644 course/code-snippets/lesson_2_02_demo.dart diff --git a/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart b/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart index 6a5a2865..a51be4f8 100644 --- a/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart +++ b/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart @@ -4,43 +4,35 @@ import 'package:flutter/material.dart'; -const _padding = const EdgeInsets.all(16.0); - void main() { - runApp(new MaterialApp( - title: 'Hello Rectangle App Title', - home: new Scaffold( - appBar: new AppBar( - title: const Text('Hello Rectangle App Bar Title'), + runApp( + MaterialApp( + home: Scaffold( + appBar: AppBar( + title: Text('Hello Rectangle'), + ), + body: HelloRectangle(), ), - body: new Rectangle(), ), - )); + ); } -/// Widget that shows a colored, rectangular container, with centered text -class Rectangle extends StatelessWidget { +class HelloRectangle extends StatelessWidget { @override Widget build(BuildContext context) { - return new Padding( - padding: _padding, - child: new Align( - alignment: Alignment.topCenter, - child: new Container( - color: Colors.greenAccent, - height: 200.0, - width: 300.0, - child: new Center( - child: new Padding( - padding: _padding, - child: const Text( - 'Hello', - textAlign: TextAlign.center, - ), - ), + return Center( + child: Container( + color: Colors.greenAccent, + height: 400.0, + width: 300.0, + child: Center( + child: Text( + 'Hello!', + style: TextStyle(fontSize: 40.0), + textAlign: TextAlign.center, ), ), ), ); } -} +} \ No newline at end of file diff --git a/course/code-snippets/lesson_1_09_demo.dart b/course/code-snippets/lesson_1_09_demo.dart new file mode 100644 index 00000000..63396399 --- /dev/null +++ b/course/code-snippets/lesson_1_09_demo.dart @@ -0,0 +1,43 @@ +// Copyright 2018 The Chromium Authors. 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:flutter/material.dart'; + +void main() { + runApp(MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Hello Rectangle', + home: Scaffold( + body: HelloRectangle(), + ), + )); +} + +class HelloRectangle extends StatelessWidget { + @override + Widget build(BuildContext context) { + var container = Container( + color: Colors.purple, + ); + return Container( + padding: EdgeInsets.only( + top: 64.0, + left: 32.0, + bottom: 32.0, + right: 32.0, + ), + child: container, + ); + } +} + +/// Example of a widget with the `children` property. +var container = Column( + children: [ + Text('Hello!'), + Text('Hello!'), + Text('Hello!'), + Text('Hello!'), + ], +); diff --git a/course/code-snippets/lesson_1_12_demo.dart b/course/code-snippets/lesson_1_12_demo.dart new file mode 100644 index 00000000..864e4aca --- /dev/null +++ b/course/code-snippets/lesson_1_12_demo.dart @@ -0,0 +1,82 @@ +// Copyright 2018 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +// To keep your imports tidy, follow the ordering guidelines at +// https://www.dartlang.org/guides/language/effective-dart/style#ordering +import 'package:flutter/material.dart'; + +import 'package:unit_converter/converter_route.dart'; +import 'package:unit_converter/unit.dart'; + +// We use an underscore to indicate that these variables are private. +// See https://www.dartlang.org/guides/language/effective-dart/design#libraries +final _rowHeight = 100.0; +final _borderRadius = BorderRadius.circular(_rowHeight / 2); + +/// A [Category] for a list of [Unit]s. +class Category extends StatelessWidget { + final String name; + final List units; + final ColorSwatch color; + final String iconLocation; + + /// Constructor. + const Category({ + Key key, + this.name, + this.units, + this.color, + this.iconLocation, + }) : super(key: key); + + /// Navigates to the [ConverterRoute]. + void _navigateToConverter(BuildContext context) { + if (Navigator.of(context).canPop()) { + Navigator.of(context).pop(); + } + Navigator.of(context).push(MaterialPageRoute( + builder: (BuildContext context) { + return Scaffold( + appBar: AppBar( + elevation: 1.0, + title: Text( + name, + style: Theme.of(context).textTheme.display1, + ), + centerTitle: true, + backgroundColor: color[100], + ), + body: ConverterRoute( + name: name, + units: units, + color: color, + ), + // This prevents the onscreen keyboard from affecting the size of the + // screen, and the space given to widgets. + // See https://docs.flutter.io/flutter/material/Scaffold/resizeToAvoidBottomPadding.html + resizeToAvoidBottomPadding: false, + ); + }, + )); + } + + /// Builds a widget that shows [Category] information, using [ListTile] + Widget build(BuildContext context) { + assert(debugCheckHasMaterial(context)); + return Material( + color: Colors.green[100], + child: ListTile( + leading: iconLocation != null ? Image.asset(iconLocation) : null, + title: Text( + name, + style: Theme.of(context).textTheme.display1.copyWith( + color: Colors.black, + fontSize: 24.0, + ), + ), + onTap: () => _navigateToConverter(context), + ), + ); + } +} diff --git a/course/code-snippets/lesson_1_20_demo.dart b/course/code-snippets/lesson_1_20_demo.dart new file mode 100644 index 00000000..82feb8c8 --- /dev/null +++ b/course/code-snippets/lesson_1_20_demo.dart @@ -0,0 +1,63 @@ +// Copyright 2018 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:math'; + +import 'package:flutter/material.dart'; + +void main() { + runApp( + MaterialApp( + home: Scaffold( + appBar: AppBar( + title: Text('Hello Rainbow Rectangle'), + ), + body: HelloRectangle(text: 'Hello from instantiation!'), + ), + ), + ); +} + +class HelloRectangle extends StatefulWidget { + final String text; + + HelloRectangle({ + this.text, + }); + + @override + createState() => _HelloRectangleState(); +} + +class _HelloRectangleState extends State { + Color _color = Colors.greenAccent; + + void _generateRandomColor() { + var random = Random(); + setState(() { + _color = Color.fromARGB( + 255, + random.nextInt(255), + random.nextInt(255), + random.nextInt(255), + ); + }); + } + + Widget build(BuildContext context) { + return Center( + child: FlatButton( + onPressed: _generateRandomColor, + color: _color, + child: Center( + child: Text( + widget.text, + style: TextStyle(fontSize: 40.0), + textAlign: TextAlign.center, + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/course/code-snippets/lesson_2_02_demo.dart b/course/code-snippets/lesson_2_02_demo.dart new file mode 100644 index 00000000..dda17946 --- /dev/null +++ b/course/code-snippets/lesson_2_02_demo.dart @@ -0,0 +1,46 @@ +// Copyright 2018 The Chromium Authors. 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:flutter/material.dart'; +import 'package:flutter/cupertino.dart'; + +void main() { + runApp( + MaterialApp( + debugShowCheckedModeBanner: false, + home: Scaffold( + appBar: AppBar( + title: Text('Hello Switch'), + ), + body: HelloSwitch(), + ), + ), + ); +} + +class HelloSwitch extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Hello!', + style: TextStyle(fontSize: 36.0), + ), + Theme.of(context).platform == TargetPlatform.iOS + ? CupertinoSwitch( + value: true, + onChanged: (bool toggled) {}, + ) + : Switch( + value: true, + onChanged: (bool toggled) {}, + ), + ], + ), + ); + } +} diff --git a/unit_converter/unit_converter/lib/category_route.dart b/unit_converter/unit_converter/lib/category_route.dart index e467dba5..f88f73df 100644 --- a/unit_converter/unit_converter/lib/category_route.dart +++ b/unit_converter/unit_converter/lib/category_route.dart @@ -19,8 +19,7 @@ const apiCategory = { 'route': 'currency', }; -// TODO change this color -const _appBarColor = Colors.green; +final _backgroundColor = Colors.green[100]; /// Category Route (page). /// @@ -169,14 +168,14 @@ class _CategoryRouteState extends State { /// /// For portrait, we use a [ListView] /// For landscape, we use a [GridView] - Widget _buildCategoryWidgets(bool portrait) { + Widget _buildCategoryWidgets(Orientation deviceOrientation) { // Why do we pass in `_categories.toList()` instead of just `_categories`? // Widgets are supposed to be deeply immutable objects. We're passing in // _categories to this GridView, which changes as we load in each // [Category]. So, each time _categories changes, we need to pass in a new // list. The .toList() function does this. // For more details, see https://github.com/dart-lang/sdk/issues/27755 - if (portrait) { + if (deviceOrientation == Orientation.portrait) { return ListView.builder( itemBuilder: (BuildContext context, int index) => _categories[index], itemCount: _categories.length, @@ -203,11 +202,12 @@ class _CategoryRouteState extends State { } // Based on the device size, figure out how to best lay out the list - final deviceSize = MediaQuery.of(context).size; + // You can also use MediaQuery.of(context).size to check orientation + assert(debugCheckHasMediaQuery(context)); final listView = Container( - color: Colors.green[100], + color: _backgroundColor, padding: EdgeInsets.symmetric(horizontal: 8.0), - child: _buildCategoryWidgets(deviceSize.height > deviceSize.width), + child: _buildCategoryWidgets(MediaQuery.of(context).orientation), ); if (widget.footer) { @@ -222,7 +222,7 @@ class _CategoryRouteState extends State { color: Colors.grey[800], ), ), - backgroundColor: _appBarColor[100], + backgroundColor: _backgroundColor, leading: Icon( Icons.clear, color: Colors.grey[800],