From 1c08c97479c17a4b1996f00b909f59daab482e9a Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 29 Jan 2019 13:16:18 -0500 Subject: [PATCH] Layout widgets: Container example app --- examples/layout/container/README.md | 1 + .../layout/container/images/pic1.jpg | Bin .../layout/container/images/pic2.jpg | Bin .../layout/container/images/pic3.jpg | Bin .../layout/container/images/pic4.jpg | Bin examples/layout/container/lib/main.dart | 56 ++++++++ examples/layout/container/pubspec.yaml | 24 ++++ .../layout/container/test/widget_test.dart | 14 ++ examples/layout/pavlova/lib/main.dart | 2 +- .../code/layout/container/.gitignore | 9 -- src/_includes/code/layout/container/main.dart | 110 --------------- .../code/layout/container/pubspec.yaml | 14 -- src/docs/development/ui/layout/index.md | 125 ++++++++---------- 13 files changed, 150 insertions(+), 205 deletions(-) create mode 120000 examples/layout/container/README.md rename {src/_includes/code => examples}/layout/container/images/pic1.jpg (100%) rename {src/_includes/code => examples}/layout/container/images/pic2.jpg (100%) rename {src/_includes/code => examples}/layout/container/images/pic3.jpg (100%) rename {src/_includes/code => examples}/layout/container/images/pic4.jpg (100%) create mode 100644 examples/layout/container/lib/main.dart create mode 100644 examples/layout/container/pubspec.yaml create mode 100644 examples/layout/container/test/widget_test.dart delete mode 100644 src/_includes/code/layout/container/.gitignore delete mode 100644 src/_includes/code/layout/container/main.dart delete mode 100644 src/_includes/code/layout/container/pubspec.yaml diff --git a/examples/layout/container/README.md b/examples/layout/container/README.md new file mode 120000 index 0000000000..fe84005413 --- /dev/null +++ b/examples/layout/container/README.md @@ -0,0 +1 @@ +../../README.md \ No newline at end of file diff --git a/src/_includes/code/layout/container/images/pic1.jpg b/examples/layout/container/images/pic1.jpg similarity index 100% rename from src/_includes/code/layout/container/images/pic1.jpg rename to examples/layout/container/images/pic1.jpg diff --git a/src/_includes/code/layout/container/images/pic2.jpg b/examples/layout/container/images/pic2.jpg similarity index 100% rename from src/_includes/code/layout/container/images/pic2.jpg rename to examples/layout/container/images/pic2.jpg diff --git a/src/_includes/code/layout/container/images/pic3.jpg b/examples/layout/container/images/pic3.jpg similarity index 100% rename from src/_includes/code/layout/container/images/pic3.jpg rename to examples/layout/container/images/pic3.jpg diff --git a/src/_includes/code/layout/container/images/pic4.jpg b/examples/layout/container/images/pic4.jpg similarity index 100% rename from src/_includes/code/layout/container/images/pic4.jpg rename to examples/layout/container/images/pic4.jpg diff --git a/examples/layout/container/lib/main.dart b/examples/layout/container/lib/main.dart new file mode 100644 index 0000000000..c29fe8a178 --- /dev/null +++ b/examples/layout/container/lib/main.dart @@ -0,0 +1,56 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; + +void main() { + debugPaintSizeEnabled = false; // Set to true for visual layout + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Flutter layout demo', + home: Scaffold( + appBar: AppBar( + title: Text('Flutter layout demo'), + ), + body: Center(child: _buildImageColumn()), + ), + ); + } + + // #docregion column + Widget _buildImageColumn() => Container( + decoration: BoxDecoration( + color: Colors.black26, + ), + child: Column( + children: [ + _buildImageRow(1), + _buildImageRow(3), + ], + ), + ); + // #enddocregion column + + // #docregion row + Widget _buildDecoratedImage(int imageIndex) => Expanded( + child: Container( + decoration: BoxDecoration( + border: Border.all(width: 10, color: Colors.black38), + borderRadius: const BorderRadius.all(const Radius.circular(8)), + ), + margin: const EdgeInsets.all(4), + child: Image.asset('images/pic$imageIndex.jpg'), + ), + ); + + Widget _buildImageRow(int imageIndex) => Row( + children: [ + _buildDecoratedImage(imageIndex), + _buildDecoratedImage(imageIndex + 1), + ], + ); + // #enddocregion row +} diff --git a/examples/layout/container/pubspec.yaml b/examples/layout/container/pubspec.yaml new file mode 100644 index 0000000000..ae8edb1dec --- /dev/null +++ b/examples/layout/container/pubspec.yaml @@ -0,0 +1,24 @@ +name: layout +description: > + Sample app from "Building Layouts", https://flutter.io/docs/development/ui/layout. +version: 1.0.0 + +environment: + sdk: '>=2.0.0-dev.68.0 <3.0.0' + +dependencies: + flutter: + sdk: flutter + cupertino_icons: ^0.1.2 + +dev_dependencies: + flutter_test: + sdk: flutter + +flutter: + uses-material-design: true + assets: + - images/pic1.jpg + - images/pic2.jpg + - images/pic3.jpg + - images/pic4.jpg diff --git a/examples/layout/container/test/widget_test.dart b/examples/layout/container/test/widget_test.dart new file mode 100644 index 0000000000..52d2f7f1dc --- /dev/null +++ b/examples/layout/container/test/widget_test.dart @@ -0,0 +1,14 @@ +// Basic Flutter widget test. Learn more at https://flutter.io/docs/testing. + +import 'package:flutter_test/flutter_test.dart'; +import 'package:layout/main.dart'; + +void main() { + testWidgets('Example app smoke test', (WidgetTester tester) async { + // Build our app and trigger a frame. + await tester.pumpWidget(MyApp()); + + expect(find.text('Flutter layout demo'), findsOneWidget); + // TODO: test more app features. + }); +} diff --git a/examples/layout/pavlova/lib/main.dart b/examples/layout/pavlova/lib/main.dart index 58cf95b340..cbb99d7ee8 100644 --- a/examples/layout/pavlova/lib/main.dart +++ b/examples/layout/pavlova/lib/main.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; void main() { - debugPaintSizeEnabled = false; // Remove to suppress visual layout + debugPaintSizeEnabled = false; // Set to true for visual layout runApp(MyApp()); } diff --git a/src/_includes/code/layout/container/.gitignore b/src/_includes/code/layout/container/.gitignore deleted file mode 100644 index 14c7d4c3f7..0000000000 --- a/src/_includes/code/layout/container/.gitignore +++ /dev/null @@ -1,9 +0,0 @@ -.DS_Store -.atom/ -.idea -.packages -.pub/ -build/ -ios/.generated/ -packages -pubspec.lock diff --git a/src/_includes/code/layout/container/main.dart b/src/_includes/code/layout/container/main.dart deleted file mode 100644 index 3d863d116e..0000000000 --- a/src/_includes/code/layout/container/main.dart +++ /dev/null @@ -1,110 +0,0 @@ -// Copyright 2017 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'; -// Uncomment lines 7 and 10 to view the visual layout at runtime. -//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; - -void main() { - //debugPaintSizeEnabled = true; - runApp(MyApp()); -} - -class MyApp extends StatelessWidget { - @override - Widget build(BuildContext context) { - return MaterialApp( - title: 'Flutter Demo', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: MyHomePage(title: 'Flutter Demo Home Page'), - ); - } -} - -class MyHomePage extends StatefulWidget { - MyHomePage({Key key, this.title}) : super(key: key); - - final String title; - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - @override - Widget build(BuildContext context) { - var container = Container( - decoration: BoxDecoration( - color: Colors.black26, - ), - child: Column( - children: [ - Row( - children: [ - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic1.jpg'), - ), - ), - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic2.jpg'), - ), - ), - ], - ), - Row( - children: [ - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic3.jpg'), - ), - ), - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic4.jpg'), - ), - ), - ], - ), - ], - ), - ); - - return Scaffold( - appBar: AppBar( - title: Text(widget.title), - ), - body: Center( - child: container, - ), - ); - } -} diff --git a/src/_includes/code/layout/container/pubspec.yaml b/src/_includes/code/layout/container/pubspec.yaml deleted file mode 100644 index 1b7bf74e6f..0000000000 --- a/src/_includes/code/layout/container/pubspec.yaml +++ /dev/null @@ -1,14 +0,0 @@ -name: container -description: Demonstrates the Container widget. - -dependencies: - flutter: - sdk: flutter - -flutter: - uses-material-design: true - assets: - - images/pic1.jpg - - images/pic2.jpg - - images/pic3.jpg - - images/pic4.jpg diff --git a/src/docs/development/ui/layout/index.md b/src/docs/development/ui/layout/index.md index 3cc914670a..6176ca17ab 100644 --- a/src/docs/development/ui/layout/index.md +++ b/src/docs/development/ui/layout/index.md @@ -664,17 +664,15 @@ body: Center( Flutter has a rich library of layout widgets. Here are a few of those most commonly used. The intent is to get you up and running as quickly as possible, rather than overwhelm you with a complete list. For information on other -available widgets, refer to the [Widget Overview](/docs/development/ui/widgets), -or use the Search box in the [API reference docs](https://docs.flutter.io/). +available widgets, refer to the [Widget catalog][], +or use the Search box in the [API reference docs](https://docs.flutter.io). Also, the widget pages in the API docs often make suggestions about similar widgets that might better suit your needs. The following widgets fall into two categories: standard widgets from the -[widgets library,]({{api}}/widgets/widgets-library.html) -and specialized widgets from the -[Material Components library]({{api}}/material/material-library.html). -Any app can use the widgets library but only Material apps can use the -Material Components library. +[widgets library][], and specialized widgets from the [Material library][]. Any +app can use the widgets library but only Material apps can use the Material +Components library. ### Standard widgets @@ -684,7 +682,7 @@ Material Components library. * [ListView](#listview): Lays widgets out as a scrollable list. * [Stack](#stack): Overlaps a widget on top of another. -### Material Components +### Material widgets * [Card](#card): Organizes related info into a box with rounded corners and a drop shadow. @@ -693,9 +691,9 @@ Material Components library. ### Container -Many layouts make liberal use of Containers to separate widgets with padding, +Many layouts make liberal use of [Container][]s to separate widgets using padding, or to add borders or margins. You can change the device's background by -placing the entire layout into a Container and changing its background color +placing the entire layout into a `Container` and changing its background color or image.
@@ -717,77 +715,60 @@ or image. #### Examples (Container) {:.no_toc} -In addition to the example below, -many examples in this tutorial use Container. You can also find more -Container examples in the [Flutter -Gallery][]. +This layout consists of a column with two rows, each containing 2 images. A +[Container][] is used to change the background color of the column to a lighter +grey.
-
- This layout consists of a column of two rows, each containing 2 images. - Each image uses a Container to add a rounded grey border and margins. - The Column, which contains the rows of images, - uses a Container to change the background color to a lighter grey. - - **Dart code:** [main.dart]({{code}}/layout/container/main.dart), snippet below
- **Images:** [images]({{code}}/layout/container/images)
- **Pubspec:** [pubspec.yaml]({{code}}/layout/container/pubspec.yaml) +
+ + ```dart + Widget _buildImageColumn() => [!Container!]( + decoration: BoxDecoration( + color: Colors.black26, + ), + child: Column( + children: [ + _buildImageRow(1), + _buildImageRow(3), + ], + ), + ); + ```
-
+
{% asset ui/layout/container.png class="mb-4 mw-100" width="230px" alt="Screenshot showing 2 rows, each containing 2 images" %}
- - -{% prettify dart %} -class _MyHomePageState extends State { - @override - Widget build(BuildContext context) { +A `Container` is also used to add a rounded border and margins to each image: - var container = Container( - decoration: BoxDecoration( - color: Colors.black26, - ), - child: Column( - children: [ - Row( - children: [ - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic1.jpg'), - ), - ), - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all(width: 10.0, color: Colors.black38), - borderRadius: - const BorderRadius.all(const Radius.circular(8.0)), - ), - margin: const EdgeInsets.all(4.0), - child: Image.asset('images/pic2.jpg'), - ), - ), - ], - ), - // ... - // [[highlight]]See the definition for the second row on GitHub:[[/highlight]] - // [[highlight]]{{code}}/layout/container/main.dart[[/highlight]] - ], + +```dart +Widget _buildDecoratedImage(int imageIndex) => Expanded( + child: [!Container!]( + decoration: BoxDecoration( + border: Border.all(width: 10, color: Colors.black38), + borderRadius: const BorderRadius.all(const Radius.circular(8)), + ), + margin: const EdgeInsets.all(4), + child: Image.asset('images/pic$imageIndex.jpg'), ), ); - //... - } -} -{% endprettify %} + +Widget _buildImageRow(int imageIndex) => Row( + children: [ + _buildDecoratedImage(imageIndex), + _buildDecoratedImage(imageIndex + 1), + ], + ); +``` + +You can find more `Container` examples in the [tutorial][] and the [Flutter +Gallery][]. + +**App source:** [container]({{examples}}/layout/container)
@@ -1237,4 +1218,6 @@ The following resources may help when writing layout code. [Row]: {{api}}/widgets/Row-class.html [Scaffold]: {{api}}/material/Scaffold-class.html [Text]: {{api}}/widgets/Text-class.html -[widgets library]: {{api}}/widgets/widgets-library.html \ No newline at end of file +[tutorial]: /docs/development/ui/layout/tutorial +[widgets library]: {{api}}/widgets/widgets-library.html +[Widget catalog]: /docs/development/ui/widgets